Zenn
🦋

honoを使ってBlueskyのサブドメイン ハンドル認証を実装しといた

2024/12/31に公開
TypeScript
API
Cloudflare Workers
Hono
Bluesky
tech

自分のドメインはあるけど、Bluesky（bsky）で使いたいハンドルが異なる場合に使える hono サーバーを実装してみましたので、もし条件が合ったら使ってみてください。

要するに、私がサイト bar.tld を運営していることでそこそこ有名な foo というハンドルの人だとすると、このコードがお役に立つかもしれません。

  • @bar.tld として Bluesky を使いたいわけではない
  • ハンドルは foo から始まってほしい
  • ハンドルが @foo.bar.tld なら最高か
  • foo.bar.tld というサブドメインは今まで使ったことがない

上記を満たしている場合は、ぜひ使ってみてください！ @foo.bar.tld というハンドルを https://foo.bar.tld で認証して、Bluesky で使えるようにしましょう。

使う技術を紹介

Bluesky のハンドル認証

サブドメインを Bluesky ハンドルとして認証する際に特にわかりやすくて便利なのは、Bluesky に生成された文字列を該当サブドメインの /.well-known/atproto-did から返す方法です。

hono

API などに人気の web フレームワーク。

Cloudflare Worker

Cloudflare 社が提供しているサーバーレス関数のサービスです。hono で作ったシンプルなアプリならすごくデプロイしやすいと思います。

実装と使い方

hono で、二つのエンドポイントを持つアプリを実装します：

  • /.well-known/atproto-did: 該当の Bluesky ハンドルの認証に必要な DID 文字列を返す
  • /: 訪れたユーザーを任意の URL に転送する

コードは極めてシンプルです：

import { Hono } from "hono";
import { env } from "hono/adapter";

const app = new Hono();

app.get("/.well-known/atproto-did", (c) => {
  const { BSKY_DID } = env<{ BSKY_DID: string }>(c);
  return c.text(BSKY_DID);
});

app.get("/", (c) => {
  const { REDIRECT_URL } = env<{ REDIRECT_URL: string }>(c);
  return c.redirect(REDIRECT_URL);
});

export default app;

必要なもの

  • Cloudflareアカウント、もしくはアプリをデプロイできる別の方法
    • 該当ドメインの DNS を Cloudflare で管理しているとなおやりやすい
  • パッケージ管理には pnpm を使っている前提で書いています
  • プロジェクトのコード
    • GitHub アカウントが必ずしも必要ではない
      • Fork → git clone の流れの代わりに zip ファイルをダウンロードして進めても良い
  • Bluesky が期待する、該当のサブドメインをハンドルとして認証するための DID 文字列が必要
    1. Bluesky にログインしてアカウント設定を開く
    2. 「ハンドル」をクリックする
    3. 「自分のドメインを持っています」をクリックする
    4. 「使用するドメインを入力してください」を埋める
    5. 「DNS パネルがない場合」を選択する
    6. 「その内容は以下の通りです：」に出てくる DID 文字列を控える (did:plc:から始まる)

自分のものにする

wrangler.toml に設定や環境変数を貼ります：

name = "karawapo-alecrem-com"
main = "src/index.ts"
compatibility_date = "2024-11-29"

routes = [
  { pattern = "karawapo.alecrem.com", custom_domain = true }
]

[vars]
BSKY_DID = "did:plc:h4rnbdanbl3u2czpvkbve2se"
REDIRECT_URL = "https://alecrem.com/"

下記の箇所を書き換える必要がある：

  • Cloudflare Worker に任意の名前をつける: name = "karawapo-alecrem-com"
  • 希望の Bluesky ハンドルを貼る（@ なし）: pattern = "karawapo.alecrem.com"
  • BSKY_DID: Bluesky で取得した DID 文字列を貼る
  • REDIRECT_URL: / へのリクエストをどこに転送したいか

依存関係をインストールしてローカルサーバーを回す

pnpm install
pnpm run dev

Cloudflare Worker としてデプロイ

pnpm run deploy
  • Cloudflare アカウントにログインする必要がある
  • コードを変えるたびにデプロイし直すことができる

Cloudflare Worker にカスタムドメインを設定する

  1. Cloudflare アカウントにログインしたまま、左側にナビゲーションメニューから「Workers & Pages」を開く
  2. 作った Worker を選択して開く
  3. Worker の「設定」タブを開く
  4. 「ドメインとルート」セクションにある「+ 追加」ボタンをクリックする
  5. 開くペインで「カスタム ドメイン」を選択する
  6. wrangler.toml に貼った通りの Bluesky ハンドルを貼る
  7. 「ドメインを追加」をクリックして、設定を完了させる
  • https://foo.bar.tld への HTTPS 要求が指定した転送用 URL に転送されることを確認する
  • https://foo.bar.tld/.well-known/atproto-did への HTTPS 要求が希望のハンドルの DID 文字列を返すことを確認する（私の DID 文字列ではなくて）

Bluesky 上でハンドルを設定する

  1. Bluesky にログインしてアカウント設定を開く
  2. 「ハンドル」をクリックする
  3. 「自分のドメインを持っています」をクリックする
  4. 「使用するドメインを入力してください」を埋める
  5. 「DNS パネルがない場合」を選択する
  6. 「テキストファイルを確認」をクリックする

おわりに

このちょっとしたプロジェクトのおかげで、hono と Cloudflare Workers を初めて使うことになりました。もし触ったことがないようでしたら、使ってみるのがいかがでしょうか？

GitHubで編集を提案

Discussion