feat: basic oauth
This commit is contained in:
parent
72b13f5265
commit
7ab17001f0
12
components/account/AccountMe.client.vue
Normal file
12
components/account/AccountMe.client.vue
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const { currentUser } = useAppStore()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div p4>
|
||||||
|
<!-- TODO: multiple account switcher -->
|
||||||
|
<AccountInfo v-if="currentUser?.account" :account="currentUser.account" />
|
||||||
|
<!-- TODO: dialog for select server -->
|
||||||
|
<a v-else href="/api/mas.to/login" px2 py1 bg-teal6 text-white m2 rounded>Login</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -1,5 +1,10 @@
|
||||||
import type { MastoClient } from 'masto'
|
import type { MastoClient } from 'masto'
|
||||||
|
import type { AppStore } from '~~/plugins/store.client'
|
||||||
|
|
||||||
export function useMasto() {
|
export function useMasto() {
|
||||||
return inject('masto') as Promise<MastoClient>
|
return inject('masto') as Promise<MastoClient>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function useAppStore() {
|
||||||
|
return inject('app-store') as AppStore
|
||||||
|
}
|
||||||
|
|
11
composables/cookies.ts
Normal file
11
composables/cookies.ts
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import { DEFAULT_SERVER } from '~/constants'
|
||||||
|
|
||||||
|
export function useAppCookies() {
|
||||||
|
const server = useCookie('nuxtodon-server', { default: () => DEFAULT_SERVER })
|
||||||
|
const token = useCookie('nuxtodon-token')
|
||||||
|
|
||||||
|
return {
|
||||||
|
server,
|
||||||
|
token,
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,3 +4,4 @@ export const HOST_DOMAIN = process.dev
|
||||||
? 'http://localhost:3000'
|
? 'http://localhost:3000'
|
||||||
: 'https://nuxtodon.netlify.app'
|
: 'https://nuxtodon.netlify.app'
|
||||||
|
|
||||||
|
export const DEFAULT_SERVER = 'mas.to'
|
||||||
|
|
|
@ -10,7 +10,9 @@
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<slot name="right" />
|
<slot name="right">
|
||||||
|
<AccountMe />
|
||||||
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,12 +7,13 @@
|
||||||
"dev": "nuxi dev",
|
"dev": "nuxi dev",
|
||||||
"start": "node .output/server/index.mjs",
|
"start": "node .output/server/index.mjs",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
|
"register-apps": "esno ./scripts/registerApps.ts",
|
||||||
"postinstall": "nuxi prepare",
|
"postinstall": "nuxi prepare",
|
||||||
"generate": "nuxi generate"
|
"generate": "nuxi generate"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antfu/eslint-config": "^0.30.1",
|
"@antfu/eslint-config": "^0.30.1",
|
||||||
"@iconify-json/carbon": "^1.1.9",
|
"@iconify-json/carbon": "^1.1.10",
|
||||||
"@iconify-json/logos": "^1.1.18",
|
"@iconify-json/logos": "^1.1.18",
|
||||||
"@iconify-json/ri": "^1.1.3",
|
"@iconify-json/ri": "^1.1.3",
|
||||||
"@iconify-json/twemoji": "^1.1.5",
|
"@iconify-json/twemoji": "^1.1.5",
|
||||||
|
|
|
@ -1,54 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { login } from 'masto'
|
|
||||||
import { DEFAULT_SERVER } from '~/plugins/masto'
|
|
||||||
|
|
||||||
const server = useCookie('nuxtodon-server')
|
|
||||||
const token = useCookie('nuxtodon-token')
|
|
||||||
|
|
||||||
async function oauth() {
|
|
||||||
const client = await login({
|
|
||||||
url: `https://${server.value || DEFAULT_SERVER}`,
|
|
||||||
})
|
|
||||||
const redirectUri = `${location.origin}/api/${server.value || DEFAULT_SERVER}/oauth`
|
|
||||||
const app = await client.apps.create({
|
|
||||||
clientName: 'Nuxtodon',
|
|
||||||
redirectUris: redirectUri,
|
|
||||||
scopes: 'read write follow push',
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log({ app })
|
|
||||||
|
|
||||||
const url = `https://${server.value || DEFAULT_SERVER}/oauth/authorize
|
|
||||||
?client_id=${app.clientId}
|
|
||||||
&scope=read+write+follow+push
|
|
||||||
&redirect_uri=${encodeURIComponent(redirectUri)}
|
|
||||||
&response_type=code`.replace(/\n/g, '')
|
|
||||||
|
|
||||||
const a = document.createElement('a')
|
|
||||||
a.href = url
|
|
||||||
a.target = '_blank'
|
|
||||||
a.click()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div p4>
|
|
||||||
<button @click="oauth()">
|
|
||||||
OAuth
|
|
||||||
</button>
|
|
||||||
<input
|
|
||||||
v-model="server"
|
|
||||||
placeholder="Server URL"
|
|
||||||
bg-transparent text-current
|
|
||||||
border="~ border" p="x2 y1" w-full
|
|
||||||
outline-none
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
v-model="token"
|
|
||||||
placeholder="Token"
|
|
||||||
bg-transparent text-current
|
|
||||||
border="~ border" p="x2 y1" w-full
|
|
||||||
outline-none
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
17
pages/login/callback.vue
Normal file
17
pages/login/callback.vue
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const { query } = useRoute()
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const { login } = useAppStore()
|
||||||
|
await login(query as any)
|
||||||
|
await nextTick()
|
||||||
|
await nextTick()
|
||||||
|
location.pathname = '/'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
Login...
|
||||||
|
</div>
|
||||||
|
</template>
|
32
pages/login/index.vue
Normal file
32
pages/login/index.vue
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
const { server, token } = useAppCookies()
|
||||||
|
|
||||||
|
async function oauth() {
|
||||||
|
const a = document.createElement('a')
|
||||||
|
a.href = `/api/${server.value}/login`
|
||||||
|
a.target = '_blank'
|
||||||
|
a.click()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div p4>
|
||||||
|
<button @click="oauth()">
|
||||||
|
OAuth
|
||||||
|
</button>
|
||||||
|
<input
|
||||||
|
v-model="server"
|
||||||
|
placeholder="Server URL"
|
||||||
|
bg-transparent text-current
|
||||||
|
border="~ border" p="x2 y1" w-full
|
||||||
|
outline-none
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-model="token"
|
||||||
|
placeholder="Token"
|
||||||
|
bg-transparent text-current
|
||||||
|
border="~ border" p="x2 y1" w-full
|
||||||
|
outline-none
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -1,19 +1,11 @@
|
||||||
import { login } from 'masto'
|
import { login } from 'masto'
|
||||||
|
|
||||||
export const DEFAULT_SERVER = 'mas.to'
|
|
||||||
|
|
||||||
export default defineNuxtPlugin((nuxt) => {
|
export default defineNuxtPlugin((nuxt) => {
|
||||||
const server = useCookie('nuxtodon-server')
|
const { server, token } = useAppCookies()
|
||||||
const token = useCookie('nuxtodon-token')
|
|
||||||
|
|
||||||
const masto = login({
|
const masto = login({
|
||||||
url: `https://${server.value || DEFAULT_SERVER}`,
|
url: `https://${server.value}`,
|
||||||
accessToken: token.value,
|
accessToken: token.value,
|
||||||
})
|
})
|
||||||
nuxt.vueApp.provide('masto', masto)
|
nuxt.vueApp.provide('masto', masto)
|
||||||
|
|
||||||
// Reload the page when the token changes
|
|
||||||
watch(token, () => {
|
|
||||||
location.reload()
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
47
plugins/store.client.ts
Normal file
47
plugins/store.client.ts
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
import { login as loginMasto } from 'masto'
|
||||||
|
import type { UserLogin } from '~/types'
|
||||||
|
|
||||||
|
function createStore() {
|
||||||
|
const { server, token } = useAppCookies()
|
||||||
|
const accounts = useLocalStorage<UserLogin[]>('nuxtodon-accounts', [], { deep: true })
|
||||||
|
const currentIndex = useLocalStorage<number>('nuxtodon-current-user', -1)
|
||||||
|
const currentUser = computed<UserLogin | undefined>(() => accounts.value[currentIndex.value])
|
||||||
|
|
||||||
|
async function login(user: UserLogin) {
|
||||||
|
const existing = accounts.value.findIndex(u => u.server === user.server && u.token === user.token)
|
||||||
|
if (existing !== -1) {
|
||||||
|
if (currentIndex.value === existing)
|
||||||
|
return null
|
||||||
|
currentIndex.value = existing
|
||||||
|
server.value = user.server
|
||||||
|
token.value = user.token
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
const masto = await loginMasto({
|
||||||
|
url: `https://${user.server}`,
|
||||||
|
accessToken: user.token,
|
||||||
|
})
|
||||||
|
const me = await masto.accounts.verifyCredentials()
|
||||||
|
user.account = me
|
||||||
|
|
||||||
|
accounts.value.push(user)
|
||||||
|
currentIndex.value = accounts.value.length
|
||||||
|
server.value = user.server
|
||||||
|
token.value = user.token
|
||||||
|
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
currentUser,
|
||||||
|
accounts,
|
||||||
|
login,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AppStore = ReturnType<typeof createStore>
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxt) => {
|
||||||
|
nuxt.vueApp.provide('app-store', createStore())
|
||||||
|
})
|
|
@ -2,7 +2,7 @@ lockfileVersion: 5.4
|
||||||
|
|
||||||
specifiers:
|
specifiers:
|
||||||
'@antfu/eslint-config': ^0.30.1
|
'@antfu/eslint-config': ^0.30.1
|
||||||
'@iconify-json/carbon': ^1.1.9
|
'@iconify-json/carbon': ^1.1.10
|
||||||
'@iconify-json/logos': ^1.1.18
|
'@iconify-json/logos': ^1.1.18
|
||||||
'@iconify-json/ri': ^1.1.3
|
'@iconify-json/ri': ^1.1.3
|
||||||
'@iconify-json/twemoji': ^1.1.5
|
'@iconify-json/twemoji': ^1.1.5
|
||||||
|
@ -26,7 +26,7 @@ specifiers:
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@antfu/eslint-config': 0.30.1_rmayb2veg2btbq6mbmnyivgasy
|
'@antfu/eslint-config': 0.30.1_rmayb2veg2btbq6mbmnyivgasy
|
||||||
'@iconify-json/carbon': 1.1.9
|
'@iconify-json/carbon': 1.1.10
|
||||||
'@iconify-json/logos': 1.1.18
|
'@iconify-json/logos': 1.1.18
|
||||||
'@iconify-json/ri': 1.1.3
|
'@iconify-json/ri': 1.1.3
|
||||||
'@iconify-json/twemoji': 1.1.5
|
'@iconify-json/twemoji': 1.1.5
|
||||||
|
@ -632,8 +632,8 @@ packages:
|
||||||
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/@iconify-json/carbon/1.1.9:
|
/@iconify-json/carbon/1.1.10:
|
||||||
resolution: {integrity: sha512-O3geRhhnE9dDDC4oT6qwBs7sdc37R9UqftiG7BP8YVDw8OcXv8i95J0ZEkIfdOXFj1Wb6kC/Uu/6VTlAqotVXg==}
|
resolution: {integrity: sha512-k3/28wk+2CklUPdKBXWhPHQxquvLGiPYk1s6UWdQYR3YtneHRMuCp+0zc9yNjHYBzoSylMIECO0UPH+SdccguA==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@iconify/types': 2.0.0
|
'@iconify/types': 2.0.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import fs from 'fs-extra'
|
import fs from 'fs-extra'
|
||||||
import type { Client } from 'masto'
|
|
||||||
import { $fetch } from 'ohmyfetch'
|
import { $fetch } from 'ohmyfetch'
|
||||||
import { APP_NAME } from '~~/constants'
|
import { APP_NAME } from '~/constants'
|
||||||
|
import type { AppInfo } from '~/types'
|
||||||
|
|
||||||
const KNOWN_SERVERS = [
|
const KNOWN_SERVERS = [
|
||||||
'mastodon.social',
|
'mastodon.social',
|
||||||
|
@ -9,33 +9,38 @@ const KNOWN_SERVERS = [
|
||||||
'fosstodon.org',
|
'fosstodon.org',
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const KNOWN_DOMAINS = [
|
||||||
|
'http://localhost:3000',
|
||||||
|
'https://nuxtodon.netlify.app',
|
||||||
|
]
|
||||||
|
|
||||||
const filename = 'public/registered-apps.json'
|
const filename = 'public/registered-apps.json'
|
||||||
|
|
||||||
let registeredApps: Record<string, Client> = {}
|
let registeredApps: Record<string, AppInfo> = {}
|
||||||
|
|
||||||
if (fs.existsSync(filename))
|
if (fs.existsSync(filename))
|
||||||
registeredApps = await fs.readJSON(filename)
|
registeredApps = await fs.readJSON(filename)
|
||||||
|
|
||||||
for (const server of KNOWN_SERVERS) {
|
for (const server of KNOWN_SERVERS) {
|
||||||
if (registeredApps[server])
|
const redirect_uris = [
|
||||||
continue
|
'urn:ietf:wg:oauth:2.0:oob',
|
||||||
|
...KNOWN_DOMAINS.map(d => `${d}/api/${server}/oauth`),
|
||||||
|
].join('\n')
|
||||||
|
|
||||||
const app = await $fetch(`https://${server}/api/v1/apps`, {
|
if (!registeredApps[server] || registeredApps[server].redirect_uri !== redirect_uris) {
|
||||||
method: 'POST',
|
const app = await $fetch(`https://${server}/api/v1/apps`, {
|
||||||
body: {
|
method: 'POST',
|
||||||
client_name: APP_NAME,
|
body: {
|
||||||
redirect_uris: [
|
client_name: APP_NAME,
|
||||||
'urn:ietf:wg:oauth:2.0:oob',
|
redirect_uris,
|
||||||
'http://localhost:3000/*',
|
scopes: 'read write follow push',
|
||||||
'https://nuxtodon.netlify.app/*',
|
},
|
||||||
].join('\n'),
|
})
|
||||||
scopes: 'read write follow push',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
registeredApps[server] = app
|
registeredApps[server] = app
|
||||||
|
|
||||||
console.log(`Registered app for ${server}`)
|
console.log(`Registered app for ${server}`)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
await fs.writeJSON(filename, registeredApps, { spaces: 2, EOL: '\n' })
|
await fs.writeJSON(filename, registeredApps, { spaces: 2, EOL: '\n' })
|
||||||
|
|
|
@ -1,29 +1,36 @@
|
||||||
import { getQuery } from 'ufo'
|
import { getQuery } from 'ufo'
|
||||||
|
import { stringifyQuery } from 'vue-router'
|
||||||
import { getApp } from '~/server/shared'
|
import { getApp } from '~/server/shared'
|
||||||
|
import { HOST_DOMAIN } from '~/constants'
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async ({ context, req, res }) => {
|
||||||
const server = event.context.params.server
|
const server = context.params.server
|
||||||
const app = await getApp(server)
|
const app = await getApp(server)
|
||||||
|
|
||||||
if (!app) {
|
if (!app) {
|
||||||
event.res.statusCode = 400
|
res.statusCode = 400
|
||||||
return `App not registered for server: ${server}`
|
return `App not registered for server: ${server}`
|
||||||
}
|
}
|
||||||
|
|
||||||
const query = getQuery(event.req.url!)
|
const query = getQuery(req.url!)
|
||||||
const code = query.code
|
const code = query.code
|
||||||
|
|
||||||
const res = await $fetch(`https://${server}/oauth/token`, {
|
const result: any = await $fetch(`https://${server}/oauth/token`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: {
|
body: {
|
||||||
client_id: app.client_id,
|
client_id: app.client_id,
|
||||||
client_secret: app.client_secret,
|
client_secret: app.client_secret,
|
||||||
redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
|
redirect_uri: `${HOST_DOMAIN}/api/${server}/oauth`,
|
||||||
grant_type: 'authorization_code',
|
grant_type: 'authorization_code',
|
||||||
code,
|
code,
|
||||||
scope: 'read write follow push',
|
scope: 'read write follow push',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log({ res })
|
res.writeHead(302, {
|
||||||
|
Location: `${HOST_DOMAIN}/login/callback?${stringifyQuery({ server, token: result.access_token })}`,
|
||||||
|
})
|
||||||
|
res.end()
|
||||||
|
|
||||||
|
return result
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,19 +1,17 @@
|
||||||
import { $fetch } from 'ohmyfetch'
|
import { $fetch } from 'ohmyfetch'
|
||||||
|
import type { AppInfo } from '~/types'
|
||||||
export interface AppInfo {
|
|
||||||
id: string
|
|
||||||
name: string
|
|
||||||
website: string | null
|
|
||||||
redirect_uri: string
|
|
||||||
client_id: string
|
|
||||||
client_secret: string
|
|
||||||
vapid_key: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const registeredApps: Record<string, AppInfo> = {}
|
export const registeredApps: Record<string, AppInfo> = {}
|
||||||
|
|
||||||
const promise = $fetch(process.env.APPS_JSON_URL || 'http://localhost:3000/registered-apps.json')
|
const promise = $fetch(process.env.APPS_JSON_URL || 'http://localhost:3000/registered-apps.json')
|
||||||
.then(r => Object.assign(registeredApps, r))
|
.then(r => Object.assign(registeredApps, r))
|
||||||
|
.catch((e) => {
|
||||||
|
if (process.dev)
|
||||||
|
console.error('Failed to fetch registered apps,\nyou may need to run `nr register-apps` first')
|
||||||
|
else
|
||||||
|
console.error('Failed to fetch registered apps')
|
||||||
|
console.error(e)
|
||||||
|
})
|
||||||
|
|
||||||
export async function getApp(server: string) {
|
export async function getApp(server: string) {
|
||||||
await promise
|
await promise
|
||||||
|
|
17
types/index.ts
Normal file
17
types/index.ts
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import type { AccountCredentials } from 'masto'
|
||||||
|
|
||||||
|
export interface AppInfo {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
website: string | null
|
||||||
|
redirect_uri: string
|
||||||
|
client_id: string
|
||||||
|
client_secret: string
|
||||||
|
vapid_key: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserLogin {
|
||||||
|
server: string
|
||||||
|
token: string
|
||||||
|
account?: AccountCredentials
|
||||||
|
}
|
Loading…
Reference in a new issue