Introduction

開発メモ その452 Debian に cloudflared をインストールして LAN 内のサーバーに外部からアクセスできるようにする の続き。

数日放置していたら、外国からのアクセスが多くて肝が冷えたので。

Cloudflare

How to do?

Cloudflare Access という機能で Web サービス側に修正を加えることなく追加の認証機能を追加できる。
仕組みとして、外部から Cloudflare Tunnel にアクセスしようとすると、 Cloudflare Access が介入し、指定された認証をパスしないと Cloudflare Tunnel の先のサービス (今回は自宅サーバ) にアクセスできないようにしてくれるわけ。
認証機能として外部の IDプロバイダー(IdP) を統合することができ、今回は GitHUb を使ってみる。

1. IdP として GitHUb を連携させる

Cloudflare ダッシュボードを開き、左側の Zero Trust を押下

Cloudflare

左側の 設定 を押下

Cloudflare

右側の 認証 を押下

Cloudflare

ログイン方法 内の 新規追加 を押下

Cloudflare

GitHub を押下

Cloudflare

セットアップ手順 が表示されるので、一度 GitHub を開く

Cloudflare

右上のアカウントメニューから Settings を押下

GitHUb

左側のメニュー最下部にある Developer settings を押下

GitHUb

左側のメニューの OAuth Apps を押下

GitHUb

New OAuth app を押下

GitHUb

Application name を入力 (自由記述)
Homepage URLhttps://<your-team-name>.cloudflareaccess.com を入力
Authorization callback URLhttps://<your-team-name>.cloudflareaccess.com/cdn-cgi/access/callback を入力
上記の <your-team-name>Zero Trust -> 設定 -> カスタム ページ にある チームドメイン を参照

入力後、 Register application を押下

GitHUb

アプリケーションが作成される。
Client ID を控えておく
右側の Generate a new client secret を押下

GitHUb

MFA 認証が行われる (設定次第) ので、認証コードを入力して Verify を押下

GitHUb

Client secret が生成されるので控えておく

GitHUb

Cloudflare のページに戻り、左側の 名前 を入力 (自由記述)
アプリ ID に先程 GitHub のページで入手した Client ID を入力
クライアント シークレット に先程 GitHub のページで入手した Client secret を入力
保存 を押下

Cloudflare

セットアップを完了 を押下

Cloudflare

セットアップが完了したことが表示されるのでページを閉じ、認証に戻る を押下

Cloudflare

ログイン方法 に先程作成した GitHub が追加されているので、テスト を押下

Cloudflare

GitHub 側で作成した OAuth アプリを承認するかどうか聞かれるので Authorize xxxxxx を押下

Cloudflare

テストが成功したことが表示される

Cloudflare

2. Cloudflare Access と Tunnel を連携させる

Cloudflare ダッシュボードを開き、左側の Zero Trust を押下

Cloudflare

左側の Access を押下

Cloudflare

アプリケーションを作成する を押下

Cloudflare

セルフホスト 内の アプリケーションを追加する を押下

Cloudflare

アプリケーション名Cloudflare Tunnel の先で公開するサービスの名称を入力
パブリック ホスト名を追加 を押下

Cloudflare

サブドメインCloudflare Tunnel で指定した、公開するサービスに対応するサブドメインを指定
ドメイン にも、公開するサービスと紐づけたドメインを指定

次に Access ポリシー 内の 新しいポリシーを作成する を押下

Cloudflare

ポリシー名 を入力 (自由記述)
ルールを追加する 内の 包含 にある セレクター から Emails を指定
値に GitHub の認証を許可するユーザのメールアドレスを入力
最後に 保存 を押下し、先のページに戻る

Cloudflare

Access ポリシー既存のポリシー選択 から先程作成したポリシーをチェックし、確認 を押下

Cloudflare

ログイン方法利用可能なすべての ID プロバイダーを受け入れる のトグルを OFF に変更
One time PIN のチェックを外す
次へ を押下

Cloudflare

次へ を押下

Cloudflare

保存 を押下

Cloudflare

以上で設定が完了した

3. 認証してみる

Cloudflare Tunnel で設定した URL にアクセスすると、 Cloudflare Access の認証ページが表示される
GitHub が一覧にあるので選択

Authentication

GitHub の認証情報を入力

Authentication

MFA 認証を処理

Authentication

無事に自分のサービスのページに遷移できた

Authentication