Añadir ruta /security-2falogin (verificación en 2 pasos / TOTP)
Activación de 2FA (TOTP) para el login del juego, guardando el secreto en acore_auth.account.totp_secret tal como lo lee el bnetserver 3.4.3. - lib/two-factor.ts: TOTP (HMAC-SHA1, 30s, 6 dígitos, ±1) idéntico al core (verificado contra los vectores RFC 6238), Base32, otpauth, y codificado del secreto: crudo por defecto o AES-128-GCM (ciphertext‖IV12‖tag12) si se define TOTP_MASTER_SECRET (mismo hex que TOTPMasterSecret del servidor). - Flujo seguro sin bloqueos: el secreto se genera y queda PENDIENTE en la sesión; sólo se escribe en la cuenta tras verificar un código válido. - /api/account/2fa: activar (password + token de seguridad), verificar y desactivar (con código actual). QR generado en el servidor (el secreto no sale a terceros). - Página + componente fieles al markup (preview, pasos, copiar clave, ojos). Verificado E2E: activar -> QR/secreto -> verificar -> totp_secret = 20 bytes (igual al secreto escaneado) -> desactivar -> NULL. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { setRequestLocale } from 'next-intl/server'
|
||||
import { redirect, Link } from '@/i18n/navigation'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { is2faEnabled } from '@/lib/two-factor'
|
||||
import { PageShell } from '@/components/PageShell'
|
||||
import { TwoFactorLogin } from '@/components/TwoFactorLogin'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
export const metadata: Metadata = { title: 'Verificación en 2 pasos' }
|
||||
|
||||
const IMG = '/nw-themes/nw-ryu/nw-images'
|
||||
|
||||
export default async function Security2faLoginPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params
|
||||
setRequestLocale(locale)
|
||||
|
||||
const session = await getSession()
|
||||
if (!session.bnetId) redirect({ href: '/login', locale })
|
||||
if (!session.username) redirect({ href: '/select-account', locale })
|
||||
|
||||
const enabled = session.accountId ? await is2faEnabled(session.accountId) : false
|
||||
|
||||
return (
|
||||
<PageShell title="Verificación en 2 pasos">
|
||||
<div className="box-content">
|
||||
<div className="title-box-content">
|
||||
<h2>Información</h2>
|
||||
<Link className="back-to-account" href="/account">Regresar a mi cuenta</Link>
|
||||
<Link className="back-to-account-responsive" href="/account">Regresar</Link>
|
||||
</div>
|
||||
<div className="body-box-content justified">
|
||||
<br />
|
||||
<div className="twofa-login-info">
|
||||
<img
|
||||
className="twofa-login-preview"
|
||||
src={`${IMG}/nw-general/nw-authenticator-preview.png`}
|
||||
alt="Vista previa autenticador"
|
||||
/>
|
||||
<div className="twofa-login-info-text">
|
||||
<p><span>2FA</span> son las siglas de "Two Factor Authentication", o verificación en dos pasos.</p>
|
||||
<br />
|
||||
<p>Es un método que añade una capa adicional de seguridad al proceso de inicio de sesión.</p>
|
||||
<p>En lugar de simplemente ingresar tu nombre de usuario y contraseña, 2FA requiere un segundo paso de verificación, aumentando así la protección de tu cuenta.</p>
|
||||
<br />
|
||||
<p>Una vez activado, luego de ingresar usuario y contraseña, aparecerá una ventana (Imagen derecha) que te pedirá el código de autenticación generado por la aplicación.</p>
|
||||
<br />
|
||||
<p><span>Códigos de respaldo</span></p>
|
||||
<p>Al activar 2FA, se te proporcionarán códigos de respaldo únicos.</p>
|
||||
<p>Estos códigos son útiles en caso de que pierdas acceso a tu aplicación de autenticación.</p>
|
||||
<p>Cada código de respaldo puede usarse una sola vez.</p>
|
||||
<p>Guárdalos en un lugar seguro, ya que te permitirán acceder a tu cuenta en el sitio web si no puedes usar la aplicación de autenticación.</p>
|
||||
<br />
|
||||
<p>Si aún no tienes Token de seguridad, puedes solicitarlo <Link href="/security-token" target="_blank">aquí</Link>.</p>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>NOTA</legend>
|
||||
<div className="separate2">
|
||||
<p>Utiliza una aplicación de autenticación para iniciar sesión en el juego una vez que lo tengas activado.</p>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<TwoFactorLogin enabled={enabled} />
|
||||
</div>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import QRCode from 'qrcode'
|
||||
import { getSession } from '@/lib/session'
|
||||
import { authenticate } from '@/lib/auth'
|
||||
import { checkSecurityToken } from '@/lib/security-token'
|
||||
import { getRealmName } from '@/lib/realm'
|
||||
import {
|
||||
base32Encode,
|
||||
otpauthUrl,
|
||||
generateSecret,
|
||||
validateToken,
|
||||
is2faEnabled,
|
||||
setAccountTotpSecret,
|
||||
clearAccountTotpSecret,
|
||||
getAccountTotpSecret,
|
||||
} from '@/lib/two-factor'
|
||||
|
||||
// "15#1" -> "WOW1" (índice tras '#'); si no hay índice, usa el username tal cual.
|
||||
function wowLabel(username: string): string {
|
||||
const idx = username.split('#')[1]
|
||||
return idx ? `WOW${idx}` : username
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const session = await getSession()
|
||||
if (!session.bnetId || !session.accountId || !session.bnetEmail || !session.username) {
|
||||
return Response.json({ success: false, message: 'Tu sesión ha expirado. Inicia sesión de nuevo.' }, { status: 401 })
|
||||
}
|
||||
const accountId = session.accountId
|
||||
|
||||
let body: Record<string, unknown> = {}
|
||||
try {
|
||||
body = await request.json()
|
||||
} catch {
|
||||
return Response.json({ success: false, message: 'Solicitud no válida.' }, { status: 400 })
|
||||
}
|
||||
const action = String(body.action ?? '')
|
||||
|
||||
/* ------------------------------- Activar 2FA ------------------------------ */
|
||||
if (action === 'activate') {
|
||||
if (await is2faEnabled(accountId)) {
|
||||
return Response.json({ success: false, message: 'La verificación en 2 pasos ya está activada en esta cuenta.' })
|
||||
}
|
||||
const password = String(body.password ?? '')
|
||||
const securityToken = String(body.securityToken ?? '')
|
||||
if (!password || !securityToken) {
|
||||
return Response.json({ success: false, message: 'Introduce tu contraseña y tu token de seguridad.' })
|
||||
}
|
||||
const bnet = await authenticate(session.bnetEmail, password)
|
||||
if (!bnet) return Response.json({ success: false, message: 'Contraseña incorrecta.' })
|
||||
if (!(await checkSecurityToken(accountId, securityToken))) {
|
||||
return Response.json({ success: false, message: 'Token de seguridad incorrecto. Puedes solicitar uno nuevo.' })
|
||||
}
|
||||
|
||||
const secret = generateSecret()
|
||||
const secretBase32 = base32Encode(secret)
|
||||
const realm = await getRealmName()
|
||||
const url = otpauthUrl(realm, wowLabel(session.username), secretBase32)
|
||||
const qrCodeUrl = await QRCode.toDataURL(url, { margin: 1, width: 220 })
|
||||
|
||||
// Guardamos el secreto como PENDIENTE (no se escribe en la cuenta hasta que
|
||||
// el usuario confirme un código válido; así se evita cualquier bloqueo).
|
||||
session.pending2fa = secret.toString('hex')
|
||||
session.pending2faFor = accountId
|
||||
await session.save()
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
message: 'Escanea el código QR con tu aplicación de autenticación y confirma un código para activar 2FA.',
|
||||
qrCodeUrl,
|
||||
secretKey: secretBase32,
|
||||
})
|
||||
}
|
||||
|
||||
/* ------------------------------- Verificar -------------------------------- */
|
||||
if (action === 'verify') {
|
||||
if (!session.pending2fa || session.pending2faFor !== accountId) {
|
||||
return Response.json({ success: false, message: 'No hay una activación pendiente. Vuelve a empezar.' })
|
||||
}
|
||||
const code = String(body.code ?? '').replace(/\D/g, '')
|
||||
if (code.length !== 6) return Response.json({ success: false, message: 'Introduce el código de 6 dígitos.' })
|
||||
|
||||
const secret = Buffer.from(session.pending2fa, 'hex')
|
||||
if (!validateToken(secret, Number(code))) {
|
||||
return Response.json({ success: false, message: 'Código incorrecto. Comprueba la hora de tu dispositivo e inténtalo de nuevo.' })
|
||||
}
|
||||
|
||||
await setAccountTotpSecret(accountId, secret)
|
||||
session.pending2fa = undefined
|
||||
session.pending2faFor = undefined
|
||||
await session.save()
|
||||
|
||||
return Response.json({ success: true, message: '¡Verificación en 2 pasos activada! A partir de ahora se pedirá el código al iniciar sesión en el juego.' })
|
||||
}
|
||||
|
||||
/* ------------------------------- Desactivar ------------------------------- */
|
||||
if (action === 'disable') {
|
||||
const secret = await getAccountTotpSecret(accountId)
|
||||
if (!secret) return Response.json({ success: false, message: 'La verificación en 2 pasos no está activada.' })
|
||||
const code = String(body.code ?? '').replace(/\D/g, '')
|
||||
if (code.length !== 6) return Response.json({ success: false, message: 'Introduce el código de 6 dígitos de tu aplicación.' })
|
||||
if (!validateToken(secret, Number(code))) {
|
||||
return Response.json({ success: false, message: 'Código incorrecto. No se ha desactivado 2FA.' })
|
||||
}
|
||||
await clearAccountTotpSecret(accountId)
|
||||
return Response.json({ success: true, message: 'Verificación en 2 pasos desactivada.' })
|
||||
}
|
||||
|
||||
return Response.json({ success: false, message: 'Acción no válida.' }, { status: 400 })
|
||||
}
|
||||
@@ -448,3 +448,27 @@ textarea:focus {
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* ==== Verificación en 2 pasos (/security-2falogin) ==== */
|
||||
.twofa-login-info { display: block; }
|
||||
.twofa-login-preview {
|
||||
float: right;
|
||||
max-width: 370px;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 8px;
|
||||
height: auto;
|
||||
border: 2px solid #352e2b;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.google-play-logo { height: 40px; width: 140px; vertical-align: middle; }
|
||||
.apple-store-logo { height: 40px; width: 120px; vertical-align: middle; }
|
||||
.toggle-password, .toggle-token { cursor: pointer; margin-left: -28px; color: #b1997f; transition: .3s; }
|
||||
.toggle-password:hover, .toggle-token:hover { color: #fff; }
|
||||
.copy-secret-container { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
|
||||
#secret-key { width: 240px; text-align: center; }
|
||||
.copy-btn { cursor: pointer; }
|
||||
#qr-code { display: block; margin: 0 auto; max-width: 220px; height: auto; background: #fff; padding: 8px; border-radius: 6px; }
|
||||
@media screen and (max-width: 1024px) {
|
||||
.twofa-login-info { display: flex; flex-direction: column-reverse; align-items: center; }
|
||||
.twofa-login-preview { float: none; display: block; clear: both; margin: 10px auto 8px auto; max-width: 90vw; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user