將 Identity Platform UI 元素整合至網頁應用程式

本指南說明如何將 Identity Platform 提供的使用者介面 (UI) 整合至現有的網頁應用程式。

事前準備

如要完成本指南，您需要：

其他用戶端的開放原始碼 UI 元件

本文說明如何將 UI 元件整合至網路應用程式。如需其他應用程式類型，請參閱以下頁面：

將 UI 元件整合至應用程式

  1. 在網頁的 <head> 標記中加入 CDN 中的 UI 指令碼和 CSS。


    <script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />

  2. 使用 Google Cloud 控制台啟用至少一種登入方式。如要瞭解如何操作，請參閱快速入門。

  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 元件說明文件。

後續步驟