🔐
【Auth0 活用】② OIDC & SAML を利用した SSO 認証の連携

2025/04/30に公開
 1. はじめにこんにちは、クラウドエース第三開発部の秋庭です。

今回は Auth0 の活用方法として、OIDC と SAML プロバイダの登録についてご紹介できればと思います。
前回は FE と BE の SDK でそれぞれどのようなことが出来るのかをまとめました。

https://zenn.dev/cloud_ace/articles/bfff5ad2a58d1a
ユーザー認証において、OIDC や SAML を利用した ID プロバイダでのログイン提供はサービスの UX の向上に欠かせません。

本記事では、Auth0 において、OIDC および SAML を使用するプロバイダを登録する方法、注意点について解説します。
これまで作成した Identity Platform の記事の内容を交えて記述している箇所があります。その点ご了承ください。
本記事の対象読者
Auth0 で OIDC & SAML の導入方法について知りたい方
すでに Identity Platform など他の IDaaS について知っており、比較するために Auth0 について知りたい方
本記事で取り扱わない内容
Auth0 の基本的な紹介やセットアップ方法
各 SDK の詳細な API 仕様 (公式ドキュメントを参照ください)
Identity Platform の情報

過去の記事をご確認ください

参考

・Auth0 Docs

・Auth0 Libraries
余談ですが、3/19 頃から Auth0 のダッシュボードおよびドキュメントが日本語対応しました。🎉

 2. 用語
jwt.io
Auth0 が運営している JWT のデバッグサイトです。JWT は Base64 エンコードされているので、このサイトから JWT の内容を手軽に確認できます。

JWKS (JSON Web Key Set)
JWKS は、複数の JSON Web Key (JWK) を格納するための JSON フォーマットのデータ構造です。主に OAuth 2.0 や OpenID Connect (OIDC) において、公開鍵を配布する目的で使用されます。

 3. OIDC プロバイダの設定方法今回は LINE を例にして、OIDC プロバイダの登録について説明します。

LINE Developers コンソールより、プロバイダとチャネルを既に作成済みの状態から開始します。
ID プロバイダの追加
Auth0 に ID プロバイダとして LINE を登録します。
Authentication > Social より Create Connection から LINE を選択します。

プロバイダ情報の入力
LINE Developers コンソールより、チャネル基本設定に記載されている チャネルID と チャネルシークレット を Auth0 側に入力します。

入力をしたら、Create から作成を完了します。

組織 (Organization) で有効化

Auth0 側での登録が完了したので、Organization 下でのログイン時に使用できるように有効化します。
有効化する Organization を選択し、Connections タブを選択します。

登録した LINE を選択して Enable Connection で追加します。
コールバック URL の設定
LINE ログイン設定より、コールバック URL を追加します。

通常、コールバック URL は https://{テナント名}.{リージョン}.auth0.com/login/callback です。
参考

・Connect to OpenID Connect Identity Provider

 アプリケーションとの統合React の Quickstart アプリケーションを使用して、LINE でのログインが行えるかを確認します。

サンプルアプリケーションを起動し、右上からログインを行います。
Auth0 のユニバーサルログイン画面にリダイレクトします。

組織名を入力すると、ログイン方法に LINE で続ける が追加されているので、押下します。
LINE にリダイレクトします。

すでに LINE にログインしている場合は下のような画面となり、未ログインの場合はここで LINE にログインをします。
初回の連携では、アクセスを許可するかのメッセージが表示されます。
許可を押すとログインが完了し、サンプルアプリケーションに戻ります。

右上のアイコンから Profile を選択すると、ユーザー情報を確認することが可能です。

sub クレームが line で始まっており、続く値は LINE のユーザー ID となっています。

LINE Developers コンソールに個人のアカウントでログインしている場合、チャネル基本設定 に あなたのユーザー ID が表示されているので、その値と一致していることが確認できます。
Identity Platform とは異なり、 Auth0 では LINE が対応サービスとして用意されていたので簡単に設定ができ、分かりやすく感じました。

用意されていないサービスであっても、OIDC に準拠するサービスであればカスタムの Connection を作成することで対応が可能です。

 4. SAML プロバイダの設定方法Identity Platform では、Identity Platform が SAML の IdP となる機能がなかったため、KEYCLOAK を SAML の IdP として動作の確認を行いました。

Auth0 は、IdP と SP のどちらとしても振る舞うことが可能です。

