はじめに

この記事はAuth0を使ってSAML Service ProviderとIdentity Providerの環境を構築する手順です。Auth0はSAML SP/IdPのどちらでも機能することが可能で様々なSAMLのユースケースに対応できます。

検証環境

• OS : macOS Catalina 10.15.2
• node : 10.15.3
• npm : 6.13.2

手順

IdP側その1

Auth0のダッシュボードから"Create tenant"を選択して新しいIdP用のテナントを作成します。

左ペインの"Applications"をクリックして右上の"CREATE APPLICATION"を押します。

"Name"に任意の名前を入力して"Choose an application type"で"Regular Web Applications"を選択して"CREATE"を押します。

"Settings"タブの下にある"Show Advanced Settings"をクリック、"Endpoints"タブの"SAML Protocol URL"をクリップボードにコピーします。
このURLをSP側に登録します。

"Certificates"タブをクリックして”DOWNLOAD CERTIFICATE”を押して公開鍵をダウンロードします。
この公開鍵をSP側に登録します。

SP側その1

IdP側その1と同じ手順でIdP用のテナントを作成します。詳細な手順は割愛しています。

左ペインの"Connections"->"Enteprise"をクリックして"SAML"の"＋"をクリックします。

"Connection name"に任意の名前を入力、"Sign In URL", "Sign Out URL"にIdP側その1でクリップボードにコピーしたURLを入力します。"X509 Signing Certificate"にIdP側その1でダウンロードした公開鍵をアップロード、その他の項目は全てデフォルトで下の"SAVE CHANGES"を押します。　

IdP側その2

作成したApplicationをクリックして”Addons”タブから"SAML2 WEB APP"フリップスイッチをオンにします。

"Applicai¥tion Callback URL"にhttps://SPのテナント名.auth0.com/login/callback?connection=SAMLコネクション名を入力します。
例 : https://pannacotta.auth0.com/login/callback?connection=saml-cookiegaugau
"Settings"に"audience": "urn:auth0:SPのテナント名:SAMLコネクション名"を入力して下の"SAVE CHANGES"を押します。
例 : "audience": "urn:auth0:pannacotta:saml-cookiegaugau"

Applicationの登録

左ペインの"Applications"をクリックして右上の"CREATE APPLICATION"を押します。

"Name"に任意の名前を入力、"Choose an application type"で"Simgle Page Web Applications"を選択して”CREATE”を押します。

"Settings"タブをクリックして"Allowed Callback URLs", "Allowed Web Origins", "Allowed Logout URLs"に"http://localhost:3000"を入力して画面下の"SAVE CHANGES"を押します。
Auth0で認証が成功した際やApplicationからログアウトした際にコールバックできるURLを指定しています。

ApplicationのGitHubリポジトリをローカルPCにクローンします。
Auth0は65以上の言語やフレームワークに対応したSDK、それらのSDKを利用したサンプルアプリケーションをGitHubに公開しています。一から実装する必要は無いのでそれらを検索して利用して下さい。

$ git clone https://github.com/auth0-samples/auth0-react-samples.git

auth0-react-samples/01-Login/srcに移動します。

$ cd auth0-react-samples/01-Login/src

auth_config.json.exampleをコピーしてauth_config.jsonを作成します。

$ cp auth_config.json.example auth_config.json

auth_copnfig.jsonを編集します。
"clientID"は"Appications"->"作成したApplication"->"Settings"から確認できます。

{
  "domain": "kiriko.auth0.com",
  "clientId": "xxxx"
}

auth0-react-samples/01-Loginに移動します。

$ cd auth0-react-samples/01-Login

npm installを実行して必要なパッケージをインストールします。

$ npm install

npm startを実行してApplicationを起動します。

$ npm start

Chromeでhttp://localhost:3000にアクセスして右上の"Log in"を押します。
手順通りに設定していればAuth0　のUniversal Login画面が表示されます。

SP側その2

SP側その1で作成したSAML Connectionをクリック、”IdP-initiated SSO”タブをクリックして"Default Application"に登録したApplicationを選択して”SAVE CHANGES”を押します。
SAMLをOIDCに変換してIdP-initiated SSOの中間者攻撃によるリスクを回避しています。

動作確認

SP側のDashboardからApplicationの登録で作成したApplicationをクリックして"Connections"を選択、作成したSAMLのフリップスイッチをオンにしてその他のConnectionsのフリップスイッチをオフにします。

Chromeでhttp://localhost:3000にアクセスして右上の"Log in"を押します。"Log in at xxxx"ボタンを押してユーザをサインアップします。

SP側のDashboard左ペインの"Users&Roles"->"Users"に作成したSAMLコネクションでサインアップしたユーザが表示されていれば成功です。

参考

SAML認証はどのように機能するか？