透過 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 應用程式，請在 Firebase控制台中新增 Android 應用程式 並輸入應用程式詳細資料您不需要 google-services.json。

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

4. 啟用 Firebase Dynamic Links：

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

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

      如果您已建立 Dynamic Links 網域，請記下該網域。Dynamic Links 網域通常如下所示：

      example.page.link

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

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

   1. 在 Firebase 控制台中開啟「Auth」專區。
   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" />
   

，瞭解如何調查及移除這項存取權。

注意： 如果您使用 Ionic 架構，則該架構的最新版本 應該使用，確保應用程式是由 file:// 或 ionic:// 配置。你必須完成這個步驟，Firebase Auth 才能 正確處理 signInWithRedirect 作業。Firebase Auth 會將 http://localhost 來源顯示為網路瀏覽器應用程式 (即使轉譯為網頁式瀏覽器應用程式) 部署於 Cordova 環境

使用 Firebase SDK 處理登入流程

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

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

   Web

   瞭解詳情 進一步瞭解可樹狀結構的模組化 Web API 升級 新增命名空間

   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

   瞭解詳情 進一步瞭解可樹狀結構的模組化 Web API 升級 新增命名空間

   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

   瞭解詳情 進一步瞭解可樹狀結構的模組化 Web API 升級 新增命名空間

   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。