Vous pouvez autoriser vos utilisateurs à s'authentifier auprès de Firebase à l'aide de leur compte Facebook en intégrant Facebook Login à votre application. Vous pouvez intégrer Facebook Login en utilisant le SDK Firebase pour effectuer le flux de connexion ou en effectuant manuellement le flux de connexion Facebook et en transmettant le jeton d'accès obtenu à Firebase.
Avant de commencer
- Ajoutez Firebase à votre projet JavaScript.
- Sur le site Facebook for Developers obtenez l'ID de l'application et un code secret de l'application pour votre application.
- Activer la connexion Facebook:
- Dans la console Firebase, ouvrez la section Authentification.
- Dans l'onglet Mode de connexion, activez la connexion Facebook. et spécifiez l'ID de l'application et le code secret de l'application que vous avez obtenus via Facebook.
- Ensuite, assurez-vous que votre URI de redirection OAuth (par exemple,
my-app-12345.firebaseapp.com/__/auth/handler
) figure parmi vos URI de redirection OAuth sur la page des paramètres de votre application Facebook sur le site Facebook pour les développeurs, dans la configuration Product Settings > Facebook Login (Paramètres du produit > Connexion Facebook).
Gérer le flux de connexion avec le SDK Firebase
Si vous créez une application Web, le moyen le plus simple d'authentifier vos utilisateurs avec Firebase à l'aide de leurs comptes Facebook consiste à gérer le flux de connexion avec le SDK JavaScript Firebase. (Si vous souhaitez authentifier un utilisateur dans Node.js, ou dans un environnement autre qu'un navigateur, vous devez gérer la procédure de connexion manuellement.)
Pour gérer le flux de connexion avec le SDK JavaScript Firebase, procédez comme suit :
- Créez une instance de l'objet de fournisseur Facebook :
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
var provider = new firebase.auth.FacebookAuthProvider();
- Facultatif: spécifiez des habilitations OAuth 2.0 supplémentaires
que vous voulez demander
au fournisseur d'authentification. Pour ajouter un niveau d'accès, appelez
addScope
Exemple :provider.addScope('user_birthday');
provider.addScope('user_birthday');
- Facultatif : Pour localiser le flux OAuth du fournisseur dans la langue préférée de l'utilisateur sans transmettre explicitement les paramètres OAuth personnalisés pertinents, mettez à jour le code de langue sur l'instance Auth avant de démarrer le flux OAuth. Exemple :
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Facultatif: Spécifier d'autres paramètres de fournisseur OAuth personnalisés
que vous souhaitez envoyer avec la requête OAuth. Pour ajouter un paramètre personnalisé, appelez
setCustomParameters
sur le fournisseur initialisé avec un objet contenant la clé telle que spécifiée par la documentation du fournisseur OAuth et la valeur correspondante. Exemple :provider.setCustomParameters({ 'display': 'popup' });
provider.setCustomParameters({ 'display': 'popup' });
- Authentifiez-vous avec Firebase à l'aide de l'objet du fournisseur Facebook. Vous pouvez
inviter vos utilisateurs à se connecter avec leur compte Facebook en ouvrant un
ou en vous redirigeant vers la page de connexion. La méthode de redirection est
de préférence sur
les appareils mobiles.
- Pour vous connecter via une fenêtre pop-up, appelez
signInWithPopup
:import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
C'est également là que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la documentation de référence sur Auth.
- Pour vous connecter en redirigeant vers la page de connexion, appelez
signInWithRedirect
: Suivez les bonnes pratiques lorsque vous utilisez "signInWithRedirect".import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
lors du chargement de votre page :import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = credential.accessToken; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- Pour vous connecter via une fenêtre pop-up, appelez
Gérer les erreurs de compte existant avec un identifiant différent
Si vous avez activé le paramètre Un compte par adresse e-mail dans la console Firebase, lorsqu'un utilisateur tente de se connecter à un fournisseur (tel que Facebook) avec une adresse e-mail existant déjà pour le fournisseur d'un autre utilisateur Firebase (tel que Google), l'erreur auth/account-exists-with-different-credential
est générée avec un objet AuthCredential
(jeton d'accès Facebook). Pour finaliser la connexion
l'utilisateur doit d'abord se connecter au fournisseur existant (Google), puis l'associer
l'ancienne AuthCredential
(jeton d'accès Facebook).
Mode pop-up
Si vous utilisez signInWithPopup
, vous pouvez gérer les erreurs auth/account-exists-with-different-credential
avec un code semblable à l'exemple suivant :
import { getAuth, linkWithCredential, signInWithPopup, FacebookAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Facebook. let result = await signInWithPopup(getAuth(), new FacebookAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Facebook credential. let pendingCred = error.credential; // Step 3: Save the pending credential in temporary storage, // Step 4: Let the user know that they already have an account // but with a different provider, and let them choose another // sign-in method. } } // ... try { // Step 5: Sign the user in using their chosen method. let result = await signInWithPopup(getAuth(), userSelectedProvider); // Step 6: Link to the Facebook credential. // TODO: implement `retrievePendingCred` for your app. let pendingCred = retrievePendingCred(); if (pendingCred !== null) { // As you have access to the pending credential, you can directly call the // link method. let user = await linkWithCredential(result.user, pendingCred); } // Step 7: Continue to app. } catch (error) { // ... }
Mode de redirection
Cette erreur est gérée de manière similaire en mode redirection, à la différence que les identifiants en attente doivent être mis en cache entre les redirections de pages (par exemple, en utilisant l'espace de stockage de session).
Avancé : gérer manuellement le flux de connexion
Vous pouvez également vous authentifier avec Firebase à l'aide d'un compte Facebook en gérant le flux de connexion avec le SDK JavaScript Facebook Login :
- Intégrez Facebook Login à votre application en suivant la documentation pour les développeurs.
Veillez à configurer Facebook Login avec votre ID d'application Facebook :
<script src="//connect.facebook.net/en_US/sdk.js"></script> <script> FB.init({ /********************************************************************** * TODO(Developer): Change the value below with your Facebook app ID. * **********************************************************************/ appId: '<YOUR_FACEBOOK_APP_ID>', status: true, xfbml: true, version: 'v2.6', }); </script>
-
Nous configurons également un écouteur à l'état d'authentification Facebook:
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
-
Une fois que vous avez intégré la fonctionnalité de connexion Facebook, ajoutez un bouton de connexion Facebook sur vos pages Web :
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large" ></fb:login-button>
- Dans le rappel de l'état d'authentification Facebook, échangez le jeton d'authentification de la réponse d'authentification de Facebook contre des identifiants Firebase et connectez-vous à Firebase :
import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); function checkLoginState(response) { if (response.authResponse) { // User is signed-in Facebook. const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => { unsubscribe(); // Check if we are already signed-in Firebase with the correct user. if (!isUserEqual(response.authResponse, firebaseUser)) { // Build Firebase credential with the Facebook auth token. const credential = FacebookAuthProvider.credential( response.authResponse.accessToken); // Sign in with the credential from the Facebook user. signInWithCredential(auth, credential) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... }); } else { // User is already signed-in Firebase with the correct user. } }); } else { // User is signed-out of Facebook. signOut(auth); } }
function checkLoginState(response) { if (response.authResponse) { // User is signed-in Facebook. var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => { unsubscribe(); // Check if we are already signed-in Firebase with the correct user. if (!isUserEqual(response.authResponse, firebaseUser)) { // Build Firebase credential with the Facebook auth token. var credential = firebase.auth.FacebookAuthProvider.credential( response.authResponse.accessToken); // Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); } else { // User is already signed-in Firebase with the correct user. } }); } else { // User is signed-out of Facebook. firebase.auth().signOut(); } }
- Vous devez également vérifier que l'utilisateur Facebook n'est pas déjà connecté à Firebase pour éviter une réauthentification inutile:
import { FacebookAuthProvider } from "firebase/auth"; function isUserEqual(facebookAuthResponse, firebaseUser) { if (firebaseUser) { const providerData = firebaseUser.providerData; for (let i = 0; i < providerData.length; i++) { if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID && providerData[i].uid === facebookAuthResponse.userID) { // We don't need to re-auth the Firebase connection. return true; } } } return false; }
function isUserEqual(facebookAuthResponse, firebaseUser) { if (firebaseUser) { var providerData = firebaseUser.providerData; for (var i = 0; i < providerData.length; i++) { if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID && providerData[i].uid === facebookAuthResponse.userID) { // We don't need to re-auth the Firebase connection. return true; } } } return false; }
Avancé : Authentifier avec Firebase dans Node.js
Pour vous authentifier avec Firebase dans une application Node.js :
- Connectez l'utilisateur avec son compte Facebook et obtenez son jeton d'accès Facebook. Par exemple, connectez l'utilisateur dans un navigateur, comme décrit dans la section Gérer la connexion flow manuellement, mais envoyez le jeton d'accès à votre code application au lieu de l'utiliser dans l'application cliente.
- Après avoir obtenu le jeton d'accès Facebook de l'utilisateur, utilisez-le pour créer
Credential, puis connectez l'utilisateur à l'aide des identifiants:
import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth"; // Sign in with the credential from the Facebook user. const auth = getAuth(); signInWithCredential(auth, credential) .then((result) => { // Signed in const credential = FacebookAuthProvider.credentialFromResult(result); }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
// Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .then((result) => { // Signed in var credential = result.credential; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
S'authentifier avec Firebase dans une extension Chrome
Si vous créez une application d'extension Chrome, consultez le guide sur les documents hors écran.
Personnaliser le domaine de redirection pour la connexion Facebook
Lors de la création du projet, Firebase provisionne un sous-domaine unique pour votre projet : https://my-app-12345.firebaseapp.com
.
Il servira également de mécanisme de redirection pour la connexion OAuth. Ce domaine devrait être autorisé pour tous les fournisseurs OAuth compatibles. Toutefois, cela signifie que les utilisateurs peuvent voir ce domaine lorsqu'ils se connectent à Facebook avant d'être redirigés vers l'application : Continuer à : https://my-app-12345.firebaseapp.com.
Pour éviter d'afficher votre sous-domaine, vous pouvez configurer un domaine personnalisé avec Firebase Hosting :
- Suivez les étapes 1 à 3 de la section Configurer votre domaine pour Hosting. Lorsque vous validez la propriété de votre domaine, Hosting provisionne un certificat SSL pour votre domaine personnalisé.
- Ajoutez votre domaine personnalisé à la liste des domaines autorisés dans la console Firebase :
auth.custom.domain.com
. - Dans la console de développement Facebook ou sur la page de configuration OAuth, ajoutez l'URL de la page de redirection à la liste d'autorisation. Elle sera accessible sur votre domaine personnalisé :
https://auth.custom.domain.com/__/auth/handler
. - Lorsque vous initialisez la bibliothèque JavaScript, spécifiez votre domaine personnalisé avec le champ
authDomain
:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
Étapes suivantes
Lorsqu'un utilisateur se connecte pour la première fois, un compte utilisateur est créé et associé aux identifiants (nom et mot de passe de l'utilisateur, numéro de téléphone ou informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Cette nouvelle est stocké dans votre projet Firebase et peut servir à identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la façon dont l'utilisateur se connecte.
-
Dans vos applications, la méthode recommandée pour connaître l'état d'authentification de votre utilisateur consiste à définir un observateur sur l'objet
Auth
. Vous pouvez ensuite obtenir les informations de profil de base de l'utilisateur à partir de l'objetUser
. Voir Gérer les utilisateurs Dans votre Firebase Realtime Database et votre Cloud Storage Règles de sécurité, vous pouvez obtenez l'ID utilisateur unique de l'utilisateur connecté à partir de la variable
auth
et l'utiliser pour contrôler les données auxquelles un utilisateur peut accéder.
Vous pouvez autoriser les utilisateurs à se connecter à votre application à l'aide de plusieurs fournisseurs d'authentification en associant les identifiants du fournisseur d'authentification à un compte utilisateur existant.
Pour déconnecter un utilisateur, appelez signOut
:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });