複数のテナント向けのログインページの作成
このドキュメントでは、オープンソースのコレクションである FirebaseUI、事前に作成された UI コンポーネント、Client SDK を使用して、Identity Platform のテナント固有のログイン ページを作成する方法について説明します。
このチュートリアルで説明する手順を示すサンプルコードは GitHub で入手できます。
始める前に
コンポーネントの取得
UI スクリプト、Client SDK、CSS ファイルをページの <head>
要素に追加すると、CDN から直接取得できます。
<script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-auth.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.js"></script>
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.css" />
または、npm
を使用してモジュールをインストールし、ES6 インポートとして参照することもできます:
npm install firebase --save && \
npm install firebaseui --save
// Import Firebase JS SDK.
import * as firebase from "firebase/app";
import "firebase/auth";
import * as firebaseui from 'firebaseui'
テナント選択 UI の作成
FirebaseUI はログインフローのみを処理します。ユーザーがログインに使用するテナントを選択できるように、独自の UI を構築する必要があります。次の手順では、2 つのボタンがあるシンプルなテナント選択ページを作成する方法について説明します。
2 つのテナント選択要素を作成します。
<div id="tenant-selection-buttons"> <button id="tenant1-select-button" data-val="tenantId1">Display name of Tenant 1</button> <button id="tenant2-select-button" data-val="tenantId2">Display name of Tenant 2</button> </div>
FirebaseUI のコンテナ要素を作成します。
<div id="firebaseui-auth-container"></div>
テナントごとに構成を作成します。
<script> var uiConfigs = { 'TENANT_ID1': { 'signInOptions': [firebase.auth.EmailAuthProvider.PROVIDER_ID], 'credentialHelper': 'none', 'signInFlow': 'popup', 'callbacks': { 'signInSuccessWithAuthResult': function(authResult, redirectUrl) { // The sign in success callback. return false; } }, // tosUrl and privacyPolicyUrl accept either url string or a callback // function. // Terms of service url/callback. tosUrl: '[YOUR_TOS_URL]', // Privacy policy url/callback. privacyPolicyUrl: function() { window.location.assign('[YOUR_PRIVACY_POLICY_URL]'); } }, 'TENANT_ID2': { 'signInOptions': [firebase.auth.GoogleAuthProvider.PROVIDER_ID], 'credentialHelper': 'none', 'signInFlow': 'popup', 'callbacks': { 'signInSuccessWithAuthResult': function(authResult, redirectUrl) { // The sign in success callback. return false; } }, // tosUrl and privacyPolicyUrl accept either url string or a callback // function. // Terms of service url/callback. tosUrl: '[YOUR_TOS_URL]', // Privacy policy url/callback. privacyPolicyUrl: function() { window.location.assign('[YOUR_PRIVACY_POLICY_URL]'); } } }; </script>
テナント選択クリック ハンドラを追加して、FirebaseUI でログイン コンポーネントをレンダリングします。UI コンポーネントをレンダリングする前に、
Auth
インスタンスにテナント ID を設定する必要があります。<script> var ui = new firebaseui.auth.AuthUI(firebase.auth()); tenantSelectionButton.addEventListener('click', (e) => { var tenantId = e.target.getAttribute('data-val'); firebase.auth().tenantId = tenantId; ui.reset(); ui.start('#firebaseui-auth-container', uiConfigs[tenantId]); }); </script>
アプリを起動します。2 つのテナント ボタンがあるログイン画面が表示されます。
この例では、2 つのシンプルなボタンと 1 つのページを使用しますが、さまざまな UX フローが可能です。たとえば、1 つのページにメールアドレスを入力してからテナント選択画面を表示するようユーザーに依頼できます。テナントごとに個別のログインページをホストすることもできます。この場合は、URL からテナント ID を解析して、Auth
オブジェクトに設定する必要があります。