透過 FirebaseUI 輕鬆將登入程序新增至網頁應用程式

FirebaseUI 是以 Firebase Authentication SDK 上方提供了直接的 UI 流程， FirebaseUI 具備下列優點：

  • 多個供應商：電子郵件/密碼、電子郵件連結、電話的登入流程 驗證、Google、Facebook、Twitter 及 GitHub 登入。
  • 帳戶連結：跨身分安全連結使用者帳戶的程序 以滿足需求
  • 自訂：根據應用程式覆寫 FirebaseUI 的 CSS 樣式 Google Cloud 就是最佳選擇此外，由於 FirebaseUI 是開放原始碼，因此您可以將 並根據需求加以自訂
  • 一鍵註冊和自動登入 - 自動與 一鍵註冊 快速跨裝置登入。
  • 本地化 UI - 針對超過 40 種應用程式國際化 語言。
  • 升級匿名使用者 - 可透過 登入/註冊。詳情請參閱「升級匿名使用者 專區。
，瞭解如何調查及移除這項存取權。

事前準備

  1. 將 Firebase 驗證新增至網頁應用程式。 確認您使用的是第 9 版相容性 (建議做法) 以上的 SDK (請參閱 。

  2. 透過下列其中一個選項納入 FirebaseUI：

    1. CDN

      在 <head> 中加入下列指令碼和 CSS 檔案的標記 位於 Firebase 控制台的初始化程式碼片段下方：

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

    2. npm 模組

      使用下列指令，透過 npm 安裝 FirebaseUI 及其依附元件 指令：

      $ npm install firebaseui --save

      require 來源檔案中的下列模組：

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. 布林值元件

      使用下列方法，透過 Bower 安裝 FirebaseUI 及其依附元件 指令：

      $ bower install firebaseui --save

      如果 HTTP 伺服器 bower_components/中的檔案：

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

初始化 FirebaseUI

匯入 SDK 後，請初始化驗證 UI。

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

設定登入方式

您必須先啟用並設定 Firebase 所需的 要使用的登入方式。

電子郵件地址和密碼

  1. 在 Firebase 控制台中開啟「驗證」部分，然後啟用 電子郵件和密碼驗證。

  2. 將電子郵件供應商 ID 新增至 FirebaseUI signInOptions 清單。

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. 選用：您可以將 EmailAuthProvider 設為須要求使用者操作 輸入顯示名稱 (預設為 true)。

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. 在 Firebase 控制台中開啟「驗證」專區。每月中的特定幾天 「Sign in method」分頁，啟用「Email/Password」供應商。注意事項 必須啟用電子郵件/密碼登入功能才能使用電子郵件連結登入。

  2. 在同一部分中啟用「電子郵件連結 (無密碼登入)」登入功能 方法並點選「儲存」。

  3. 將電子郵件供應商 ID 加進 FirebaseUI signInOptions 清單 (電子郵件連結：signInMethod)。

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  4. 有條件地轉譯登入 UI (與單一頁面應用程式相關) 使用 ui.isPendingRedirect() 偵測網址是否對應到登入活動 並顯示電子郵件連結和 UI，才能完成登入。

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  5. 選用：登入電子郵件連結的 EmailAuthProvider 可以是 允許或禁止使用者完成跨裝置登入程序。

    可定義選用的 emailLinkSignIn 回呼，傳回 firebase.auth.ActionCodeSettings 以及傳送連結時使用的設定這樣一來，您就能 指定處理連結的方式、自訂動態連結、其他狀態 如未提供，系統會採用目前的網址和網路 且只會觸發流程

    FirebaseUI 網頁版的電子郵件連結登入功能與 FirebaseUI-Android 版 和 FirebaseUI-iOS 在 FirebaseUI-Android 啟動流程的使用者可開啟連結 並透過 FirebaseUI-web 完成登入。相反地 流程

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

OAuth 提供者 (Google、Facebook、Twitter 和 GitHub)

  1. 在 Firebase 控制台中開啟「驗證」部分，然後啟用 指定的 OAuth 供應商登入資訊。請確認對應的 OAuth 也會指定用戶端 ID 和密鑰。

  2. 同樣在「驗證」部分中，請確認 登入頁面也會加入授權網域清單。

  3. 將 OAuth 供應商 ID 新增至 FirebaseUI signInOptions 清單。

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. 選用：如要指定自訂範圍或每個自訂 OAuth 參數， 提供者，您可以傳遞物件，而不只是提供提供者值：

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

電話號碼

  1. 在 Firebase 控制台中開啟「驗證」部分，然後啟用 電話號碼登入。

  2. 確保會同時顯示登入頁面的網域 必須加入授權網域清單

  3. 將電話號碼供應商 ID 加入 FirebaseUI signInOptions 清單中。

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. 選用：您可以使用自訂 reCAPTCHA 設定 PhoneAuthProvider 參數代表 reCAPTCHA 是否可見 (預設為一般)。 詳情請參閱 reCAPTCHA API 說明文件 ，掌握更多詳細資訊。

    你也可以設定電話號碼輸入欄位的預設國家/地區。 詳情請參閱 支援的國家/地區代碼清單 。 如果未指定，電話號碼輸入將預設為美國 (+1)。

    以下是目前支援的選項。

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

登入

如要啟動 FirebaseUI 登入流程，請透過下列方式初始化 FirebaseUI 執行個體： 傳遞基礎 Auth 例項

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

定義要轉譯 FirebaseUI 登入小工具的 HTML 元素。

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

指定 FirebaseUI 設定 (支援的供應商和 UI 自訂項目) 以及成功回呼等)。

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-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
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

最後，算繪 FirebaseUI 驗證介面：

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

升級匿名使用者

啟用匿名使用者升級

當匿名使用者以永久帳戶登入或註冊時， ，確保使用者可以繼續完成註冊前執行的動作。 如要這麼做，只要在設定 autoUpgradeAnonymousUsers 時將 autoUpgradeAnonymousUsers 設為 true 登入使用者介面 (這個選項預設為停用)。

處理匿名使用者升級合併衝突

在某些情況下，使用者一開始以匿名方式登入，嘗試升級 現有 Firebase 使用者因為現有使用者無法連結其他使用者 FirebaseUI 則會運用signInFailure 錯誤代碼 firebaseui/anonymous-upgrade-merge-conflict。 錯誤物件也會包含永久憑證。使用 永久憑證必須在回呼中觸發，才能完成登入程序。 登入前，必須先透過下列方式完成： auth.signInWithCredential(error.credential)，必須儲存匿名資料 刪除使用者的資料，以及刪除匿名使用者。登入完成後 將資料傳回非匿名使用者的資料以下範例會說明 確保流程順暢無阻

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

後續步驟

  • 如要進一步瞭解如何使用及自訂 FirebaseUI，請造訪 README：
  • 如果您在 FirebaseUI 中發現問題並想要回報，請使用 GitHub 問題追蹤工具。