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')
   });
}