目次
Cloudflare Tunnelで公開したローカルサーバーに、Goggle(Gmail)認証を追加しました。備忘録として残します。
認証が必要な理由
固定URLだけでは、URLを知っていれば誰でもアクセスできてしまいます。特にローカルサーバーを外部に公開する場合、認証を追加することでセキュリティを強化できます。
Cloudflare Accessを使えば、Gmailアカウントでのログイン認証を無料で追加できます。
Gmail認証とOne-time PINの比較
Cloudflare Accessには、Gmail認証の他に One-time PIN という認証方法もあります。
| 項目 | Gmail認証 | One-time PIN |
|---|---|---|
| 設定の手軽さ | Google Cloud Platformの設定が必要 | Identity Provider追加だけで完了 |
| ログイン体験 | Googleアカウントでワンクリック | 毎回メールでコードを受信 |
| セッション | 長期間（24時間など）有効 | 10分で失効 |
| 対応メール | Gmailのみ | 任意のメールアドレス |
Gmail認証は初期設定に手間がかかりますが、頻繁にアクセスする場合は毎回メールを開く必要がなく快適です。たまにしか使わない場合や設定を簡単にしたい場合は、One-time PINの方が向いています。
Gmail認証の設定
Google Cloud Platformでの設定
Google Cloud Platformコンソールにアクセスします。
新規プロジェクトを作成します。
プロジェクト名を入力して「作成」をクリックします。
「APIとサービス」を選択します。
「認証情報」を選択し、「同意画面を設定」をクリックします。
OAuth同意画面で以下の項目を設定します。
- アプリ名: 任意の名前（例：Claude Code UI）
- ユーザーサポートメール: 自分のメールアドレス
対象を 外部 に設定します。
デベロッパーの連絡先情報を自分のメールアドレスに設定します。
Google API サービスのポリシーに同意します。
「作成」ボタンをクリックして完了します。
OAuth クライアントの作成
「認証情報」画面に戻り、「OAuth クライアントを作成」ボタンを選択します。
以下の項目を設定します。
- アプリケーションの種類: ウェブアプリケーション
- 名前: 任意の名前
「承認済みの JavaScript 生成元」に以下を追加します。
https://<your-team-name>.cloudflareaccess.com
<your-team-name> はCloudflare Oneの「Settings」→「Custom Pages」で確認できるチーム名です。
「承認済みのリダイレクト URI」に以下を追加します。
https://<your-team-name>.cloudflareaccess.com/cdn-cgi/access/callback
「作成」をクリックすると、クライアントIDとクライアントシークレットが表示されます。これらをメモしておきます。
Cloudflare側での設定
Cloudflare Oneダッシュボードにログインします。
「インテグレーション」→「プロバイダー」を選択します。
「Google」を選択します。
以下の項目を入力します。
- 名前: 任意の名前（例：Gmail Auth）
- アプリ ID: 先ほどのクライアントID
- クライアント シークレット: 先ほどのクライアントシークレット
「保存」をクリックします。
アプリケーションの追加
「Accessコントロール」→「アプリケーション」を選択します。
「アプリケーションを追加する」をクリックします。
「セルフホスト」を選択します。
以下の項目を設定します。
- アプリケーション名: 任意の名前
- セッション時間: セッションの有効期限（例：24 hours）
「パブリックホストを追加」をクリックします。
- パブリックホスト名:
- Subdomain: CloudflareTunnelで設定したサブドメイン（例：claude-ui）
- Domain: CloudflareTunnelで設定したドメイン
ポリシーの設定
認証ルールを設定します。
「ポリシーを追加する」をクリックします。
- ポリシー名: 任意の名前（例：gmail-auth）
- アクション: Allow
「ルールを追加する」で「インクルード(包含)」を選択し、以下を設定します。
- セレクター: Emails
- 値: 許可するGmailアドレス（例：[email protected]）
ポリシーが設定できたら、それ以外はデフォルトのまま「次へ」を選択していき、最終的に保存して完了します。
動作確認
設定したURL（例：https://claude-ui.yourdomain.com）にアクセスします。
Cloudflare Accessのログイン画面が表示されます。
Gmailアカウントでログインします。
許可されたメールアドレスであれば、ローカルサーバーにアクセスできます。
使用上の留意点
この設定を使う際は、以下の点に注意してください。
- 認証の有効期限: セッション有効期限を過ぎると再ログインが必要です
- 許可リストの管理: 新しいユーザーを追加する場合は、ポリシーを編集してメールアドレスを追加します
- External設定: User TypeをExternalにしているため、任意のGmailアカウントを許可リストに追加できます