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 を使用して少なくとも 1 つのログイン方式を有効にします。その方法については、クイックスタートをご覧ください。

  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 コンポーネントに関するドキュメントをご覧ください。

次のステップ