Firebase - Facebook 身份驗證

本章將介紹如何使用 Firebase Facebook 身份驗證對使用者進行身份驗證。

步驟 1 - 啟用 Facebook 身份驗證

我們需要開啟 Firebase 控制檯，並在側邊選單中點選身份驗證。接下來，我們需要在選項卡欄中選擇登入方法。我們將啟用 Facebook 身份驗證，並保持此頁面開啟，因為在完成步驟 2 後，我們需要新增應用 ID和應用金鑰。

步驟 2 - 建立 Facebook 應用

要啟用 Facebook 身份驗證，我們需要建立一個 Facebook 應用。點選此連結開始。應用建立完成後，我們需要將應用 ID和應用金鑰複製到 Firebase 頁面（我們在步驟 1 中保持開啟狀態）。我們還需要將此視窗中的OAuth 重定向 URI複製到 Facebook 應用中。您可以在 Facebook 應用控制檯的側邊選單中找到+ 新增產品。

選擇Facebook 登入，它將出現在側邊選單中。您將找到輸入欄位有效的 OAuth 重定向 URI，您需要將 Firebase 中的OAuth 重定向 URI複製到這裡。

步驟 3 - 連線到 Facebook SDK

將以下程式碼複製到index.html中body標籤的開頭。請務必將'APP_ID'替換為從 Facebook 控制檯獲取的應用 ID。

示例

讓我們考慮以下示例。

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//#/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));
	
</script>

步驟 4 - 建立按鈕

我們在前三個步驟中設定了所有內容，現在我們可以建立兩個用於登入和登出的按鈕。

index.html

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

步驟 5 - 建立身份驗證函式

這是最後一步。開啟index.js並複製以下程式碼。

index.js

var provider = new firebase.auth.FacebookAuthProvider();

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}