BlueskyアプリのOAuth認証画面でアプリ名をドメインにしたい

前書き

Blueskyアプリを開発しているときに、OAuthを利用することも一般的になりつつあります。

開発者はOAuth画面で表示されるのは、メタデータで自分が定義したアプリ名ではなく、OAuthクライアントのメタデータがおかれたURLのフルパスが表示されるシーンに遭遇することになると思います。

OAuth認証画面（Concent）でアカウントに求める権限確認画面の表示にも使用されるメタデータですが、JSONフォーマットで書かれたものがオンラインで参照可能であれば基本的にどこに置いてあっても良い事になっており、パスの指定もファイル名の指定も特段ありません。

が、そうするとアプリ名の部分にはこのメタデータのURLフルパスが表示されます。これ自体は特段問題ないですが、せっかくなので自分のアプリ名、せめてドメインで表示されて欲しいものです。

実際に一部アプリを見ていると、フルパスで表示されているアプリと、ドメインだけの表示になっているアプリがあります。

この違いは何か。この問題を調べるべく、我々はGitHubリポジトリのジャングルに旅立った────。

OAuthクライアントメタデータのURLを https://{your-app.example.com}/oauth-client-metadata.json として公開し、指定すればアプリ名はドメイン名となる。

OAuth関連のUI実装があるのはこの辺りになります。

OAuth Concent画面の例

この中で上記のコンセント画面を出しているのは packages/oauth/oauth-provider-ui/src/views/authorize/consent/consent-view.tsx

ここから辿ると <ConcentForm />が表示箇所の様子。

さらに concent-form.tsx を辿るとどうやら <ClientName /> がクライアント名を表示していそう。

packages/oauth/oauth-provider-ui/src/views/authorize/consent/consent-form.tsx

packages/oauth/oauth-provider-ui/src/components/utils/client-name.tsx を見ると

<UrlViewer />でクライアント名としてURLの表示の制御していそう。少し前の実装を見ると isConventionOAuthClientId()が鍵になっていそう。

packages/oauth/oauth-provider-ui/src/lib/oauth-client.ts を見ると答えがありました。

メタデータのURLが特定のパスに配置されていることで表示が変わるようです。

ご指摘いただいた通りドキュメントにも記載がありました。 https://atproto.com/ja/guides/scopes#clients

ただ、ドキュメント内では

もし oauth-client-metadata.json の代わりに client-metadata.json を使用している場合、この変更により認可フローのページでURL文字列ではなくドメインを表示させることができます。

と記載があるのですが、この記述は実装側と異なっており /oauth-client-metadata.json のパスにしておく必要があります。