GCPでAuth0の自己管理証明書を使ったカスタムドメインを設定する

ogp

はじめに

こんにちは、enechainでSREを務めている taro です。私たちSREチームは、全社の基盤設計、運用、信頼性とセキュリティの強化に注力しています。

弊社では、Google Chrome の 3rd Party Cookie 廃止に対する取り組みとして、Auth0 の Custom Domains の機能を導入しました。本記事では、導入の経緯や具体的な手順について共有したいと思います。

はじめに
背景と課題
アーキテクチャ
How to
最後に
Reference

背景と課題

近年、多くのブラウザ開発者やテクノロジー企業は、プライバシー保護のために第三者のCookie（3rd Party Cookie）の使用を段階的に廃止する方針を発表しています。

例えばGoogleでは、今年から 3rd Party Cookie を段階的に廃止し始めており、2024年下半期から100%の廃止に向けた対象の拡大が予定されています（参考資料）。

弊社のWebアプリケーションでは、ユーザ認証にAuth0を利用しています。しかし、Auth0のデフォルト認証ドメイン（[tenant].jp.auth0.com）を使用しているため、アプリのドメインと異なり、3rd Party Cookieとして扱われます。そうすると、ユーザ認証やセッション維持に関する課題が生じる可能性があります。

そこで解決策として、Auth0 の Custom Domains の機能を利用することを検討しました。認証ドメインとアプリドメインを一致させることで、Cookieを1st Partyとして扱うことが可能になります。これは、ユーザ体験を損なうことなくプライバシー保護の動きに対応するための重要なステップになります。

弊社ではクラウド基盤としてGCPを利用しており、アプリのドメインも全てGCPで一元管理されています。

しかし、GCP上でAuth0の Custom Domains を設定する方法については、（本記事公開時点の）公式ドキュメントのみだと迷う点も多く、一般情報としてもあまり公開されていませんでした。

このため、今回の記事では、GCP上でAuth0のCustom Domainsを設定するプロセスを詳細に解説し、他の開発者が同様の課題に直面した際の参考となるような備忘録を残したいと思います。

アーキテクチャ

最初にGCPを利用したAuth0認証の全体イメージになります。

カスタムドメインでは、GCLBをReverse Proxyとして利用し、認証のためにクライアントから来た通信をGCLB → Auth0へフォワードさせる方式となっています。

auth0_gcp_architecture

See: Configure Google Cloud Platform with Load Balancing as Reverse Proxy

How to

今回は手順書を作成するために、サンプルのAuth0テナントとGCPプロジェクトを利用して実際にAuth0 Custom Domainsを設定していきます。

実際の流れは大きく以下の6ステップから構成されます。

Auth0テナントの作成とCustom Domainsの設定準備
GCPでAuth0 Custom Domainsの所有権証明設定
Auth0で所有権の確認
GCPでAuth0へのReverse ProxyをGCLBとして作成
Auth0でCustom Domainsが利用できるかテスト
サンプルアプリでAuth0 Custom Domainsの挙動を確認

1. Auth0テナントの作成とCustom Domainsの設定準備

今回はテストとして行うため、新たにAuth0のテナントを作成します。

Untitled

次にカスタムドメインの設定を行います。

Auth0 → Settings → Custom Domains を開きます
ドメインはアプリで利用しているものと同じものを設定します（今回でいうGCPのGCLBで利用するドメイン）。
証明書タイプは、Auth0-managedと Self-managed の2種類ありますが、大抵の企業は独自で証明書を取得するか、利用しているSaaS側のマネージド証明書を利用することが多いと思うので、 Self-managed certificatesのケースで進めていきます

Untitled

Add Domain をクリックするとドメインの所有権を確認するためのTXT Recordが表示されます。

これらの情報をメモしておき、次のGCP側のDNSの設定で利用します。

Untitled

2. GCPでAuth0 Custom Domainsの所有権証明設定

弊社ではGCPのCloud DNSでドメインを管理しています。

始めに、Auth0 Custom Domains側で設定したドメインの静的IPアドレスを取得し、Aレコードとして登録します。

この静的IPアドレスとドメインは、後にGCLBで設定することになります。

VPC network → IP addresses → RESEVE EXTERNAL STATIC IP ADDRESS を選択します。

Untitled

Nameはなんでも良いのですが、GCLBで利用するためにTypeはGlobalを選択し、RESERVEをクリックしてIPアドレスを取得しましょう。

Untitled

無事静的IPが取得できました。この静的IPをこの後Cloud DNSでAuth0 Custom Domainsの Aレコードとして登録します。

Untitled

Network services → Cloud DNS を選択し、Auth0 Custom Domainsで利用する同じドメインのDNSゾーンを選択します。

Untitled

RECORD SETS の ADD STANDARD をクリックして以下のようにAレコードを作成しましょう。

Untitled Aレコード設定後、一応ドメインにアクセスできるかCLIで確かめます。

Untitled

次にAuth0のTXT Recordを登録していきましょう。

同じく Cloud DNS → 対象Zoneを選択後、 ADD STANDARD をクリックしてTXTレコードを作成します。

Auth0 Custom domainの TXT Record を DNS nameにセットし、 TXT Content を TXT dataに入力します。

Untitled

これで、Auth0側でドメインの所有権を証明する準備が整いました。

Untitled

3. Auth0で所有権の確認

Auth0のCustom Domains画面に戻り、Verifyボタンをクリックします。

