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

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

이 가이드에서 설명하는 단계를 보여주는 샘플 코드는 GitHub에서 확인할 수 있습니다.

시작하기 전에

  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. 앱을 시작합니다. 두 개의 테넌트 버튼이 있는 로그인 화면이 표시됩니다.

이 예시에서는 두 개의 단순한 버튼과 단일 페이지를 사용하지만 다양한 UX 흐름을 사용할 수 있습니다. 예를 들어 사용자에게 한 페이지에 이메일을 입력하고 테넌트 선택 화면을 표시하도록 요청할 수 있습니다. 각 테넌트마다 별도의 로그인 페이지를 호스팅할 수도 있습니다. 이 경우 URL에서 테넌트 ID를 파싱한 다음 Auth 객체에서 설정해야 합니다.

다음 단계