Identity

私の%{general.page}へようこそ！この%{general.page}は私の%{qualification.all}のidentityを持っています。 ただし、%{general.partially}は欠けているかもしれませんが。 トークンをお持ちですか？今すぐ入力！

ソーシャル

GitHub

• アカウント：%{github.id}

In real life

• 氏名 %{real.name}
• 年齢 %{real.age}
• 住所 %{real.pref}%{real.city}

Credit

（敬称略）

• uhyo: 『Cloudflare PagesとCloudflare Workersで██された██を作る』には大変お世話になりました。

メカニズム

1. まず、GitHubに静的なHTMLを置きます。

   アクセス制限がついていてもいいと思います。その辺りは思想です。私はめんどうなので付けませんでした。

   GitHubだと各種CI/CDとの連携が楽で、静的HTMLの最新テキストも取れるのでいい感じに回ります。

2. 次に、Cloudflare Workersで%{%(}と%{)}に囲まれた 部分を置き換えます。ストレージにはKVを使いました。 uhyoさんは環境変数を使っておられましたが、上記記事の中で言及されているように、入る文字が少なく、できるだけ少ない手間で実現したかったのでこうしました。

   プレースホルダに使う文字は何でもいいですが、<と>だけはやめておきましょう。HTMLとの相性が悪く地獄を見る羽目になります。あとは、このように自己言及したくなったときに困るので、それ用のプレースホルダも用意しておきましょう。

3. JWTを使います。このあたりはuhyoさんと同じやりかたです。

   uhyoさんのスキーマではclearanceという整数値で分岐するようにしていましたが、私は各カテゴリごとに公開するかどうかを決めたかったので、clearanceをカテゴリ名の配列にしました。

   自分で検証処理などを書くとバグらせそうなので、uhyoさんが使っているパッケージ、@tsndr/cloudflare-worker-jwtの中身をworkersのJavaScriptに展開しました。@tsndr/cloudflare-worker-jwtのライセンスはMITなので、このページで言及しています。

4. 最後に、Cloudflare Pagesの設定を5秒で済ませて完成です！（雑）

ハマったところ

• Cloudflare WorkerからCloudflare Workerに向かってfetchすることはできない
• ルーティング設定でhttps://id.ksrgte.chではなく、https://id.ksrgte.ch/*とする必要がある

いかがでしたか？

トークンをお持ちですか？