Identity Platform으로 여러 테넌트용 로그인 페이지 만들기

이 페이지에서는 오픈소스 기반의 사전 빌드된 UI 구성요소 모음인 FirebaseUI과 클라이언트 SDK를 사용하여 Identity Platform의 여러 테넌트용 로그인 페이지를 빌드하는 방법을 보여줍니다.

시작하기 전에

  1. 멀티테넌시를 사용 설정하고 2개 이상의 테넌트를 만듭니다.
  2. 각 테넌트의 ID 공급업체를 구성합니다.

구성요소 가져오기

페이지의 <head> 요소에 UI 스크립트, 클라이언트 SDK, CSS 파일을 추가하여 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를 빌드해야 합니다.

버튼 두 개를 사용하여 기본 테넌트 선택 페이지를 빌드하려면 다음 단계를 따르세요.

  1. 두 개의 테넌트 선택 요소를 만듭니다.

    <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>

  2. FirebaseUI의 컨테이너 요소를 만듭니다.

    <div id="firebaseui-auth-container"></div>

  3. 각 테넌트에 대한 구성을 만듭니다.

    <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>

  4. 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>

  5. 앱을 시작합니다. 두 개의 테넌트 버튼이 있는 로그인 화면이 표시됩니다.

여러 페이지로 구성된 워크플로를 만들 수도 있습니다. 예를 들어 첫 번째 페이지에서 사용자에게 이메일을 묻고 다음 페이지에서 테넌트를 선택할 수 있는 워크플로를 만들 수 있습니다. 또한 각 테넌트마다 별도의 로그인 페이지를 호스팅할 수 있습니다. 이렇게 하려면 URL에서 테넌트 ID를 파싱한 다음 Auth 객체에서 설정해야 합니다.

다음 단계