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

Configurer votre application avec Apple

Sur le site Apple Developer :

  1. Suivez les étapes de l'article Configure Sign in with Apple for the web. Par exemple :

    1. Enregistrez une URL de renvoi, semblable à celle-ci :

      https://project-id.firebaseapp.com/__/auth/handler
      
    2. 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.

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

  3. 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é :

  1. Accédez à la page Fournisseurs d'identité dans la console Google Cloud.

    Accéder à la page "Fournisseurs d'identité"

  2. Cliquez sur Ajouter un fournisseur.

  3. Dans la liste, sélectionnez Apple.

  4. Sous Plate-forme, sélectionnez Web.

  5. Saisissez votre ID de service, votre ID d'équipe Apple, votre ID de clé et votre clé privée.

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

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

  8. Cliquez sur Enregistrer.

Connecter des utilisateurs avec le SDK client

Pour connecter un utilisateur, procédez comme suit :

  1. Créez une instance de l'objet de fournisseur OAuthProvider en utilisant l'ID apple.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');
  2. 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 et name.

    Version Web 9

    provider.addScope('email');
    provider.addScope('name');

    Version Web 8

    provider.addScope('email');
    provider.addScope('name');
  3. 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'
    });
  4. 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 ou reauthenticateWithRedirect.

    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