Procéder à la connexion des utilisateurs avec Apple
Ce document explique comment utiliser Identity Platform pour ajouter Se connecter avec Apple à votre application Web.
Avant de commencer
Créer une application Web de base qui utilise Identity Platform avec HTML et JavaScript Pour savoir comment, consultez le guide de démarrage rapide.
Rejoignez le programme Apple Developer.
Configurer votre application avec Apple
Sur le site Apple Developer :
Suivez les étapes de l'article Configure Sign in with Apple for the web. Par exemple :
Enregistrez une URL de renvoi, semblable à celle-ci :
https://project-id.firebaseapp.com/__/auth/handler
Hébergez temporairement un fichier à l'URL suivante pour valider votre domaine :
https://project-id.firebaseapp.com/.well-known/apple-developer-domain-association.txt
Notez également votre ID de service et votre ID d'équipe Apple. Vous en aurez besoin dans la section suivante.
Utilisez une clé privée Apple pour créer une connexion. Vous aurez besoin de la clé et de son ID dans la section suivante.
Si vous utilisez Identity Platform pour envoyer des e-mails à vos utilisateurs, configurer votre projet avec le service de relais de messagerie privé d'Apple. à l'aide de l'adresse e-mail suivante:
noreply@project-id.firebaseapp.com
Vous pouvez également utiliser un modèle d'e-mail personnalisé, si votre application en possède un.
Conformité avec les exigences de données anonymes d'Apple
Apple offre aux utilisateurs la possibilité d'anonymiser leurs données, y compris leur adresse e-mail. Apple attribue aux utilisateurs qui sélectionnent cette option une adresse e-mail masquée contenant le domaine privaterelay.appleid.com
.
Votre application doit respecter le règlement pour les développeurs ou les conditions d'utilisation d'Apple concernant les identifiants Apple anonymes. Cela inclut l'obtention de l'autorisation de l'utilisateur avant d'associer des informations personnelles à un identifiant Apple anonyme. Les actions impliquant des informations personnelles incluent, sans s'y limiter :
- Associer une adresse e-mail à un identifiant Apple anonyme, ou inversement
- Associer un numéro de téléphone à un identifiant Apple anonyme, ou inversement
- Associer un identifiant de réseau social non anonyme, tel que Facebook ou Google, à un identifiant Apple anonyme, ou inversement
Pour plus d'informations, reportez-vous au Contrat de licence du programme Apple Developer associé à votre compte de développeur Apple.
Configurer Apple en tant que fournisseur
Pour configurer Apple en tant que fournisseur d'identité :
Accédez à la page Fournisseurs d'identité dans la console Google Cloud.
Cliquez sur Ajouter un fournisseur.
Dans la liste, sélectionnez Apple.
Sous Plate-forme, sélectionnez Web.
Saisissez votre ID de service, votre ID d'équipe Apple, votre ID de clé et votre clé privée.
Enregistrez les domaines de votre application en cliquant sur Ajouter un domaine sous Domaines autorisés. À des fins de développement,
localhost
est déjà activé par défaut.Sous Configurer votre application, cliquez sur Informations sur la configuration. Copiez l'extrait dans le code de votre application pour initialiser le SDK client Identity Platform.
Cliquez sur Enregistrer.
Connecter des utilisateurs avec le SDK client
Pour connecter un utilisateur, procédez comme suit :
Créez une instance de l'objet de fournisseur
OAuthProvider
en utilisant l'IDapple.com
:Version Web 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('apple.com');
Version Web 8
var provider = new firebase.auth.OAuthProvider('apple.com');
Facultatif : Ajoutez des champs d'application OAuth. Les champs d'application spécifient les données que vous demandez à Apple. Des données plus sensibles peuvent nécessiter des champs d'application spécifiques. Par défaut, lorsque l'option Un compte par adresse e-mail est activée, Identity Platform demande les champs d'application
email
etname
.Version Web 9
provider.addScope('email'); provider.addScope('name');
Version Web 8
provider.addScope('email'); provider.addScope('name');
Facultatif : Localisez le flux d'authentification. Vous pouvez spécifier une langue ou utiliser la langue par défaut de l'appareil. Pour connaître les langues disponibles, consultez la documentation sur Se connecter avec Apple.
Version Web 9
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
Version Web 8
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
Utilisez l'objet du fournisseur pour vous connecter à l'utilisateur. Vous pouvez soit ouvrir une fenêtre pop-up, soit rediriger la page actuelle. La redirection est plus facile pour les utilisateurs d'appareils mobiles.
Pour afficher une fenêtre pop-up, appelez
signInWithPopup()
:Version Web 9
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // Apple credential const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; // 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 credential that was used. const credential = OAuthProvider.credentialFromError(error); // ... });
Version Web 8
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // You can also get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .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 rediriger la page, commencez par appeler
signInWithRedirect()
:Suivez les bonnes pratiques lorsque vous utilisez
signInWithRedirect
,linkWithRedirect
oureauthenticateWithRedirect
.Version Web 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Version Web 8
firebase.auth().signInWithRedirect(provider);
Appelez ensuite
getRedirectResult()
pour récupérer le jeton Apple lors du chargement de votre page :Version Web 9
import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth"; // Result from Redirect auth flow. const auth = getAuth(); getRedirectResult(auth) .then((result) => { const credential = OAuthProvider.credentialFromResult(result); if (credential) { // You can also get the Apple OAuth Access and ID Tokens. const accessToken = credential.accessToken; const idToken = credential.idToken; } // The signed-in user info. const user = result.user; }) .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 credential that was used. const credential = OAuthProvider.credentialFromError(error); // ... });
Version Web 8
// Result from Redirect auth flow. firebase .auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // You can get the Apple OAuth Access and ID Tokens. var accessToken = credential.accessToken; var idToken = credential.idToken; // IdP data available in result.additionalUserInfo.profile. // ... } // The signed-in user info. var user = result.user; }) .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 une liste d'erreurs consultez les Documentation de référence de l'API
Contrairement à de nombreux autres fournisseurs d'identité, Apple ne fournit pas d'URL de photo.
Si un utilisateur choisit de ne pas partager son véritable adresse e-mail avec votre application, Apple provisionne une adresse e-mail unique à la place. Cette adresse e-mail se présente sous la forme suivante : xyz@privaterelay.appleid.com
. Si vous avez configuré le service de relais de messagerie privé, Apple transfère les e-mails envoyés à l'adresse anonyme à l'adresse e-mail réelle de l'utilisateur.
Apple ne partage des informations utilisateur, telles que les noms à afficher, qu'avec les applications la première fois qu'un utilisateur se connecte. Dans la plupart des cas, Identity Platform stocke ces données, ce qui vous permet de les récupérer à l'aide de firebase.auth().currentUser.displayName
lors des sessions futures. Toutefois, si vous avez autorisé les utilisateurs à se connecter à votre application à l'aide d'Apple avant l'intégration à Identity Platform, les informations sur l'utilisateur ne sont pas disponibles.
Étape suivante
- Découvrez comment associer des comptes Apple à d'autres fournisseurs. Notez qu'Apple exige que vous obteniez le consentement explicite des utilisateurs avant d'associer leurs comptes Apple à d'autres données.
- En savoir plus sur les utilisateurs d'Identity Platform.
- Procéder à la connexion des utilisateurs avec d'autres fournisseurs d'identité.