wip

locales/index.d.ts

@@ -414,6 +414,7 @@ export interface Locale {
     "administrator": string;
     "token": string;
     "2fa": string;
+    "setupOf2fa": string;
     "totp": string;
     "totpDescription": string;
     "moderator": string;
@@ -1811,9 +1812,10 @@ export interface Locale {
         "step1": string;
         "step2": string;
         "step2Click": string;
-        "step2Url": string;
+        "step2Uri": string;
         "step3Title": string;
         "step3": string;
+        "setupCompleted": string;
         "step4": string;
         "securityKeyNotSupported": string;
         "registerTOTPBeforeKey": string;
@@ -1829,6 +1831,9 @@ export interface Locale {
         "renewTOTPConfirm": string;
         "renewTOTPOk": string;
         "renewTOTPCancel": string;
+        "checkBackupCodesBeforeCloseThisWizard": string;
+        "backupCodes": string;
+        "backupCodesDescription": string;
     };
     "_permissions": {
         "read:account": string;

locales/ja-JP.yml

@@ -411,6 +411,7 @@ aboutMisskey: "Misskeyについて"
 administrator: "管理者"
 token: "確認コード"
 2fa: "二要素認証"
+setupOf2fa: "二要素認証のセットアップ"
 totp: "認証アプリ"
 totpDescription: "認証アプリを使ってワンタイムパスワードを入力"
 moderator: "モデレーター"
@@ -1729,10 +1730,11 @@ _2fa:
   step1: "まず、{a}や{b}などの認証アプリをお使いのデバイスにインストールします。"
   step2: "次に、表示されているQRコードをアプリでスキャンします。"
   step2Click: "QRコードをクリックすると、お使いの端末にインストールされている認証アプリやキーリングに登録できます。"
-  step2Url: "デスクトップアプリでは次のURIを入力します:"
+  step2Uri: "デスクトップアプリを使用する場合は次のURIを入力します"
   step3Title: "確認コードを入力"
-  step3: "アプリに表示されている確認コード（トークン）を入力して完了です。"
+  step3: "アプリに表示されている確認コード（トークン）を入力します。"
-  step4: "これからログインするときも、同じように確認コードを入力します。"
+  setupCompleted: "設定が完了しました"
+  step4: "これからログインするときも、同じようにコードを入力します。"
   securityKeyNotSupported: "お使いのブラウザはセキュリティキーに対応していません。"
   registerTOTPBeforeKey: "セキュリティキー・パスキーを登録するには、まず認証アプリの設定を行なってください。"
   securityKeyInfo: "FIDO2をサポートするハードウェアセキュリティキー、端末の生体認証やPINロック、パスキーといった、WebAuthn由来の鍵を登録します。"
@@ -1744,9 +1746,12 @@ _2fa:
   removeKeyConfirm: "{name}を削除しますか？"
   whyTOTPOnlyRenew: "セキュリティキーが登録されている場合、認証アプリの設定は解除できません。"
   renewTOTP: "認証アプリを再設定"
-  renewTOTPConfirm: "今までの認証アプリの確認コードは使用できなくなります"
+  renewTOTPConfirm: "今までの認証アプリの確認コードおよびバックアップコードは使用できなくなります"
   renewTOTPOk: "再設定する"
   renewTOTPCancel: "やめておく"
+  checkBackupCodesBeforeCloseThisWizard: "このウィザードを閉じる前に、以下のバックアップコードを確認してください。"
+  backupCodes: "バックアップコード"
+  backupCodesDescription: "認証アプリが使用できなくなった場合、以下のバックアップコードを使ってアカウントにアクセスできます。これらのコードは必ず安全な場所に保管してください。各コードは一回だけ使用できます。"
 
 _permissions:
   "read:account": "アカウントの情報を見る"

packages/backend/migration/1690569881926-user-2fa-backup-codes.js

@@ -0,0 +1,11 @@
+export class User2faBackupCodes1690569881926 {
+	name = 'User2faBackupCodes1690569881926'
+
+	async up(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "user_profile" ADD "twoFactorBackupSecret" character varying array`);
+	}
+
+	async down(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "user_profile" DROP COLUMN "twoFactorBackupSecret"`);
+	}
+}

packages/backend/src/models/entities/UserProfile.ts

@@ -101,6 +101,11 @@ export class MiUserProfile {
 	})
 	public twoFactorSecret: string | null;
 
+	@Column('varchar', {
+		nullable: true, array: true,
+	})
+	public twoFactorBackupSecret: string[] | null;
+
 	@Column('boolean', {
 		default: false,
 	})

packages/backend/src/server/api/SigninApiService.ts

@@ -160,6 +160,13 @@ export class SigninApiService {
 				});
 			}
 