そのため、今回の SAML プロバイダの設定方法の紹介では IdP と SP どちらも Auth0 をで行い、IdP としての動きと SP としての動きを確認したいと思います。
SAML の IdP と SP、どちらも Auth0 で行う方法は以下の公式ドキュメントで紹介されている方法です。

Test SAML SSO with Auth0 as Service Provider and Identity Provider

今回はドキュメントの内容を通して、設定方法と動作を確認します。
この方法では、テナントを 2 つ用意し、IdP と SP の役割で使い分けます。

Auth0 を SP として使用する場合には SP テナント側についてのみ確認することで設定が可能です。

 IdP テナントの設定IdP テナントから、SP テナントに登録する情報を取得します。

作業テナント: IdP テナント
[Dashboard] > [Applications] > [Applications] に移動し、[Create Application] を選択します。

my-auth0-idp などのアプリケーション名を入力し、アプリケーションタイプに [Regular Web Application] を選択し、[Create] を選択します。
[Settings] ページの下部に移動し、[Show Advanced Settings] を選択します。
[Certificates] ビューに移動し、[Download Certificate] を選択し、[PEM] を選択します。 証明書がダウンロードされます。 この証明書は、SP テナントを構成する際に使用します。
[Endpoints] ビューに切り替え、[SAML Protocol URL] を見つけて、その内容をコピーします。 この URL は、SP テナントを構成するときに使用します。

項番
画面

2

Application の作成

4

証明書のダウンロード

5

SAML Protocol URL のコピー

 SAML シーケンスをテストするユーザを作成するログインに使用するユーザーを作成します。

作業テナント: IdP テナント
[Dashboard] > [User Management] > [Users] に移動し、[Create User] を選択します。
Connection はデフォルトのまま、ユーザーのメールアドレス・パスワードを入力します。
[Create] を選択します。

 SP テナントの設定IdP テナントと通信する SP テナントの設定を行います。

作業テナント: SP テナント
[Dashboard] > [Authentication] > [Enterprise] に移動し、[SAML] を選択します。
[Create Connection] を選択します。
以下の情報を入力し、[Create] を選択します

Setting
Description

Connection Name

SAML-Auth0-IDP など、任意の名前を入力する。

Sign In URL
IdP テナントでコピーした SAML Protocol URL 値を入力する。

X509 Signing Certificate
[Choose File] ボタンをクリックし、IdP テナントでダウンロードした .pem ファイルを選択します。

[Setup] ビューに切り替えて、テナントに関連付けられたメタデータを確認します。 URL をコピーして保存します。
新しいブラウザのタブを開き、コピーした URL に移動します。 (Auth0 ドキュメントサイトにログインしている場合、設定にはあらかじめ正しい値が入力されています)。

Entity ID を探し、その内容をコピーして保存します。 urn:{yourTenant}:{yourConnectionName} のようになります。{yourConnectionName} は、IdP テナント用に作成した Connection に置き換えてください。

Metadata を探し、指定された URL をコピーして保存する。 https://{yourTenant}/samlp/metadata?connection={yourConnectionName} のようになります。{yourConnectionName} は、IdP テナント用に作成した Connection に置き換えてください。
先にコピーした URL にアクセスし、SP テナントでこの Connection のメタデータを表示します。 あるいは、ブラウザがメタデータファイルを保存するよう求めるかもしれません。

AssertionConsumerService で始まる行を探し、Location フィールドの値をコピーして保存する。 これは、https://{yourDomain}/login/callback?connection={yourConnectionName} という形式の URL になります。 これは、IdP テナントから SAML アサーションを受信する SP テナントの URL です。

項番
画面

4

表示されている URL にアクセス

5

遷移先のページに記載されている値を保存

 SP テナントのメタデータを IdP テナントに追加するSP テナントでコピーした値を IdP テナントに設定します。

作業テナント: IdP テナント
[Dashboard] > [Applications] > [Applications] の順に移動し、前に作成した IdP アプリケーションの名前を選択します。
[Addons] ビューに切り替えます。
[SAML2 Web App] を選択してオプションを表示し、[Application Callback URL] を見つけます。 コピーした AssertionConsumerService URL を貼り付けます。
[Settings] コードブロックで、audience キーを見つけてコメントを解除し、行末のコンマを削除して、元の値 (urn:foo) を前にコピーした Entity ID 値に置き換えます。新しい行は次のようになります: "audience":"urn:auth0:{yourTenant}:{yourConnectionName}"
下にスクロールし、[Save] を選択する。

