enhance: OAuth2 (IndieAuth) でロゴが提供されている場合は表示するように (#15578)
* enhance: OAuthでロゴが提供されている場合は表示するように * Update Changelog * refactor * fix * fix test
This commit is contained in:
parent
f7ea0c6991
commit
22228b6756
@ -2,6 +2,8 @@
|
||||
|
||||
### General
|
||||
- Enhance: プロキシアカウントをシステムアカウントとして作成するように
|
||||
- Enhance: OAuthで外部アプリからロゴが提供されている場合、それを表示できるように
|
||||
書式は https://indieauth.spec.indieweb.org/20220212/#example-2 に準じます。
|
||||
- Fix: システムアカウントが削除できる問題を修正
|
||||
|
||||
### Client
|
||||
|
@ -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<HTMLLinkElement>('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(' '),
|
||||
});
|
||||
});
|
||||
|
@ -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)
|
||||
|
@ -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<HTMLMetaElement>('meta[name="misskey:oauth:transaction-id"]')?.content,
|
||||
clientName: fragment.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-name"]')?.content,
|
||||
clientLogo: fragment.querySelector<HTMLMetaElement>('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', '</redirect>; rel="redirect_uri"');
|
||||
reply.send(`
|
||||
<!DOCTYPE html>
|
||||
<div class="h-app">
|
||||
<a href="/" class="u-url p-name">Misklient</a>
|
||||
<img src="/logo.png" class="u-logo" />
|
||||
</div>
|
||||
`);
|
||||
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', '</redirect>; rel="redirect_uri"');
|
||||
reply.send(`
|
||||
<!DOCTYPE html>
|
||||
<div class="h-app"><a href="/" class="u-url p-name">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', '</redirect>; rel="redirect_uri"');
|
||||
|
@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<MkAuthConfirm
|
||||
ref="authRoot"
|
||||
:name="name"
|
||||
:icon="logo"
|
||||
:permissions="permissions"
|
||||
:waitOnDeny="true"
|
||||
@accept="onAccept"
|
||||
@ -33,6 +34,7 @@ if (transactionIdMeta) {
|
||||
}
|
||||
|
||||
const name = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-name"]')?.content;
|
||||
const logo = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-logo"]')?.content;
|
||||
const permissions = document.querySelector<HTMLMetaElement>('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') {
|
||||
|
Loading…
x
Reference in New Issue
Block a user