+			if (profile.twoFactorBackupSecret?.includes(token)) {
+				await this.userProfilesRepository.update({ userId: profile.userId }, {
+					twoFactorBackupSecret: profile.twoFactorBackupSecret.filter((secret) => secret !== token),
+				});
+				return this.signinService.signin(request, reply, user);
+			}
+
 			const delta = OTPAuth.TOTP.validate({
 				secret: OTPAuth.Secret.fromBase32(profile.twoFactorSecret!),
 				digits: 6,

packages/backend/src/server/api/endpoints/i/2fa/done.ts

@@ -54,8 +54,13 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				throw new Error('not verified');
 			}
 
+			const backupCodes = Array.from({ length: 20 }, () => {
+				return new OTPAuth.Secret().base32;
+			});
+
 			await this.userProfilesRepository.update(me.id, {
 				twoFactorSecret: profile.twoFactorTempSecret,
+				twoFactorBackupSecret: backupCodes,
 				twoFactorEnabled: true,
 			});
 
@@ -64,6 +69,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				detail: true,
 				includeSecrets: true,
 			}));
+
+			return {
+				backupCodes: backupCodes,
+			};
 		});
 	}
 }

packages/backend/src/server/api/endpoints/i/2fa/unregister.ts

@@ -46,6 +46,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 
 			await this.userProfilesRepository.update(me.id, {
 				twoFactorSecret: null,
+				twoFactorBackupSecret: null,
 				twoFactorEnabled: false,
 				usePasswordLessLogin: false,
 			});

packages/backend/test/e2e/2fa.ts

