Firebase - Facebook身份验证

在本章中，我们将使用Firebase Facebook身份验证对用户进行身份验证.

步骤1  - 启用Facebook身份验证

我们需要打开Firebase信息中心并单击侧面菜单中的验证.接下来，我们需要在标签栏中选择 SIGN-IN-METHOD .我们将启用Facebook身份验证并保持打开状态，因为我们需要在完成第2步后添加 App ID 和 App Secret .

第2步 - 创建Facebook应用程序

要启用Facebook身份验证，我们需要创建Facebook应用程序.创建应用后，我们需要将 App ID 和 App Secret 复制到我们在步骤1中保持打开的Firebase页面.我们还需要复制 OAuth重定向URI 从此窗口进入Facebook应用.您可以在Facebook应用程序信息中心的侧边菜单中找到 +添加产品.

选择 Facebook登录，它将显示在侧面菜单.您将找到输入字段有效OAuth重定向URI ，您需要从Firebase复制 OAuth重定向URI .

步骤3  - 连接到Facebook SDK

将以下代码复制到 index.html 中 body 标记的开头.请务必从Facebook信息中心将'APP_ID'替换为您的应用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 = "//connect.facebook.net/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')
   });
}