在 JavaScript 中使用 Twitter 進行身份驗證

您可以通過將 Twitter 身份驗證集成到您的應用中，讓您的用戶使用他們的 Twitter 帳戶向 Firebase 進行身份驗證。您可以通過使用 Firebase SDK 執行登錄流程或手動執行 Twitter OAuth 流程並將生成的訪問令牌和密鑰傳遞給 Firebase 來集成 Twitter 身份驗證。

在你開始之前

1. 將 Firebase 添加到您的 JavaScript 項目中。
2. 在Firebase 控制台中，打開Auth部分。
3. 在登錄方法選項卡上，啟用Twitter提供程序。
4. 將該提供者的開發者控制台中的API 密鑰和API密鑰添加到提供者配置中：
   1. 在 Twitter 上將您的應用程序註冊為開發者應用程序並獲取您的應用程序的 OAuth API 密鑰和API 密鑰。
   2. 確保您的 Firebase OAuth 重定向 URI （例如my-app-12345.firebaseapp.com/__/auth/handler ）在Twitter 應用的 config的應用設置頁面中設置為您的授權回調 URL 。
5. 單擊保存。

使用 Firebase SDK 處理登錄流程

如果您正在構建一個網絡應用程序，那麼使用他們的 Twitter 帳戶通過 Firebase 對您的用戶進行身份驗證的最簡單方法是使用 Firebase JavaScript SDK 處理登錄流程。 （如果要在 Node.js 或其他非瀏覽器環境中對用戶進行身份驗證，則必須手動處理登錄流程。）

要使用 Firebase JavaScript SDK 處理登錄流程，請按以下步驟操作：

1. 創建 Twitter 提供者對象的一個實例：

   Web version 9

   import { TwitterAuthProvider } from "firebase/auth";
   
   const provider = new TwitterAuthProvider();
   auth_twitter_provider_create.js

   Web version 8

   var provider = new firebase.auth.TwitterAuthProvider();
   twitter.js

2. 可選：要將提供者的 OAuth 流程本地化為用戶的首選語言，而不顯式傳遞相關的自定義 OAuth 參數，請在啟動 OAuth 流程之前更新 Auth 實例上的語言代碼。例如：

   Web version 9

   import { getAuth } from "firebase/auth";
   
   const auth = getAuth();
   auth.languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   auth_set_language_code.js

   Web version 8

   firebase.auth().languageCode = 'it';
   // To apply the default browser preference instead of explicitly setting it.
   // firebase.auth().useDeviceLanguage();
   index.js

3. 可選：指定要與 OAuth 請求一起發送的其他自定義 OAuth 提供程序參數。要添加自定義參數，請使用包含 OAuth 提供程序文檔指定的鍵和相應值的對像對已初始化的提供程序調用setCustomParameters 。例如：

   Web version 9

   provider.setCustomParameters({
     'lang': 'es'
   });
   auth_twitter_provider_params.js

   Web version 8

   provider.setCustomParameters({
     'lang': 'es'
   });
   twitter.js

   不允許保留所需的 OAuth 參數，將被忽略。有關更多詳細信息，請參閱身份驗證提供程序參考。
4. 使用 Twitter 提供程序對象向 Firebase 進行身份驗證。您可以通過打開一個彈出窗口或重定向到登錄頁面來提示您的用戶使用他們的 Twitter 帳戶登錄。重定向方法在移動設備上是首選。
   • 要使用彈出窗口登錄，請調用signInWithPopup ：

     Web version 9

     import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then((result) => {
         // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
         // You can use these server side with your app's credentials to access the Twitter API.
         const credential = TwitterAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
         const secret = credential.secret;
     
         // The signed-in user info.
         const user = result.user;
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = TwitterAuthProvider.credentialFromError(error);
         // ...
       });
     auth_twitter_signin_popup.js

     Web version 8

     firebase
       .auth()
       .signInWithPopup(provider)
       .then((result) => {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
     
         // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
         // You can use these server side with your app's credentials to access the Twitter API.
         var token = credential.accessToken;
         var secret = credential.secret;
     
         // The signed-in user info.
         var user = result.user;
         // ...
       }).catch((error) => {
         // Handle Errors here.
         var errorCode = error.code;
         var errorMessage = error.message;
         // The email of the user's account used.
         var email = error.email;
         // The firebase.auth.AuthCredential type that was used.
         var credential = error.credential;
         // ...
       });
     twitter.js

     另請注意，您可以檢索 Twitter 提供者的 OAuth 令牌，該令牌可用於使用 Twitter API 獲取其他數據。

     這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表，請查看Auth Reference Docs 。

   • 要通過重定向到登錄頁面進行登錄，請調用signInWithRedirect ：

     Web version 9

     import { getAuth, signInWithRedirect } from "firebase/auth";
     
     const auth = getAuth();
     signInWithRedirect(auth, provider);
     auth_signin_redirect.js

     Web version 8

     firebase.auth().signInWithRedirect(provider);
     index.js

     然後，您還可以通過在頁面加載時調用getRedirectResult來檢索 Twitter 提供者的 OAuth 令牌：

     Web version 9

     import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     getRedirectResult(auth)
       .then((result) => {
         // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
         // You can use these server side with your app's credentials to access the Twitter API.
         const credential = TwitterAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
         const secret = credential.secret;
         // ...
     
         // The signed-in user info.
         const user = result.user;
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = TwitterAuthProvider.credentialFromError(error);
         // ...
       });
     auth_twitter_signin_redirect_result.js

     Web version 8

     firebase.auth()
       .getRedirectResult()
       .then((result) => {
         if (result.credential) {
           /** @type {firebase.auth.OAuthCredential} */
           var credential = result.credential;
     
           // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
           // You can use these server side with your app's credentials to access the Twitter API.
           var token = credential.accessToken;
           var secret = credential.secret;
           // ...
         }
     
         // The signed-in user info.
         var user = result.user;
       }).catch((error) => {
         // Handle Errors here.
         var errorCode = error.code;
         var errorMessage = error.message;
         // The email of the user's account used.
         var email = error.email;
         // The firebase.auth.AuthCredential type that was used.
         var credential = error.credential;
         // ...
       });
     twitter.js

     這也是您可以捕獲和處理錯誤的地方。有關錯誤代碼的列表，請查看Auth Reference Docs 。