@@ -191,7 +191,7 @@ describe('2要素認証', () => {
 		const doneResponse = await api('/i/2fa/done', {
 			token: otpToken(registerResponse.body.secret),
 		}, alice);
-		assert.strictEqual(doneResponse.status, 204);
+		assert.strictEqual(doneResponse.status, 200);
 
 		const usersShowResponse = await api('/users/show', {
 			username,
@@ -216,7 +216,7 @@ describe('2要素認証', () => {
 		const doneResponse = await api('/i/2fa/done', {
 			token: otpToken(registerResponse.body.secret),
 		}, alice);
-		assert.strictEqual(doneResponse.status, 204);
+		assert.strictEqual(doneResponse.status, 200);
 
 		const registerKeyResponse = await api('/i/2fa/register-key', {
 			password,
@@ -272,7 +272,7 @@ describe('2要素認証', () => {
 		const doneResponse = await api('/i/2fa/done', {
 			token: otpToken(registerResponse.body.secret),
 		}, alice);
-		assert.strictEqual(doneResponse.status, 204);
+		assert.strictEqual(doneResponse.status, 200);
 
 		const registerKeyResponse = await api('/i/2fa/register-key', {
 			password,
@@ -329,7 +329,7 @@ describe('2要素認証', () => {
 		const doneResponse = await api('/i/2fa/done', {
 			token: otpToken(registerResponse.body.secret),
 		}, alice);
-		assert.strictEqual(doneResponse.status, 204);
+		assert.strictEqual(doneResponse.status, 200);
 
 		const registerKeyResponse = await api('/i/2fa/register-key', {
 			password,
@@ -371,7 +371,7 @@ describe('2要素認証', () => {
 		const doneResponse = await api('/i/2fa/done', {
 			token: otpToken(registerResponse.body.secret),
 		}, alice);
-		assert.strictEqual(doneResponse.status, 204);
+		assert.strictEqual(doneResponse.status, 200);
 
 		const registerKeyResponse = await api('/i/2fa/register-key', {
 			password,
@@ -423,7 +423,7 @@ describe('2要素認証', () => {
 		const doneResponse = await api('/i/2fa/done', {
 			token: otpToken(registerResponse.body.secret),
 		}, alice);
-		assert.strictEqual(doneResponse.status, 204);
+		assert.strictEqual(doneResponse.status, 200);
 
 		const usersShowResponse = await api('/users/show', {
 			username,

packages/frontend/src/components/MkSignin.vue

@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.password }}</template>
 					<template #prefix><i class="ti ti-lock"></i></template>
 				</MkInput>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="one-time-code" :spellcheck="false" required>
+				<MkInput v-model="token" type="text" pattern="^([0-9]{6}|[A-Z0-9]{32})$" autocomplete="one-time-code" :spellcheck="false" required>
 					<template #label>{{ i18n.ts.token }}</template>
 					<template #prefix><i class="ti ti-123"></i></template>
 				</MkInput>

packages/frontend/src/pages/scratchpad.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkSpacer :contentMax="800">
 	<div :class="$style.root">
 		<div :class="$style.editor" class="_panel">
-			<PrismEditor v-model="code" class="_code code" :highlight="highlighter" :lineNumbers="false"/>
+			<PrismEditor v-model="code" class="_monospace" :class="$style.code" :highlight="highlighter" :lineNumbers="false"/>
 			<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
 		</div>
 
@@ -175,6 +175,14 @@ definePageMetadata({
 	position: relative;
 }
 
+.code {
+	background: #2d2d2d;
+	color: #ccc;
+	font-size: 14px;
+	line-height: 1.5;
+	padding: 5px;
+}
+
 .ui {
 	padding: 32px;
 }

packages/frontend/src/pages/settings/2fa.qrdialog.vue

@@ -4,45 +4,109 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal
+<MkModalWindow
-	ref="dialogEl"
+	ref="dialog"
-	:preferType="'dialog'"
+	:width="500"
-	:zPriority="'low'"
+	:height="550"
-	@click="cancel"
 	@close="cancel"
 	@closed="emit('closed')"
 >
-	<div :class="$style.root" class="_gaps_m">
+	<template #header>{{ i18n.ts.setupOf2fa }}</template>
-		<I18n :src="i18n.ts._2fa.step1" tag="div">
+
-			<template #a>
+	<div style="overflow-x: clip;">
-				<a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a>
+		<Transition
+			mode="out-in"
+			:enterActiveClass="$style.transition_x_enterActive"
+			:leaveActiveClass="$style.transition_x_leaveActive"
+			:enterFromClass="$style.transition_x_enterFrom"
+			:leaveToClass="$style.transition_x_leaveTo"
+		>
+			<template v-if="page === 0">
+				<div style="height: 100cqh; overflow: auto; text-align: center;">
+					<MkSpacer :marginMin="20" :marginMax="28">
+						<div class="_gaps">
+							<I18n :src="i18n.ts._2fa.step1" tag="div">
+								<template #a>
+									<a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a>
+								</template>
+								<template #b>
+									<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
+								</template>
+							</I18n>
+							<div>
+								{{ i18n.ts._2fa.step2 }}<br>
+								{{ i18n.ts._2fa.step2Click }}
+							</div>
+							<a :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
+							<MkKeyValue :copy="twoFactorData.url">
+								<template #key>{{ i18n.ts._2fa.step2Uri }}</template>
+								<template #value>{{ twoFactorData.url }}</template>
+							</MkKeyValue>
+						</div>
+						<div class="_buttonsCenter" style="margin-top: 16px;">
+							<MkButton rounded @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+							<MkButton primary rounded gradate @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+						</div>
+					</MkSpacer>
+				</div>
 			</template>
-			<template #b>
+			<template v-else-if="page === 1">
-				<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
+				<div style="height: 100cqh; overflow: auto;">
+					<MkSpacer :marginMin="20" :marginMax="28">
+						<div class="_gaps">
+							<div>{{ i18n.ts._2fa.step3Title }}</div>
+							<MkInput v-model="token" autocomplete="one-time-code" type="number"></MkInput>
+							<div>{{ i18n.ts._2fa.step3 }}</div>
+						</div>
+						<div class="_buttonsCenter" style="margin-top: 16px;">
+							<MkButton rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
+							<MkButton primary rounded gradate @click="tokenDone">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
+						</div>
+					</MkSpacer>
+				</div>
 			</template>
-		</I18n>
+			<template v-else-if="page === 2">
-		<div>
+				<div style="height: 100cqh; overflow: auto;">
-			{{ i18n.ts._2fa.step2 }}<br>
+					<MkSpacer :marginMin="20" :marginMax="28">
-			{{ i18n.ts._2fa.step2Click }}
+						<div class="_gaps">
-		</div>
+							<div style="text-align: center;">{{ i18n.ts._2fa.setupCompleted }}🎉</div>
-		<a :href="twoFactorData.url"><img :class="$style.qr" :src="twoFactorData.qr"></a>
+							<div style="text-align: center;">{{ i18n.ts._2fa.step4 }}</div>
-		<MkKeyValue :copy="twoFactorData.url">
+							<div style="text-align: center; font-weight: bold;">{{ i18n.ts._2fa.checkBackupCodesBeforeCloseThisWizard }}</div>
-			<template #key>{{ i18n.ts._2fa.step2Url }}</template>
+
-			<template #value>{{ twoFactorData.url }}</template>
+							<MkFolder :defaultOpen="true">
-		</MkKeyValue>
+								<template #icon><i class="ti ti-key"></i></template>
-		<div class="_buttons">
+								<template #label>{{ i18n.ts._2fa.backupCodes }}</template>
-			<MkButton primary @click="ok">{{ i18n.ts.next }}</MkButton>
+
-			<MkButton @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+								<div class="_gaps">
-		</div>
+									<MkInfo warn>{{ i18n.ts._2fa.backupCodesDescription }}</MkInfo>
+
+									<div v-for="code in backupCodes" :key="code" class="_gaps_s">
+										<div class="_monospace">{{ code }}</div>
+									</div>
+								</div>
+							</MkFolder>
+						</div>
+						<div class="_buttonsCenter" style="margin-top: 16px;">
+							<MkButton primary rounded gradate @click="allDone">{{ i18n.ts.done }}</MkButton>
+						</div>
+					</MkSpacer>
+				</div>
+			</template>
+		</Transition>
 	</div>
-</MkModal>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
+import { shallowRef, ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
-import MkModal from '@/components/MkModal.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkInput from '@/components/MkInput.vue';
 import { i18n } from '@/i18n';
+import * as os from '@/os';
+import MkFolder from '@/components/MkFolder.vue';
+import MkInfo from '@/components/MkInfo.vue';
 
 defineProps<{
 	twoFactorData: {
@@ -52,36 +116,49 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'ok'): void;
-	(ev: 'cancel'): void;
 	(ev: 'closed'): void;
 }>();
 
-const cancel = () => {
+const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
-	emit('cancel');
+const page = ref(0);
-	emit('closed');
+const token = ref<string | number | null>(null);
-};
+const backupCodes = ref<string[]>();
 
-const ok = () => {
+function cancel() {
-	emit('ok');
+	dialog.value.close();
-	emit('closed');
+}
-};
+
+async function tokenDone() {
+	const res = await os.apiWithDialog('i/2fa/done', {
+		token: token.value.toString(),
+	});
+
+	backupCodes.value = res.backupCodes;
+
+	page.value++;
+}
+
+function allDone() {
+	dialog.value.close();
+}
 </script>
 
 <style lang="scss" module>
-.root {
+.transition_x_enterActive,
-	position: relative;
+.transition_x_leaveActive {
-	margin: auto;
+	transition: opacity 0.3s cubic-bezier(0,0,.35,1), transform 0.3s cubic-bezier(0,0,.35,1);
-	padding: 32px;
+}
-	min-width: 320px;
+.transition_x_enterFrom {
-	max-width: calc(100svw - 64px);
+	opacity: 0;
-	box-sizing: border-box;
+	transform: translateX(50px);
-	background: var(--panel);
+}
-	border-radius: var(--radius);
+.transition_x_leaveTo {
+	opacity: 0;
+	transform: translateX(-50px);
 }
 
 .qr {
-    width: 20em;
+	width: 200px;
-    max-width: 100%;
+	max-width: 100%;
 }
 </style>

packages/frontend/src/pages/settings/2fa.vue

@@ -12,16 +12,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template #icon><i class="ti ti-shield-lock"></i></template>
 			<template #label>{{ i18n.ts.totp }}</template>
 			<template #caption>{{ i18n.ts.totpDescription }}</template>
+
 			<div v-if="$i.twoFactorEnabled" class="_gaps_s">
 				<div v-text="i18n.ts._2fa.alreadyRegistered"/>
 				<template v-if="$i.securityKeysList.length > 0">
 					<MkButton @click="renewTOTP">{{ i18n.ts._2fa.renewTOTP }}</MkButton>
 					<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
 				</template>
-				<MkButton v-else @click="unregisterTOTP">{{ i18n.ts.unregister }}</MkButton>
+				<MkButton v-else danger @click="unregisterTOTP">{{ i18n.ts.unregister }}</MkButton>
 			</div>
 
-			<MkButton v-else-if="!twoFactorData && !$i.twoFactorEnabled" @click="registerTOTP">{{ i18n.ts._2fa.registerTOTP }}</MkButton>
+			<MkButton v-else-if="!$i.twoFactorEnabled" primary gradate @click="registerTOTP">{{ i18n.ts._2fa.registerTOTP }}</MkButton>
 		</MkFolder>
 
 		<MkFolder>
@@ -85,7 +86,6 @@ withDefaults(defineProps<{
 	first: false,
 });
 
-const twoFactorData = ref<any>(null);
 const supportsCredentials = ref(!!navigator.credentials);
 const usePasswordLessLogin = $computed(() => $i!.usePasswordLessLogin);
 
@@ -102,31 +102,9 @@ async function registerTOTP() {
 		password: password.result,
 	});
 
-	const qrdialog = await new Promise<boolean>(res => {
+	os.popup(defineAsyncComponent(() => import('./2fa.qrdialog.vue')), {
-		os.popup(defineAsyncComponent(() => import('./2fa.qrdialog.vue')), {
+		twoFactorData,
-			twoFactorData,
+	}, {}, 'closed');
-		}, {
-			'ok': () => res(true),
-			'cancel': () => res(false),
-		}, 'closed');
-	});
-	if (!qrdialog) return;
-
-	const token = await os.inputNumber({
-		title: i18n.ts._2fa.step3Title,
-		text: i18n.ts._2fa.step3,
-		autocomplete: 'one-time-code',
-	});
-	if (token.canceled) return;
-
-	await os.apiWithDialog('i/2fa/done', {
-		token: token.result.toString(),
-	});
-
-	await os.alert({
-		type: 'success',
-		text: i18n.ts._2fa.step4,
-	});
 }
 
 function unregisterTOTP() {

packages/frontend/src/style.scss

@@ -400,15 +400,6 @@ hr {
 	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important;
 }
 
-._code {
-	@extend ._monospace;
-	background: #2d2d2d;
-	color: #ccc;
-	font-size: 14px;
-	line-height: 1.5;
-	padding: 5px;
-}
-
 .prism-editor__textarea:focus {
 	outline: none;
 }