概要

webサイトにメールでのOTP認証を手軽に実装できるというCloudflare Zero TrustのAccessが面白そうだったのでお試しした時のメモ。

実現したかった事

公開領域にあるWEBサイトにアクセス制限を設けたい。
テストサイトを特定の人にだけ見せたいとかそういう需要でよくあるやつ。
でもアクセス元IPアドレスの管理やBASIC認証のIDとパスワードを作って渡してとか個別の管理...とかはやりたく無い。
アクセス許可したいユーザのメールアドレスだけでサクッとなんとかしたい。
アクセスのたびに変わるOTP使って認証したい。
でも複雑な仕組みは管理したく無い。幸せになりたい。楽して生きていたい。
とりあえず無料でできる範囲でやりたい

事前に用意が必要なもの

Cloudflareアカウント（無料プランで検証は可能）
自分で管理操作可能な独自ドメイン（サブドメイン不可）
独自ドメインのDNS設定に関する周辺知識
アクセス制限したいWEBサイトのFQDNをCloudflereのDNSに登録するための周辺知識
アクセス許可するメールアドレス

やっていく

Accessの機能を使ったメール認証に向けてセットアップしていく

Cloudflareの`WEBサイト`へ独自ドメインの管理を移行する。

[念のため警告]
この記事はあくまで個人検証で、万が一壊れても社会的に何の影響もないテキトーな独自ドメインを用意して検証しています。
本番サービス展開中のドメインで気軽にやって良い内容では無いと思われるので慎重な検討と判断を推奨します。

独自ドメインのNSをCloudflareへ預ける。

Cloudflareのダッシュボードへログインしwebサイト からサイトを追加から登録する。
独自ドメインを管理するレジストラで、独自ドメインのNSレコードを表示されたCloudflareのNSへ変更する。
この辺りを参考に

Cloudflere DNSに`Access`でアクセス制限したいFQDNを登録

cloudflare ダッシュボードのwebサイトから先に登録済みのwebサイトを選択、DNS設定から登録すればよし。
アクセス制限したいFQDNをCludflareのDNSで解決（制御）できる状態にする。
このへんを参考に

Cloudflare Zero Trustの有効化（無料プラン)

Cloudflareのダッシュボードへログインします。
ダッシュボード左側メニューにある ZeroTrustから有効化していきます。

monthly $0.00 を確認して Proceedする

これでAccessを包む Clouflare ZerotTrustの機能も試す事ができるようになった（無料で）

`Access` を設定していく。

今回はApplicationsに登録されているwebアプリ（webサイト）に対して、Access Groupに登録されたグループからのアクセスを許可するといった内容で設定していく。
ZeroTrustのダッシュボード左メニューにあるAccessの項目中で設定する

`Access Group`を作る

アクセスを許可するメールアドレスをあらかじめ登録しておく
このへんを参考に。

今回はとりあえずこんな感じで用意。
許可したいメアドは複数追加できる。が、無料プランでは最大50までっぽい。試すだけなら充分。

`Applications` を登録する

このへんを参考に。

Add an aplication から Self-Hosted を選択

Application name は自分が管理しやすいものをテキトーにつければ良さそう。
Application Domainは、先に cloudflare で webサイトとして登録済みのドメインでDNS が cloudflareの管理下にあるものが選択できるっぽい。subdomain は cloudflareのDNSでCNAMEなりAレコードなりが登録されている必要があるっぽい。
その他、好みに応じてアプリのロゴ等も設定できるっぽい。
Identity providersは今回はデフォルトのまま。

デフォルトで適用するポリシーを作成する。
Policy name,Action,Session durationを設定。
Assign a group で先に作成したAccess Groupを Includeとして使用する。
Create Addtional rulesで Login Methods : One-time PINを設定した。
今回はこんな感じにした。

追加の設定。今回は特に無しで良いのでそのままにしてAdd applicationで終了

以上で設定が完了。簡単

メール認証できるか試してみる。

Applicationsで登録したFQDNへブラウザからアクセスするとおもむろにメール認証画面が！

Access Groups で登録した、許可したいメールアドレスを入力すると、OTPを入れろ、という画面になった。

メールBOXへOTPのコードが届くので確認！

OTPコードを正しく入力すると、WEBサイトを表示できた。

※ 以前使ったcloudflare pages https://qiita.com/0xmks/items/7c6bdd023f920142692e を使って検証した

ログはあるのか？

ZeroTrustのダッシュボード左メニューのLogsから、アプリへのアクセスを許可したログを見る事ができた。
このへんを参考に

他にも Analyticsで統計表示などをできるようだった。
このへんを参考に

正しくないメールアドレスの場合は？

許可していないメールアドレスを試しに入力してみたが、OTPコードを入れろ！画面が出るのみで、特に進展はなかった。Logsのログにも残らないようだった。
律儀に正しくないぞとか登録されてないぞとか出ると逆にそれを利用される事もあるだろうし、失敗しましたログが溜まってもうるさいので、それはそれで。

感想

サーバーの設定やプログラムも無し、画面ポチポチだけでここまでの事を簡単に無料で実装できてしまうのか...という感動があった。
アクセス元のIPアドレス管理やBASIC認証の用意も無しにメアドだけで手軽にアクセス制御を実装できるのは良い体験だった。数年前の自分に教えてあげたい。
テストサイトをお客さんに見てもらうのに使う、とか。アプリ管理画面等をこれで認証賄うとかそういうのもできそうかなーとは思った。
でもDNS周りをCloudFlareへ完全に預けないといけないという点や、サブドメインではNGなのはハードルが高い場合がありそう。
CloudflareのDNSを通さずに、例えばIPアドレス直でアクセスされた場合などはこの辺の制御は適用されないので、その辺も何かしら考えないといけないかもしれない。

以上