Cloudflare ZeroTrust AceessでWEBサイトにメールOTP認証を実装した時のメモ

# 概要
* webサイトにメールでのOTP認証を手軽に実装できるという[Cloudflare Zero Trust](https://www.cloudflare.com/ja-jp/products/zero-trust/)の`Access`が面白そうだったのでお試しした時のメモ。

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

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

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

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

### 独自ドメインのNSをCloudflareへ預ける。
[Cloudflareのダッシュボード](https://dash.cloudflare.com/)へログインし`webサイト` から`サイトを追加`から登録する。
独自ドメインを管理するレジストラで、独自ドメインのNSレコードを表示されたCloudflareのNSへ変更する。
[この辺り](https://developers.cloudflare.com/fundamentals/get-started/setup/add-site/)を参考に

## Cloudflere DNSに`Access`でアクセス制限したいFQDNを登録
* cloudflare ダッシュボードの`webサイト`から先に登録済みのwebサイトを選択、`DNS設定`から登録すればよし。
* アクセス制限したいFQDNをCludflareのDNSで解決（制御）できる状態にする。
* [このへん](https://developers.cloudflare.com/dns/)を参考に

## Cloudflare Zero Trustの有効化（無料プラン)
[Cloudflareのダッシュボード](https://dash.cloudflare.com/)へログインします。
ダッシュボード左側メニューにある `ZeroTrust`から有効化していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/6b5a13e4-9d52-66b1-2e55-76b54844ba32.png)
monthly $0.00 を確認して `Proceed`する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/725b09d8-b97b-d8d1-28bb-1551c96e5591.png)
これで`Access`を包む `Clouflare ZerotTrust`の機能も試す事ができるようになった（無料で）

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

## `Access Group`を作る
* アクセスを許可するメールアドレスをあらかじめ登録しておく
* [このへん](https://developers.cloudflare.com/cloudflare-one/identity/users/groups/)を参考に。

今回はとりあえずこんな感じで用意。
許可したいメアドは複数追加できる。が、無料プランでは最大50までっぽい。試すだけなら充分。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/64268933-b8f9-2b29-574f-2cfbe84d6f8f.png)

## `Applications` を登録する
* [このへん](https://developers.cloudflare.com/cloudflare-one/applications/)を参考に。

`Add an aplication` から `Self-Hosted` を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/3f99c5e8-fff1-5d30-5111-15c404551a01.png)
`Application name` は自分が管理しやすいものをテキトーにつければ良さそう。
`Application Domain`は、先に `cloudflare で webサイトとして登録済みのドメイン`で`DNS が cloudflare`の管理下にあるものが選択できるっぽい。`subdomain` は cloudflareのDNSでCNAMEなりAレコードなりが登録されている必要があるっぽい。
その他、好みに応じてアプリのロゴ等も設定できるっぽい。
`Identity providers`は今回はデフォルトのまま。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/39d747ab-c8b0-3cd6-ec99-60f9fa410e63.png)

デフォルトで適用するポリシーを作成する。
`Policy name`,`Action`,`Session duration`を設定。
`Assign a group` で 先に作成した`Access Group`を `Include`として使用する。
`Create Addtional rules`で `Login Methods : One-time PIN`を設定した。
今回はこんな感じにした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/2930ce81-ca49-df24-9a70-14bf582f7077.png)
追加の設定。今回は特に無しで良いのでそのままにして`Add application`で終了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/7f7f403d-43ca-f67a-e12e-79f61c4e24e9.png)
以上で設定が完了。簡単

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

`Applications`で登録したFQDNへブラウザからアクセスするとおもむろにメール認証画面が！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/5afad379-1729-20c9-f2e4-31754bc4adb8.png)
`Access Groups` で登録した、許可したいメールアドレスを入力すると、OTPを入れろ、という画面になった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/6c2e9bc0-3ac3-91b7-0305-a8f026dd4675.png)
メールBOXへOTPのコードが届くので確認！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/e3b2775d-cd75-64a2-3f51-47bce22a8c44.png)

OTPコードを正しく入力すると、WEBサイトを表示できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/3afff24d-be5f-36ce-7298-1188185e3384.png)
※ 以前使った`cloudflare pages` https://qiita.com/0xmks/items/7c6bdd023f920142692e を使って検証した

## ログはあるのか？
`ZeroTrust`のダッシュボード左メニューの`Logs`から、アプリへのアクセスを許可したログを見る事ができた。
[このへん](https://developers.cloudflare.com/cloudflare-one/analytics/logs/audit-logs/#per-request-audit-logs)を参考に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75076/4bfdc16f-fc0d-f3fa-f96a-75e800fbe0b8.png)
他にも `Analytics`で統計表示などをできるようだった。
[このへん](https://developers.cloudflare.com/cloudflare-one/analytics/)を参考に

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

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

以上