項番
画面

3

3,4

 IdP をテストする作業テナント: IdP テナント
同じウィンドウで上にスクロールし、[Debug] を選択します。
ログイン画面が表示されるので、上記で作成したテストユーザーの資格情報でログインする。 構成が正しければ、"It works!" の文字と、IdP に送信されるエンコードおよびデコードされた SAML レスポンスが表示されます。
デコードされた SAML レスポンスを確認し、<saml:Audience> を見つけて、それが前の画面で入力した Entity ID と一致することを確認します。

項番
画面

2

成功時の画面

3

Entity ID と等しいことを確認

 SAML Connection をテストするアプリケーションを作成する作成した SAML Connection をテストするアプリケーションを作成します。

作業テナント: SP テナント
[Dashboard] > [Applications] > [Applications] に移動し、[Create Application] を選択します。
アプリケーション名を入力し、アプリケーションタイプとして [Regular Web Application] を選択し、 [Create] を選択します。

Domain および Client ID の値をコピーして保存します。

Allowed Callback URLs フィールドを探し、http://jwt.io と入力します。Allowed Callback URLs は、認証後にユーザがリダイレクトされる、許可されたコールバック URL のリストです。 ここに入力する URL は、次のステップで作成する HTML コードのコールバック URL と一致する必要があります。 通常はアプリケーションの URL (http://localhost:8080 等) を入力します。この例では http://jwt.io を入力することで、テストユーザーはログイン後に jwt.io にリダイレクトし、認証シーケンスの最後に返される JWT に関する情報が表示されるようにします。
[Connections] ビューに切り替えて、[Enterprise] セクションで作成した SAML Connection を見つけ、それを有効にします。

項番
画面

4

5

 SP と IdP 間の接続テストSP テナントと IdP テナント間の SAML 構成が動作することをテストします。

作業テナント: SP テナント
[Dashboard] > [Authentication] > [Enterprise] に進み、[SAML] を選択します。
作成した SAML Connection を探し、[Try] 矢印アイコンを選択します。 この Connection をテストしている間に以前にログインしているため、"It works!" 画面に直接送られるはずです。 もしログイン画面が表示されたら、テストユーザーの認証情報を使ってログインします。

項番
画面

2

構成が正しく設定されている場合、"It works!" と表示され、IdP テナントから Auth0 テナントに送信された SAML 認証アサーションの内容がページに表示されます。

SAML でログインしたので、sub の値 (ユーザー ID) が samlp|{yourConnectionName} から始まっています。また、続く auth0|~ の値は最初に IdP テナントで登録したユーザー ID となっていることが確認できます。

IdP テナント側に登録したユーザー
構成が正しく設定されていない場合は、手順を再確認してください。それでも問題が解決しない場合は、公式ドキュメントのトラブルシューティングセクションを参照してください。
参考

・Troubleshoot test scenario

 テストアプリケーション用のウェブページを作成するSAML ログインシーケンスを実行するシンプルな Web ページを作成します。
HTML ファイルを作成し、以下の HTML および JavaScript コードを挿入します。 {yourClientId} および {yourDomain} を、SP テナントで登録したアプリケーションの値に置き換えます。

今回は　redirectUri に http://jwt.io を入力します。
 index.html
<!DOCTYPE html>
<html lang="en">
  <body>
    <button type="button" onclick="login()">Log in</button>
    <script src="https://cdn.auth0.com/js/auth0/9.19.0/auth0.min.js"></script>
    <script>
      var auth0 = new auth0.WebAuth({
        domain: YOUR_AUTH0_DOMAIN,
        clientID: YOUR_CLIENT_ID,
        redirectUri: URL_TO_THIS_PAGE,
        responseType: "token id_token",
        scope: "openid email profile",
      });

      auth0.parseHash(function (err, data) {
        if (err) {
          console.log(err);
        }

        if (data) {
          console.log("Login successful!");
          console.log(data);
        }
      });

      window.login = function () {
        auth0.authorize();
      };
    </script>
  </body>
</html>

audience はプレースホルダでも動作します。 audience パラメータを指定する場合は、Auth0 で設定した既存の API の識別子と一致していることを確認します。
ブラウザからアクセスできる場所に HTML ファイルを保存します。

 サンプルアプリケーションのテストSP テナントで作成した Auth0 SAML Connection を使用して、IdP テナントに対して SSO 認証を実行するサンプル HTML アプリケーションをテストします。
