Firebase - Authentification Facebook

Dans ce chapitre, nous authentifierons les utilisateurs avec l'authentification Firebase Facebook.

Étape 1 - Activer l'authentification Facebook

Nous devons ouvrir le tableau de bord Firebase et cliquer sur Authdans le menu latéral. Ensuite, nous devons choisirSIGN-IN-METHODdans la barre d'onglets. Nous activerons l'authentification Facebook et la laisserons ouverte car nous devons ajouterApp ID et App Secret lorsque nous avons terminé l'étape 2.

Étape 2 - Créer une application Facebook

Pour activer l'authentification Facebook, nous devons créer l'application Facebook. Cliquez sur ce lien pour commencer. Une fois l'application créée, nous devons copierApp ID et App Secret sur la page Firebase, que nous avons laissée ouverte à l'étape 1. Nous devons également copier OAuth Redirect URIà partir de cette fenêtre dans l'application Facebook. Tu peux trouver+ Add Product à l'intérieur du menu latéral du tableau de bord de l'application Facebook.

Choisir Facebook Loginet il apparaîtra dans le menu latéral. Vous trouverez le champ de saisieValid OAuth redirect URIs où vous devez copier le OAuth Redirect URI de Firebase.

Étape 3 - Connectez-vous au SDK Facebook

Copiez le code suivant au début du body faire index.html. Assurez-vous de remplacer le'APP_ID' à votre identifiant d'application depuis le tableau de bord Facebook.

Exemple

Prenons l'exemple suivant.

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

Étape 4 - Créer des boutons

Nous avons tout défini dans les trois premières étapes, nous pouvons maintenant créer deux boutons pour la connexion et la déconnexion.

index.html

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

Étape 5 - Créer des fonctions d'authentification

C'est la dernière étape. Ouvertindex.js et copiez le code suivant.

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