Firebase - Xác thực Facebook

Trong chương này, chúng tôi sẽ xác thực người dùng bằng xác thực Facebook Firebase.

Bước 1 - Bật Facebook Auth

Chúng tôi cần mở trang tổng quan Firebase và nhấp vào Authtrong menu bên. Tiếp theo, chúng ta cần chọnSIGN-IN-METHODtrong thanh tab. Chúng tôi sẽ kích hoạt Facebook auth và để mở điều này vì chúng tôi cần thêmApp ID và App Secret khi chúng ta hoàn thành bước 2.

Bước 2 - Tạo ứng dụng Facebook

Để kích hoạt xác thực Facebook, chúng ta cần tạo ứng dụng Facebook. Nhấp vào liên kết này để bắt đầu. Sau khi ứng dụng được tạo, chúng tôi cần sao chépApp ID và App Secret vào trang Firebase mà chúng tôi đã để ngỏ ở bước 1. Chúng tôi cũng cần sao chép OAuth Redirect URItừ cửa sổ này vào ứng dụng Facebook. Bạn có thể tìm+ Add Product menu bên trong của bảng điều khiển ứng dụng Facebook.

Chọn Facebook Loginvà nó sẽ xuất hiện trong menu bên. Bạn sẽ tìm thấy trường đầu vàoValid OAuth redirect URIs nơi bạn cần sao chép OAuth Redirect URI từ Firebase.

Bước 3 - Kết nối với Facebook SDK

Sao chép đoạn mã sau vào đầu body gắn thẻ vào index.html. Hãy chắc chắn để thay thế'APP_ID' vào id ứng dụng của bạn từ bảng điều khiển Facebook.

Thí dụ

Chúng ta hãy xem xét ví dụ sau.

<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>

Bước 4 - Tạo các nút

Chúng tôi thiết lập mọi thứ trong ba bước đầu tiên, bây giờ chúng tôi có thể tạo hai nút để đăng nhập và đăng xuất.

index.html

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

Bước 5 - Tạo chức năng xác thực

Đây là bước cuối cùng. Mởindex.js và sao chép đoạn mã sau.

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