// Step 1.
// User tries to sign in to Twitter.
auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Twitter credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Twitter credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

手動處理登錄流程

您還可以通過調用 Twitter OAuth 端點處理登錄流程，使用 Twitter 帳戶向 Firebase 進行身份驗證：

1. 按照開發人員的文檔將 Twitter 身份驗證集成到您的應用程序中。在 Twitter 登錄流程結束時，您將收到一個 OAuth 訪問令牌和一個 OAuth 密鑰。
2. 如果您需要登錄 Node.js 應用程序，請將 OAuth 訪問令牌和 OAuth 密碼發送到 Node.js 應用程序。
3. 用戶成功登錄 Twitter 後，將 OAuth 訪問令牌和 OAuth 密鑰交換為 Firebase 憑據：

   var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
   

4. 使用 Firebase 憑據向 Firebase 進行身份驗證：

   Web version 9

   import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
   
   // Sign in with the credential from the Facebook user.
   const auth = getAuth();
   signInWithCredential(auth, credential)
     .then((result) => {
       // Signed in 
       const credential = FacebookAuthProvider.credentialFromResult(result);
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = FacebookAuthProvider.credentialFromError(error);
       // ...
     });
   auth_facebook_signin_credential.js

   Web version 8

   // Sign in with the credential from the Facebook user.
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // Signed in       
       var credential = result.credential;
       // ...
     })
     .catch((error) => {
       // Handle Errors here.
       var errorCode = error.code;
       var errorMessage = error.message;
       // The email of the user's account used.
       var email = error.email;
       // The firebase.auth.AuthCredential type that was used.
       var credential = error.credential;
       // ...
     });
   facebook.js

在 Chrome 擴展程序中使用 Firebase 進行身份驗證

如果您正在構建 Chrome 擴展應用程序，則必須添加您的 Chrome 擴展 ID：

1. 在Firebase 控制台中打開您的項目。
2. 在身份驗證部分中，打開登錄方法頁面。
3. 將如下所示的 URI 添加到授權域列表中：

   chrome-extension://CHROME_EXTENSION_ID

Chrome 擴展程序只能使用彈出操作（ signInWithPopup 、 linkWithPopup和reauthenticateWithPopup ），因為 Chrome 擴展程序不能使用 HTTP 重定向。您應該從後台頁面腳本而不是瀏覽器操作彈出窗口調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。彈出方法只能用於使用Manifest V2的擴展。較新的Manifest V3只允許服務工作者形式的後台腳本，根本無法執行彈出操作。

在 Chrome 擴展程序的清單文件中，確保將https://apis.google.com URL 添加到content_security_policy許可名單。

下一步

用戶首次登錄後，會創建一個新用戶帳戶並將其鏈接到憑據（即用戶名和密碼、電話號碼或身份驗證提供商信息），即用戶登錄時使用的憑據。這個新帳戶作為 Firebase 項目的一部分存儲，可用於在項目中的每個應用中識別用戶，無論用戶如何登錄。

• 在您的應用程序中，了解用戶身份驗證狀態的推薦方法是在Auth對像上設置觀察者。然後，您可以從User對像中獲取用戶的基本配置文件信息。請參閱管理用戶。

• 在您的 Firebase 實時數據庫和雲存儲安全規則中，您可以從auth變量中獲取登錄用戶的唯一用戶 ID，並使用它來控制用戶可以訪問哪些數據。

您可以通過將身份驗證提供程序憑據鏈接到現有用戶帳戶來允許用戶使用多個身份驗證提供程序登錄您的應用程序。

要註銷用戶，請調用signOut ：

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js