웹 앱에 Identity Platform UI 요소 통합

이 가이드에서는 Identity Platform에서 제공하는 사용자 인터페이스(UI)를 기존 웹 앱에 통합하는 방법을 보여줍니다.

시작하기 전에

이 가이드를 완료하려면 다음이 필요합니다.

다른 클라이언트를 위한 오픈소스 UI 구성요소

이 도움말에서는 UI 구성요소를 웹 앱에 통합하는 방법을 설명합니다. 다른 앱 유형은 다음 자료를 참조하세요.

UI 구성요소를 앱에 통합

  1. 페이지의 <head> 태그에서 CDN의 UI 스크립트와 CSS를 추가합니다.


    <script src="https://cdn.firebase.com/libs/firebaseui/5.8.2/firebaseui.js"></script>
    <link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/5.8.2/firebaseui.css" />
    
  2. Cloud Console을 사용하여 하나 이상의 로그인 방식을 사용 설정합니다. 자세한 방법은 빠른 시작을 참조하세요.

  3. 페이지의 <head> 태그에서 사용자가 로그인할 수 있는 방법을 구성합니다.

    <script>
    // UI Configuration
    var uiConfig = {
     signInSuccessUrl: '[URL_TO_REDIRECT_ON_SIGNIN_SUCCESS]',
     signInOptions: [
       // Leave the lines as is for the providers you want to offer your users.
       firebase.auth.GoogleAuthProvider.PROVIDER_ID,
       firebase.auth.FacebookAuthProvider.PROVIDER_ID,
       firebase.auth.TwitterAuthProvider.PROVIDER_ID,
       firebase.auth.GitHubAuthProvider.PROVIDER_ID,
       firebase.auth.EmailAuthProvider.PROVIDER_ID,
       firebase.auth.PhoneAuthProvider.PROVIDER_ID,
       firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
     ],
     // 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]');
     }
    };
    
    // Initialize the UI Components.
    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    // The start method will wait until the DOM is loaded.
    ui.start('#firebaseui-auth-container', uiConfig);
    </script>
    
  4. 페이지의 <body> 요소에 UI 위젯을 삽입합니다.

    <body>
    <!-- The surrounding HTML is left untouched. Your app can use that space for branding, controls and other customizations.-->
    <h1>Welcome to [APP_NAME]</h1>
    <div id="firebaseui-auth-container"></div>
    </body>
    

    페이지를 렌더링할 때 Identity Platform에서 제공하는 UI가 나타나고 사용자가 앱에 로그인할 수 있습니다.

맞춤설정에 대한 자세한 내용은 GitHub의 UI 구성요소 문서를 참조하세요.

다음 단계