透過 Cordova 使用 OAuth 提供者進行驗證

有了 Firebase JS SDK，您就可以讓 Firebase 使用者透過任何 Cordova 環境中支援 OAuth 供應商。您可以整合 使用 Firebase SDK 執行 登入流程，也可以手動執行 OAuth 流程，然後將 導致 Firebase 的 OAuth 憑證。

為 Cordova 設定 Firebase 驗證

  1. 將 Firebase 新增至您的 JavaScript 專案。新增 Firebase 程式碼片段，記下 authDomain 設定變數。 看起來應該像 my-app.firebaseapp.com。如果使用自訂網域 而不是 Firebase 佈建的 firebaseapp.com 網域，也就是自訂的 網域。

  2. 如要設定 Android 應用程式，請將您的 Android 應用程式新增至 Firebase 控制台 並輸入應用程式詳細資料您不需要 google-services.json。

  3. 如要設定 iOS 應用程式，請建立 iOS 應用程式，並加到 Firebase 控制台：稍後需新增 iOS 軟體包 ID 安裝自訂網址配置外掛程式。

  4. 啟用 Firebase Dynamic Links：

    1. 在 Firebase 控制台開啟「Dynamic Links」部分。

    2. 如果您尚未接受 Dynamic Links 條款並建立 Dynamic Links 網域，請立即採取相關行動。

      若您已建立 Dynamic Links 網域，請記下該網域。動態連結 網域通常如下所示：

      example.page.link

      將 Apple 或 Android 應用程式設為 攔截傳入連結。

  5. 在 Firebase 控制台中啟用 Google 登入：

    1. 在 Firebase 控制台開啟「驗證」專區。
    2. 在「Sign in method」分頁中啟用 Google 登入方���，並 然後按一下「儲存」。

  6. 在 Cordova 專案中安裝必要的外掛程式。

    # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
cordova plugin add cordova-plugin-buildinfo --save
# Plugin to handle Universal Links (Android app link redirects)
cordova plugin add cordova-universal-links-plugin-fix --save
# Plugin to handle opening secure browser views on iOS/Android mobile devices
cordova plugin add cordova-plugin-browsertab --save
# Plugin to handle opening a browser view in older versions of iOS and Android
cordova plugin add cordova-plugin-inappbrowser --save
# Plugin to handle deep linking through Custom Scheme for iOS
# Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
cordova plugin add cordova-plugin-customurlscheme --variable \
    URL_SCHEME=com.firebase.cordova --save

  7. 將以下設定新增至 Cordova config.xml 檔案，其中 AUTH_DOMAIN 是步驟 (1) 中的網域，DYNAMIC_LINK_DOMAIN 則是 網域。

    <universal-links>
    <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
    <host name="AUTH_DOMAIN" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    設定範例如下：

    <universal-links>
    <host name="example.page.link" scheme="https" />
    <host name="example-app.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    如果已有自訂網域「auth.custom.domain.com」，請替換成其他網域 my-app.firebaseapp.com。

    Android 應用程式 singleTask 應用於 launchMode。

    <preference name="AndroidLaunchMode" value="singleTask" />

使用 Firebase SDK 處理登入流程

  1. Firebase 驗證需要有 deviceReady 事件才能判斷 正確目前的 Cordova 環境確認 Firebase 應用程式執行個體 就會初始化。

  2. 建立 Google 提供者物件的執行個體：

    Web

    import { GoogleAuthProvider } from "firebase/auth/cordova";

const provider = new GoogleAuthProvider();
    auth_create_google_provider.js

    Web

    var provider = new firebase.auth.GoogleAuthProvider();
    cordova.js

  3. 使用以下方式，使用 Google 供應商物件向 Firebase 進行驗證： signInWithRedirect。請注意，signInWithPopup 是 但在 Cordova。

    Web

    import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
signInWithRedirect(auth, new GoogleAuthProvider())
  .then(() => {
    return getRedirectResult(auth);
  })
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_cordova_sign_in_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider).then(() => {
  return firebase.auth().getRedirectResult();
}).then((result) => {
  /** @type {firebase.auth.OAuthCredential} */
  var credential = result.credential;

  // This gives you a Google Access Token.
  // You can use it to access the Google API.
  var token = credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
});
    cordova.js

  4. 處理應用程式活動在登入前遭到刪除的情況 作業完成，請在應用程式時呼叫 getRedirectResult 載入。

    Web

    import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    if (credential) {        
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      const token = credential.accessToken;
      // The signed-in user info.
      const user = result.user;
      // ...
    }
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_cordova_redirect_result.js

    Web

    firebase.auth().getRedirectResult().then((result) => {
  if (result.credential) {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    var token = credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // ...
  }
}).catch((error) => {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
});
    cordova.js

    您也可以透過相同機制連結新的供應商 linkWithRedirect或透過現有的供應商重新驗證 使用 reauthenticateWithRedirect。