Firebase - uwierzytelnianie na Facebooku

W tym rozdziale będziemy uwierzytelniać użytkowników za pomocą uwierzytelniania Firebase na Facebooku.

Krok 1 - Włącz uwierzytelnianie przez Facebooka

Musimy otworzyć panel Firebase i kliknąć Authw menu bocznym. Następnie musimy wybraćSIGN-IN-METHODna pasku kart. Włączymy uwierzytelnianie na Facebooku i pozostawimy to otwarte, ponieważ musimy dodaćApp ID i App Secret kiedy skończymy krok 2.

Krok 2 - Utwórz aplikację Facebook

Aby włączyć uwierzytelnianie na Facebooku, musimy stworzyć aplikację Facebook. Kliknij ten link, aby rozpocząć. Po utworzeniu aplikacji musimy skopiowaćApp ID i App Secret na stronę Firebase, którą zostawiliśmy otwartą w kroku 1. Musimy też skopiować OAuth Redirect URIz tego okna do aplikacji Facebook. Możesz znaleźć+ Add Product wewnątrz menu bocznego pulpitu aplikacji Facebook.

Wybierać Facebook Logini pojawi się w bocznym menu. Znajdziesz pole wprowadzaniaValid OAuth redirect URIs gdzie musisz skopiować OAuth Redirect URI z Firebase.

Krok 3 - Połącz się z Facebook SDK

Skopiuj następujący kod na początku pliku body tag in index.html. Pamiętaj, aby wymienić'APP_ID' do identyfikatora aplikacji z panelu Facebook.

Przykład

Rozważmy następujący przykład.

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

Krok 4 - Utwórz przyciski

Ustawiamy wszystko w pierwszych trzech krokach, teraz możemy stworzyć dwa przyciski do logowania i wylogowania.

index.html

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

Krok 5 - Utwórz funkcje autoryzacji

To jest ostatni krok. otwartyindex.js i skopiuj poniższy kod.

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