上記で作成した HTML ファイルをブラウザで開きます。一例として、Node.js の HTTP サーバ (npm install -g http-server) を使用する場合、http-server コマンドを実行して http://localhost:8080 にアクセスします。
ブラウザからアクセスし、ログインをクリックします。ユニバーサルログイン画面に SAML ログインのオプションが表示されます。アプリケーションで他の Connection をオンにしている場合、画面の表示が異なることがあります。
[SAML] と表示されるボタンをクリックします。認証情報の入力を求められるか、すぐにコールバック URL にリダイレクトされるかは、まだアクティブなセッションがあるかどうかによって異なります。
ログインに成功した場合、jwt.io にリダイレクトして ID トークンの内容が表示されます。jwt.io は Auth0 から発行されたトークンが入力された場合、自動で Auth0 の JWKS エンドポイントから公開鍵を取得して入力された JWT を検証します。

項番
画面

2

サンプルログインページ

2,3

SP テナントのログイン画面 で SAML を選択する

3

IdP テナントにリダイレクトするので、最初に作成したユーザーでログインする

4

jwt.io での表示の一例
自動で検証され、Signature Verified と表示されている

サンプルアプリケーションの作成を通して、以下のことが確認できました。
IdP としての Auth0 テナントの設定
SP としての Auth0 テナントの設定
IdP テナントに作成したユーザーで SP テナントへのログイン
ログイン後に JWT が発行され、検証可能であること

 5. その他Auth0 は SLO (Single Log Out) が可能で、Auth0 と IdP どちらともログアウトするような構成が可能です。
Auth0 は SCIM (System for Cross-domain Identity Management) に対応し、IdP 側のユーザーライフサイクルと連携させることが可能です。
参考

・Log Users Out of SAML Identity Providers

・System for Cross-domain Identity Management (SCIM)

 6. 注意点SAML Connection は Enterprise プランで使用可能です。他のプランでは使用できないため、注意してください。
SAML Connection では、使用する X.509 証明書の有効期限に注意して適切に管理するようにします。期限が切れてしまうと、SSO が機能しなくなります。

 7. まとめ本記事では、Auth0 で OIDC と SAML を導入する方法について確認しました。

基本的な手順は Identity Platform と大きく変わらず、より高機能である印象でした。
この記事が、IDaaS 導入の際の検討の一助になれば幸いです。

ここまで読んでいただき、ありがとうございました。

 IDaaS 関連記事Identity Platform 関連記事

https://zenn.dev/cloud_ace/articles/6d8d1502d3c90f

https://zenn.dev/cloud_ace/articles/9b47b0dab6d3ab

https://zenn.dev/cloud_ace/articles/c65abf3ca87336

https://zenn.dev/cloud_ace/articles/253178c575ded7

https://zenn.dev/cloud_ace/articles/16d08bfe8daef4
Auth0 関連記事

https://zenn.dev/cloud_ace/articles/bfff5ad2a58d1a
項番	画面
2	Application の作成
4	証明書のダウンロード
5	SAML Protocol URL のコピー
項番	画面
2	サンプルログインページ
2,3	SP テナントのログイン画面で SAML を選択する
3	IdP テナントにリダイレクトするので、最初に作成したユーザーでログインする
4	jwt.io での表示の一例自動で検証され、`Signature Verified` と表示されている
Setting	Description
Connection Name	`SAML-Auth0-IDP` など、任意の名前を入力する。
Sign In URL	IdP テナントでコピーした `SAML Protocol URL` 値を入力する。
X509 Signing Certificate	[Choose File] ボタンをクリックし、IdP テナントでダウンロードした `.pem` ファイルを選択します。
項番	画面
4	表示されている URL にアクセス
5	遷移先のページに記載されている値を保存
項番	画面
2	成功時の画面
3	`Entity ID` と等しいことを確認
1. はじめに

2. 用語

3. OIDC プロバイダの設定方法

アプリケーションとの統合

4. SAML プロバイダの設定方法

IdP テナントの設定

SAML シーケンスをテストするユーザを作成する

SP テナントの設定

SP テナントのメタデータを IdP テナントに追加する

IdP をテストする

SAML Connection をテストするアプリケーションを作成する

SP と IdP 間の接続テスト

テストアプリケーション用のウェブページを作成する

サンプルアプリケーションのテスト

5. その他

6. 注意点

7. まとめ

IDaaS 関連記事

Discussion
