diff --git a/.gitignore b/.gitignore index 7b738a5..a65a40a 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,4 @@ atproto oauth_old oauth_example my-blog/static/oauth/assets/comment-atproto* +*.lock diff --git a/my-blog/content/posts/2025-06-19-oauth.md b/my-blog/content/posts/2025-06-19-oauth.md new file mode 100644 index 0000000..c0069b2 --- /dev/null +++ b/my-blog/content/posts/2025-06-19-oauth.md @@ -0,0 +1,65 @@ +--- +title: "oauthに対応した" +slug: "oauth" +date: 2025-06-19 +tags: ["atproto"] +draft: false +--- + +現在、[syu.is](https://syu.is)に[atproto](https://github.com/bluesky-social/atproto)をselfhostしています。 + +oauthを`bsky.social`, `syu.is`ともに動くようにしました。 + +![](/img/atproto_oauth_syuis.png) + +ここでいうselfhostは、pds, plc, bsky, bgsなどを自前のserverで動かし、連携することをいいいます。 + +ちなみに、atprotoは[bluesky](https://bsky.app)のようなものです。 + +ただし、その内容は結構複雑で、`at://did`の仕組みで動くsnsです。 + +usernameは`handle`という`domain`の形を採用しています。 + +didの名前解決をしているのが`plc`です。pdsがuserのdataを保存しています。timelineに配信したり表示しているのがbsky, bgsです。 + +## oauthでハマったところ + +現在、`bsky.team`のpds, plc, bskyには`did:plc:6qyecktefllvenje24fcxnie`が登録されています。これは`syu.is`の`@ai.syui.ai`のアカウントです。 + +```sh +$ did=did:plc:6qyecktefllvenje24fcxnie + +$ curl -sL https://plc.syu.is/$did|jq .alsoKnownAs +[ "at://ai.syui.ai" ] + +$ curl -sL https://plc.directory/$did|jq .alsoKnownAs +[ "at://ai.syu.is" ] +``` + +しかし、みて分かる通り、pds, plcは`@ai.syu.is`で登録されており、handle-changeが更新されていないようです。 + +```sh +$ handle=ai.syui.ai +$ curl -sL "https://syu.is/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did +$ curl -sL "https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did +$ curl -sL "https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle?handle=$handle" | jq -r .did +``` + +oauthは、そのままではbsky.teamのpds, plcを使って名前解決を行います。この場合、まず、それらのserverにdidが登録されている必要があります。 + +次に、handleの更新が反映されている必要があります。もし反映されていない場合、handleとpasswordが一致しません。 + +localhostではhandleをdidにすることで突破できそうでしたが、本番環境では難しそうでした。 + +なお、[@atproto/oauth-provider](https://github.com/bluesky-social/atproto/tree/main/packages/oauth/oauth-provider)の本体を書き換えて、pdsで使うと回避は可能だと思います。 + +私の場合は、その方法は使わず、didの名前解決には自前のpds, plcを使用することにしました。 + +```js +this.oauthClient = await BrowserOAuthClient.load({ + clientId: this.getClientId(), + handleResolver: pdsUrl, + plcDirectoryUrl: pdsUrl === 'https://syu.is' ? 'https://plc.syu.is' : 'https://plc.directory', +}); +``` + diff --git a/my-blog/static/css/style.css b/my-blog/static/css/style.css index f181ac1..c239495 100644 --- a/my-blog/static/css/style.css +++ b/my-blog/static/css/style.css @@ -493,6 +493,7 @@ article.article-content { .article-body { color: #1f2328; line-height: 1.6; + padding-bottom: 200px; } .article-body h1, .article-body h2, .article-body h3 { @@ -1007,6 +1008,7 @@ article.article-content { /* Article content mobile optimization */ .article-body { overflow-x: hidden; + padding-bottom: 50px; } .article-body pre { @@ -1071,3 +1073,8 @@ article.article-content { padding: 0; } } + +img { + width: 100%; +} + diff --git a/my-blog/static/img/atproto_oauth_syuis.png b/my-blog/static/img/atproto_oauth_syuis.png new file mode 100644 index 0000000..9555b0f Binary files /dev/null and b/my-blog/static/img/atproto_oauth_syuis.png differ diff --git a/oauth/src/App.css b/oauth/src/App.css index 5205fdf..de6de0e 100644 --- a/oauth/src/App.css +++ b/oauth/src/App.css @@ -48,7 +48,7 @@ body { /* align-items: center; */ max-width: 800px; margin: 0 auto; - padding: 20px 0; + padding: 45px 0; width: 100%; } @@ -1206,4 +1206,4 @@ body { .record-actions { flex-shrink: 0; -} \ No newline at end of file +}