diff --git a/CHANGELOG.md b/CHANGELOG.md index 21c589376..197de5aec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ### General - Enhance: プロキシアカウントをシステムアカウントとして作成するように +- Enhance: OAuthで外部アプリからロゴが提供されている場合、それを表示できるように + 書式は https://indieauth.spec.indieweb.org/20220212/#example-2 に準じます。 - Fix: システムアカウントが削除できる問題を修正 ### Client diff --git a/packages/backend/src/server/oauth/OAuth2ProviderService.ts b/packages/backend/src/server/oauth/OAuth2ProviderService.ts index e065c451f..cdd710266 100644 --- a/packages/backend/src/server/oauth/OAuth2ProviderService.ts +++ b/packages/backend/src/server/oauth/OAuth2ProviderService.ts @@ -95,6 +95,7 @@ interface ClientInformation { id: string; redirectUris: string[]; name: string; + logo: string | null; } // https://indieauth.spec.indieweb.org/#client-information-discovery @@ -124,11 +125,19 @@ async function discoverClientInformation(logger: Logger, httpRequestService: Htt redirectUris.push(...[...fragment.querySelectorAll('link[rel=redirect_uri][href]')].map(el => el.href)); let name = id; + let logo: string | null = null; if (text) { const microformats = mf2(text, { baseUrl: res.url }); - const nameProperty = microformats.items.find(item => item.type?.includes('h-app') && item.properties.url.includes(id))?.properties.name[0]; - if (typeof nameProperty === 'string') { - name = nameProperty; + const correspondingProperties = microformats.items.find(item => item.type?.includes('h-app') && item.properties.url.includes(id)); + if (correspondingProperties) { + const nameProperty = correspondingProperties.properties.name?.[0]; + if (typeof nameProperty === 'string') { + name = nameProperty; + } + const logoProperty = correspondingProperties.properties.logo?.[0]; + if (typeof logoProperty === 'string') { + logo = logoProperty; + } } } @@ -136,6 +145,7 @@ async function discoverClientInformation(logger: Logger, httpRequestService: Htt id, redirectUris: redirectUris.map(uri => new URL(uri, res.url).toString()), name: typeof name === 'string' ? name : id, + logo, }; } catch (err) { console.error(err); @@ -379,6 +389,7 @@ export class OAuth2ProviderService { return await reply.view('oauth', { transactionId: oauth2.transactionID, clientName: oauth2.client.name, + clientLogo: oauth2.client.logo, scope: oauth2.req.scope.join(' '), }); }); diff --git a/packages/backend/src/server/web/views/oauth.pug b/packages/backend/src/server/web/views/oauth.pug index 1470dbfbd..4195ccc3a 100644 --- a/packages/backend/src/server/web/views/oauth.pug +++ b/packages/backend/src/server/web/views/oauth.pug @@ -6,4 +6,6 @@ block meta //- XXX: Remove navigation bar in auth page? meta(name='misskey:oauth:transaction-id' content=transactionId) meta(name='misskey:oauth:client-name' content=clientName) + if clientLogo + meta(name='misskey:oauth:client-logo' content=clientLogo) meta(name='misskey:oauth:scope' content=scope) diff --git a/packages/backend/test/e2e/oauth.ts b/packages/backend/test/e2e/oauth.ts index ef7a6a579..f639f90ea 100644 --- a/packages/backend/test/e2e/oauth.ts +++ b/packages/backend/test/e2e/oauth.ts @@ -72,11 +72,12 @@ const clientConfig: ModuleOptions<'client_id'> = { }, }; -function getMeta(html: string): { transactionId: string | undefined, clientName: string | undefined } { +function getMeta(html: string): { transactionId: string | undefined, clientName: string | undefined, clientLogo: string | undefined } { const fragment = JSDOM.fragment(html); return { transactionId: fragment.querySelector('meta[name="misskey:oauth:transaction-id"]')?.content, clientName: fragment.querySelector('meta[name="misskey:oauth:client-name"]')?.content, + clientLogo: fragment.querySelector('meta[name="misskey:oauth:client-logo"]')?.content, }; } @@ -915,6 +916,59 @@ describe('OAuth', () => { assert.strictEqual(getMeta(await response.text()).clientName, `http://127.0.0.1:${clientPort}/`); }); + test('With Logo', async () => { + sender = (reply): void => { + reply.header('Link', '; rel="redirect_uri"'); + reply.send(` + +
+ Misklient + +
+ `); + reply.send(); + }; + + const client = new AuthorizationCode(clientConfig); + + const response = await fetch(client.authorizeURL({ + redirect_uri, + scope: 'write:notes', + state: 'state', + code_challenge: 'code', + code_challenge_method: 'S256', + } as AuthorizationParamsExtended)); + assert.strictEqual(response.status, 200); + const meta = getMeta(await response.text()); + assert.strictEqual(meta.clientName, 'Misklient'); + assert.strictEqual(meta.clientLogo, `http://127.0.0.1:${clientPort}/logo.png`); + }); + + test('Missing Logo', async () => { + sender = (reply): void => { + reply.header('Link', '; rel="redirect_uri"'); + reply.send(` + +
Misklient + `); + reply.send(); + }; + + const client = new AuthorizationCode(clientConfig); + + const response = await fetch(client.authorizeURL({ + redirect_uri, + scope: 'write:notes', + state: 'state', + code_challenge: 'code', + code_challenge_method: 'S256', + } as AuthorizationParamsExtended)); + assert.strictEqual(response.status, 200); + const meta = getMeta(await response.text()); + assert.strictEqual(meta.clientName, 'Misklient'); + assert.strictEqual(meta.clientLogo, undefined); + }); + test('Mismatching URL in h-app', async () => { sender = (reply): void => { reply.header('Link', '; rel="redirect_uri"'); diff --git a/packages/frontend/src/pages/oauth.vue b/packages/frontend/src/pages/oauth.vue index 8719a769e..860c884d1 100644 --- a/packages/frontend/src/pages/oauth.vue +++ b/packages/frontend/src/pages/oauth.vue @@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only ('meta[name="misskey:oauth:client-name"]')?.content; +const logo = document.querySelector('meta[name="misskey:oauth:client-logo"]')?.content; const permissions = document.querySelector('meta[name="misskey:oauth:scope"]')?.content.split(' ').filter((p): p is typeof Misskey.permissions[number] => (Misskey.permissions as readonly string[]).includes(p)) ?? []; function doPost(token: string, decision: 'accept' | 'deny') {