feat(backend): support OAuth 2.0 authorization (#11053)

* feat(backend): support OAuth 2.0 authorization

* secureRndstr fix

* nanndekowareta

* nanndekowareta2

* nanndekowareta3

* unref?

* refactor to not close fastify

* use microformats-parser

* Update OAuth2ProviderService.ts

* clarify the reason behind dns lookup

* refactor(backend): use @types/oauth2orize-pkce (#11350)

* refactor(backend): use @types/oauth2orize-pkce

* Update package.json

* Update pnpm-lock.yaml

---------

Co-authored-by: Kagami Sascha Rosylight <saschanaz@outlook.com>

---------

Co-authored-by: mtgto <hogerappa@gmail.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

packages/frontend/src/components/MkButton.vue

@@ -9,6 +9,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="el" class="_button"
 	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
 	:type="type"
+	:name="name"
+	:value="value"
 	@click="emit('click', $event)"
 	@mousedown="onMousedown"
 >
@@ -49,6 +51,8 @@ const props = defineProps<{
 	large?: boolean;
 	transparent?: boolean;
 	asLike?: boolean;
+	name?: string;
+	value?: string;
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/pages/oauth.vue

@@ -0,0 +1,67 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :contentMax="800">
+		<div v-if="$i">
+			<div v-if="permissions.length > 0">
+				<p v-if="name">{{ i18n.t('_auth.permission', { name }) }}</p>
+				<p v-else>{{ i18n.ts._auth.permissionAsk }}</p>
+				<ul>
+					<li v-for="p in permissions" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
+				</ul>
+			</div>
+			<div v-if="name">{{ i18n.t('_auth.shareAccess', { name }) }}</div>
+			<div v-else>{{ i18n.ts._auth.shareAccessAsk }}</div>
+			<form :class="$style.buttons" action="/oauth/decision" accept-charset="utf-8" method="post">
+				<input name="login_token" type="hidden" :value="$i.token"/>
+				<input name="transaction_id" type="hidden" :value="transactionIdMeta?.content"/>
+				<MkButton inline name="cancel" value="cancel">{{ i18n.ts.cancel }}</MkButton>
+				<MkButton inline primary>{{ i18n.ts.accept }}</MkButton>
+			</form>
+		</div>
+		<div v-else>
+			<p :class="$style.loginMessage">{{ i18n.ts._auth.pleaseLogin }}</p>
+			<MkSignin @login="onLogin"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import MkSignin from '@/components/MkSignin.vue';
+import MkButton from '@/components/MkButton.vue';
+import { $i, login } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const transactionIdMeta = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:transaction-id"]');
+if (transactionIdMeta) {
+	transactionIdMeta.remove();
+}
+
+const name = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-name"]')?.content;
+const permissions = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:scope"]')?.content.split(' ') ?? [];
+
+function onLogin(res): void {
+	login(res.i);
+}
+
+definePageMetadata({
+	title: 'OAuth',
+	icon: 'ti ti-apps',
+});
+</script>
+
+<style lang="scss" module>
+.buttons {
+	margin-top: 16px;
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.loginMessage {
+	text-align: center;
+	margin: 8px 0 24px;
+}
+</style>

packages/frontend/src/router.ts

@@ -263,6 +263,9 @@ export const routes = [{
 		icon: 'icon',
 		permission: 'permission',
 	},
+}, {
+	path: '/oauth/authorize',
+	component: page(() => import('./pages/oauth.vue')),
 }, {
 	path: '/tags/:tag',
 	component: page(() => import('./pages/tag.vue')),