Untitled

無事認証が通ると次のような画面がポップアップで出ます。

Original Domain Name と Name , Value は後ほど全て利用するのでメモってからCloseを選択します。

Untitled

Custom Domainsの画面に戻ると、statusがready状態になっていることがわかります。

Untitled

4. GCPでAuth0へのReverse ProxyをGCLBとして作成

ドメインの認証が終わったので、いよいよGCP側でLoad Balancerを作っていきます。

証明書の作成

最初にドメインの証明書を作っていきます。ここで簡単のためGCPのmanagedの証明書を利用します。独自の証明書がある方は Upload my certificate を選択して自身の証明書を設定して下さい。

Certificate Manager → CLASSIC CERTIFICATES → Create

Untitled

Provisioning中となっていますが、問題ありません。この後GCLB作成してこの証明書を紐づけていきます。

Untitled

Network Endpoint Groupの作成

次にNetwork Endpoint Group (NEG) を作成していきます。NEGは、GCLBに来たトラフィックをNEGに設定したEndpointに流す役割があります。NEGには、Auth0のURLを設定します。

Compute Engine → Network endpoint group → CREATE NETWORK ENDPOINT GROUP を選択します。

Network endpoint group type: Internet NEG (Global, Regional) を選択
Add through: Fully qualified domain name and port を選択
Fully qualified domain name: Auth0のOriginal Domain Nameを記載

Untitled

これでCREATEすると、Network endpoint groupが作成されます。

Untitled

以上の作業でGCLBを作成する準備が整いました。それでは実際にGCLBでReverse Proxyを作成していきます。

GCLBの作成

Network services → Load balancing → CREATE LOAD BALANCER を選択し、Application Load Balancer (HTTP/S) を選択して下さい。

Untitled

以下のように選択して CONTINUE をクリックします。

Untitled

Frontend configurationの作成

以下のように設定し、DONEをクリックして作成します。

Protocol: HTTPS
Certificate: 先ほど作成したCertificateを選択
IP address: 先ほど作成した固定IPを選択

Untitled

Backend configurationの作成

以下のように入力して CREATE をクリックします。

Backend type: Internet network endpoint group
Protocol: HTTPS
Internet network endpoint group: auth0-neg（事前に作成したもの）
Custom request headers
- cname-api-key: Auth0 Custom Headersの Value を設定
- host: Origin Domain Nameの値を設定

Untitled

Routing rulesの作成

最後にRouting rulesを設定し、DONEをクリックします。

Mode: Advanced host and path rule
Action: Route traffic to a single backend
Backend: auth0-backend（先ほど作成したもの）
Host rewrite: Auth0 Original Domain Nameを入力

Untitled

最後に確認して CREATE をクリックして GCLB を作成しましょう。

Untitled

CREATE を選択するとロードバランサーが作成されますが、SSL証明書のデプロイに10~20分ほどかかるため、それまではアクセスすることができません。

Untitled

10~20分待ったのち、SSL証明書がACTIVE状態になったらAuth0の設定画面に戻ってテストしてみましょう。

Untitled

5. Auth0でCustom Domainsが利用できるかテスト

Test buttonをクリックして、右上の方に「Your domain is configured correctly.」と出れば成功です。

Untitled

6. サンプルアプリでAuth0 Custom Domainsの挙動を確認

せっかくなので、最後にカスタムドメインの認証画面に飛べるか確認してみましょう。

Auth0でアプリケーションを作成します。

Applicaiton → Single Page Web Applicatiopns

Settingsで以下を設定

http://localhost:3000 を以下に入れてSave
- callback urls
- allowed logout urls
- allowed web origins
Client IDをメモる

Loginするためのアプリケーションコード (test.html) を適当なディレクトリ配下で作成して下さい。

domain: Auth0 Custom Domainsを入力
client_id: 先ほど作成したApplicationの Client IDを入力

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Auth0 SPA Login</title>
    <script src="https://cdn.auth0.com/js/auth0-spa-js/1.13/auth0-spa-js.production.js"></script>
</head>
<body>
    <button id="login">Log In</button>
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const auth0 = await createAuth0Client({
                domain: '', // Auth0 Custom Domains
                client_id: '', // アプリケーションのクライアントID
                redirect_uri: window.location.origin // コールバックURL
            });

            const loginBtn = document.getElementById('login');
            loginBtn.addEventListener('click', async () => {
                await auth0.loginWithRedirect({
                    redirect_uri: window.location.origin
                });
            });
        });
    </script>
</body>
</html>

作成したソースコードがあるディレクトリで簡単なWEBサーバで起動します。

$ python3 -m http.server 3000

WEBブラウザで http://localhost:3000/test.html にアクセスします。

Untitled

Loginボタンが出るのでクリックします。すると、Auth0のログインページのドメインがカスタムドメインとなっていればOKです。

Untitled

最後に

今回はGCPを利用したAuth0 Custom Domainsの設定方法を調査し、実際にできるかどうか手順を確認してみました。

enechainのSREデスクはplatform engineering, site reliability, securityの3つのミッションを持っており、横軸エンジニアリングを推進できる非常に魅力的な環境です。 enechainではSREはもちろん、一緒に事業・組織を盛り上げてくれるエンジニア/デザイナー/マネジャーを募集しています。

興味を持っていただけたら、是非ご連絡ください。お待ちしております！

herp.careers herp.careers