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

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

在你開始之前

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

使用Firebase SDK處理登錄流程

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

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

1. 創建Twitter提供程序對象的實例：

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

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

   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 。例如：

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

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

     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 ：

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

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

     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 has 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進行身份驗證：

   // 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 ），因為Chrome擴展程序無法使用HTTP重定向。您應該從後台腳本而不是瀏覽器操作彈出窗口中調用這些方法，因為身份驗證彈出窗口將取消瀏覽器操作彈出窗口。

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

下一步

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

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

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

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

要註銷用戶，請致電signOut ：

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