Authentifier à l'aide d'Apple avec JavaScript

Vous pouvez permettre à vos utilisateurs de s'authentifier auprès de Firebase à l'aide de leur identifiant Apple en utilisant le SDK Firebase pour effectuer le flux de connexion OAuth 2.0 de bout en bout.

Avant que tu commences

Pour connecter des utilisateurs à l'aide d'Apple, configurez d'abord la connexion avec Apple sur le site des développeurs d'Apple, puis activez Apple en tant que fournisseur de connexion pour votre projet Firebase.

Rejoignez le programme pour développeurs Apple

La connexion avec Apple ne peut être configurée que par les membres du programme pour développeurs Apple .

Configurer la connexion avec Apple

Sur le site des développeurs Apple , procédez comme suit :

  1. Associez votre site Web à votre application comme décrit dans la première section de Configurer la connexion avec Apple pour le Web . Lorsque vous y êtes invité, enregistrez l'URL suivante en tant qu'URL de retour :

    https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler

    Vous pouvez obtenir votre ID de projet Firebase sur la page des paramètres de la console Firebase .

    Lorsque vous avez terminé, prenez note de votre nouvel ID de service, dont vous aurez besoin dans la section suivante.

  2. Créez une connexion avec la clé privée Apple . Vous aurez besoin de votre nouvelle clé privée et de votre identifiant de clé dans la section suivante.
  3. Si vous utilisez l'une des fonctionnalités de Firebase Authentication qui envoie des e-mails aux utilisateurs, notamment la connexion par lien e-mail, la vérification de l'adresse e-mail, la révocation des modifications de compte, etc., configurez le service de relais de messagerie privé Apple et enregistrez noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (ou votre domaine de modèle d'e-mail personnalisé) afin qu'Apple puisse relayer les e-mails envoyés par Firebase Authentication vers des adresses e-mail Apple anonymisées.

Activer Apple en tant que fournisseur de connexion

  1. Ajoutez Firebase à votre projet .
  2. Dans la console Firebase , ouvrez la section Auth . Dans l'onglet Méthode de connexion , activez le fournisseur Apple . Spécifiez l'ID de service que vous avez créé dans la section précédente. De plus, dans la section Configuration du flux de code OAuth , spécifiez votre identifiant d'équipe Apple ainsi que la clé privée et l'ID de clé que vous avez créés dans la section précédente.

Se conformer aux exigences d'Apple en matière de données anonymisées

Se connecter avec Apple donne aux utilisateurs la possibilité d'anonymiser leurs données, y compris leur adresse e-mail, lors de la connexion. Les utilisateurs qui choisissent cette option ont des adresses e-mail avec le domaine privaterelay.appleid.com . Lorsque vous utilisez la connexion avec Apple dans votre application, vous devez vous conformer à toutes les politiques de développement ou conditions applicables d'Apple concernant ces identifiants Apple anonymisés.

Cela inclut l'obtention de tout consentement requis de l'utilisateur avant d'associer des informations personnelles d'identification directe à un identifiant Apple anonymisé. Lors de l'utilisation de l'authentification Firebase, cela peut inclure les actions suivantes :

  • Associez une adresse e-mail à un identifiant Apple anonymisé ou vice versa.
  • Associer un numéro de téléphone à un identifiant Apple anonymisé ou vice versa
  • Associez un identifiant social non anonyme (Facebook, Google, etc.) à un identifiant Apple anonymisé ou vice versa.

La liste ci-dessus n'est pas exhaustive. Reportez-vous au contrat de licence du programme pour développeurs Apple dans la section Adhésion de votre compte développeur pour vous assurer que votre application répond aux exigences d'Apple.

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 auprès de Firebase à l'aide de leurs comptes Apple consiste à gérer l'intégralité du flux de connexion avec le SDK JavaScript Firebase.

Pour gérer le flux de connexion avec le SDK JavaScript Firebase, procédez comme suit :

  1. Créez une instance d'un OAuthProvider à l'aide de l'ID de fournisseur correspondant apple.com .

    Web modular API

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('apple.com');

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('apple.com');
  2. Facultatif : Spécifiez des étendues OAuth 2.0 supplémentaires au-delà de la valeur par défaut que vous souhaitez demander au fournisseur d'authentification.

    Web modular API

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

    Web namespaced API

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

    Par défaut, lorsque l'option Un compte par adresse e-mail est activée, Firebase demande les étendues d'adresse e-mail et de nom. Si vous modifiez ce paramètre sur Plusieurs comptes par adresse e-mail , Firebase ne demande aucune étendue à Apple, sauf si vous les spécifiez.

  3. Facultatif : si vous souhaitez afficher l'écran de connexion d'Apple dans une langue autre que l'anglais, définissez le paramètre locale . Consultez la documentation Se connecter avec Apple pour connaître les paramètres régionaux pris en charge.

    Web modular API

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });

    Web namespaced API

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });
  4. Authentifiez-vous auprès de Firebase à l'aide de l'objet fournisseur OAuth. Vous pouvez inviter vos utilisateurs à se connecter avec leur compte Apple soit en ouvrant une fenêtre contextuelle, soit en redirigeant vers la page de connexion. La méthode de redirection est privilégiée sur les appareils mobiles.

    • Pour vous connecter avec une fenêtre pop-up, appelez signInWithPopup() :

      Web modular API

      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);
      
          // ...
        });

      Web namespaced API

      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 vous connecter en redirigeant vers la page de connexion, appelez signInWithRedirect() :

    Suivez les meilleures pratiques lorsque vous utilisez signInWithRedirect , linkWithRedirect ou reauthenticateWithRedirect .

    Web modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

    Une fois que l'utilisateur a terminé sa connexion et est revenu à la page, vous pouvez obtenir le résultat de la connexion en appelant getRedirectResult() :

    Web modular API

    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);
    
        // ...
      });

    Web namespaced API

    // 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 ici que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la référence API .

    Contrairement à d'autres fournisseurs pris en charge par Firebase Auth, Apple ne fournit pas d'URL de photo.

    De plus, lorsque l'utilisateur choisit de ne pas partager son e-mail avec l'application, Apple fournit une adresse e-mail unique pour cet utilisateur (sous la forme xyz@privaterelay.appleid.com ), qu'il partage avec votre application. Si vous avez configuré le service de relais de messagerie privé, Apple transfère les e-mails envoyés à l'adresse anonymisée vers la véritable adresse e-mail de l'utilisateur.

    Apple ne partage les informations utilisateur telles que le nom d'affichage avec les applications que la première fois qu'un utilisateur se connecte. Habituellement, Firebase stocke le nom d'affichage la première fois qu'un utilisateur se connecte avec Apple, que vous pouvez obtenir avec firebase.auth().currentUser.displayName . Toutefois, si vous avez déjà utilisé Apple pour connecter un utilisateur à l'application sans utiliser Firebase, Apple ne fournira pas à Firebase le nom d'affichage de l'utilisateur.

Réauthentification et liaison de compte

Le même modèle peut être utilisé avec reauthenticateWithPopup() et reauthenticateWithRedirect() , que vous pouvez utiliser pour récupérer de nouvelles informations d'identification pour les opérations sensibles qui nécessitent une connexion récente :

Web modular API

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
const provider = new OAuthProvider('apple.com');

reauthenticateWithPopup(auth.currentUser, provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.

    // The signed-in user info.
    const user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // ...
  })
  .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);

    // ...
  });

Web namespaced API

const provider = new firebase.auth.OAuthProvider('apple.com');

firebase
  .auth()
  .currentUser
  .reauthenticateWithPopup(provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.
    /** @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 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;

    // ...
  });

Et vous pouvez utiliser linkWithPopup() et linkWithRedirect() pour lier différents fournisseurs d'identité aux comptes existants.

Notez qu'Apple exige que vous obteniez le consentement explicite des utilisateurs avant de lier leurs comptes Apple à d'autres données.

Par exemple, pour lier un compte Facebook au compte Firebase actuel, utilisez le jeton d'accès que vous avez obtenu en connectant l'utilisateur à Facebook :

Web modular API

import { getAuth, linkWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // ...

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Web namespaced API

const provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // Facebook additional data available in result.additionalUserInfo.profile,

      // Additional Facebook OAuth access token can also be retrieved.
      // result.credential.accessToken

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Authentifiez-vous avec Firebase dans une extension Chrome

Si vous créez une application d'extension Chrome, consultez le guide Documents hors écran .

Notez que vous devez toujours vérifier le domaine personnalisé auprès d'Apple de la même manière que le domaine firebaseapp.com par défaut :

http://auth.custom.example.com/.well-known/apple-developer-domain-association.txt

Révocation du jeton

Apple exige que les applications prenant en charge la création de compte permettent aux utilisateurs de lancer la suppression de leur compte dans l'application, comme décrit dans les directives d'examen de l'App Store.

Pour répondre à cette exigence, mettez en œuvre les étapes suivantes :

  1. Assurez-vous d'avoir rempli la section de configuration de l'ID de services et du flux de code OAuth de la configuration du fournisseur de connexion avec Apple, comme indiqué dans la section Configurer la connexion avec Apple .

  2. Étant donné que Firebase ne stocke pas les jetons utilisateur lorsque des utilisateurs sont créés avec Se connecter avec Apple, vous devez demander à l'utilisateur de se reconnecter avant de révoquer son jeton et de supprimer le compte.

    Ensuite, obtenez le jeton d'accès Apple OAuth auprès de OAuthCredential et utilisez-le pour appeler revokeAccessToken(auth, token) afin de révoquer le jeton d'accès Apple OAuth.

    const provider = new OAuthProvider('apple.com');
    provider.addScope('email');
    provider.addScope('name');
    
    const auth = getAuth();
    signInWithPopup(auth, provider).then(result => {
      // Get the Apple OAuth access token.
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
    
      // Revoke the Apple OAuth access token.
      revokeAccessToken(auth, accessToken)
        .then(() => {
          // Token revoked.
    
          // Delete the user account.
          // ...
        })
        .catch(error => {
          // An error happened.
          // ...
        });
    });
    
  3. Enfin, supprimez le compte utilisateur (et toutes les données associées).

Avancé : s'authentifier avec Firebase dans Node.js

Pour vous authentifier auprès de Firebase dans une application Node.js :

  1. Connectez l'utilisateur avec son compte Apple et obtenez le jeton d'identification Apple de l'utilisateur. Vous pouvez y parvenir de plusieurs manières. Par exemple, si votre application Node.js dispose d'une interface de navigateur :

    1. Sur votre backend, générez une chaîne aléatoire (un "nonce") et calculez son hachage SHA256. Le nonce est une valeur à usage unique que vous utilisez pour valider un seul aller-retour entre votre backend et les serveurs d'authentification d'Apple.

      Web modular API

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = (length) => {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        let nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Web namespaced API

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = function(length) {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        var nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');
    2. Sur votre page de connexion, spécifiez le nom occasionnel haché dans votre configuration de connexion avec Apple :

      <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
      <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
      <script>
          AppleID.auth.init({
              clientId: YOUR_APPLE_CLIENT_ID,
              scope: 'name email',
              redirectURI: URL_TO_YOUR_REDIRECT_HANDLER,  // See the next step.
              state: '[STATE]',  // Optional value that Apple will send back to you
                                 // so you can return users to the same context after
                                 // they sign in.
              nonce: HASHED_NONCE  // The hashed nonce you generated in the previous step.
          });
      </script>
      
    3. Obtenez le jeton d'identification Apple du côté serveur de réponse d'authentification POSTée :

      app.post('/redirect', (req, res) => {
        const savedState = req.cookies.__session;
        const code = req.body.code;
        const state = req.body.state;
        const appleIdToken = req.body.id_token;
        if (savedState !== state || !code) {
          res.status(403).send('403: Permission denied');
        } else {
          // Sign in with Firebase using appleIdToken. (See next step).
        }
      });
      

    Voir également Configuration de votre page Web pour la connexion avec Apple .

  2. Après avoir obtenu le jeton d'identification Apple de l'utilisateur, utilisez-le pour créer un objet Credential, puis connectez l'utilisateur avec les informations d'identification :

    Web modular API

    import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    
    // Build Firebase credential with the Apple ID token.
    const provider = new OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    signInWithCredential(auth, authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

    Web namespaced API

    // Build Firebase credential with the Apple ID token.
    const provider = new firebase.auth.OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    firebase.auth().signInWithCredential(authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

Prochaines étapes

Après qu'un utilisateur se connecte pour la première fois, un nouveau compte utilisateur est créé et lié aux informations d'identification (c'est-à-dire le nom d'utilisateur et le mot de passe, le numéro de téléphone ou les informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Ce nouveau compte est stocké dans le cadre de votre projet Firebase et peut être utilisé pour identifier un utilisateur dans chaque application de votre projet, quelle que soit la manière dont l'utilisateur se connecte.

  • Dans vos applications, la méthode recommandée pour connaître le statut 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'objet User . Voir Gérer les utilisateurs .

  • Dans vos règles de sécurité Firebase Realtime Database et Cloud Storage, vous pouvez obtenir 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 informations d'identification du fournisseur d'authentification à un compte utilisateur existant.

Pour déconnecter un utilisateur, appelez signOut :

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
,

Vous pouvez permettre à vos utilisateurs de s'authentifier auprès de Firebase à l'aide de leur identifiant Apple en utilisant le SDK Firebase pour effectuer le flux de connexion OAuth 2.0 de bout en bout.

Avant que tu commences

Pour connecter des utilisateurs à l'aide d'Apple, configurez d'abord la connexion avec Apple sur le site des développeurs d'Apple, puis activez Apple en tant que fournisseur de connexion pour votre projet Firebase.

Rejoignez le programme pour développeurs Apple

La connexion avec Apple ne peut être configurée que par les membres du programme pour développeurs Apple .

Configurer la connexion avec Apple

Sur le site des développeurs Apple , procédez comme suit :

  1. Associez votre site Web à votre application comme décrit dans la première section de Configurer la connexion avec Apple pour le Web . Lorsque vous y êtes invité, enregistrez l'URL suivante en tant qu'URL de retour :

    https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler

    Vous pouvez obtenir votre ID de projet Firebase sur la page des paramètres de la console Firebase .

    Lorsque vous avez terminé, prenez note de votre nouvel ID de service, dont vous aurez besoin dans la section suivante.

  2. Créez une connexion avec la clé privée Apple . Vous aurez besoin de votre nouvelle clé privée et de votre identifiant de clé dans la section suivante.
  3. Si vous utilisez l'une des fonctionnalités de Firebase Authentication qui envoie des e-mails aux utilisateurs, notamment la connexion par lien e-mail, la vérification de l'adresse e-mail, la révocation des modifications de compte, etc., configurez le service de relais de messagerie privé Apple et enregistrez noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (ou votre domaine de modèle d'e-mail personnalisé) afin qu'Apple puisse relayer les e-mails envoyés par Firebase Authentication vers des adresses e-mail Apple anonymisées.

Activer Apple en tant que fournisseur de connexion

  1. Ajoutez Firebase à votre projet .
  2. Dans la console Firebase , ouvrez la section Auth . Dans l'onglet Méthode de connexion , activez le fournisseur Apple . Spécifiez l'ID de service que vous avez créé dans la section précédente. De plus, dans la section Configuration du flux de code OAuth , spécifiez votre identifiant d'équipe Apple ainsi que la clé privée et l'ID de clé que vous avez créés dans la section précédente.

Se conformer aux exigences d'Apple en matière de données anonymisées

Se connecter avec Apple donne aux utilisateurs la possibilité d'anonymiser leurs données, y compris leur adresse e-mail, lors de la connexion. Les utilisateurs qui choisissent cette option ont des adresses e-mail avec le domaine privaterelay.appleid.com . Lorsque vous utilisez la connexion avec Apple dans votre application, vous devez vous conformer à toutes les politiques de développement ou conditions applicables d'Apple concernant ces identifiants Apple anonymisés.

Cela inclut l'obtention de tout consentement requis de l'utilisateur avant d'associer des informations personnelles d'identification directe à un identifiant Apple anonymisé. Lors de l'utilisation de l'authentification Firebase, cela peut inclure les actions suivantes :

  • Associez une adresse e-mail à un identifiant Apple anonymisé ou vice versa.
  • Associer un numéro de téléphone à un identifiant Apple anonymisé ou vice versa
  • Associez un identifiant social non anonyme (Facebook, Google, etc.) à un identifiant Apple anonymisé ou vice versa.

La liste ci-dessus n'est pas exhaustive. Reportez-vous au contrat de licence du programme pour développeurs Apple dans la section Adhésion de votre compte développeur pour vous assurer que votre application répond aux exigences d'Apple.

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 auprès de Firebase à l'aide de leurs comptes Apple consiste à gérer l'intégralité du flux de connexion avec le SDK JavaScript Firebase.

Pour gérer le flux de connexion avec le SDK JavaScript Firebase, procédez comme suit :

  1. Créez une instance d'un OAuthProvider à l'aide de l'ID de fournisseur correspondant apple.com .

    Web modular API

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('apple.com');

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('apple.com');
  2. Facultatif : Spécifiez des étendues OAuth 2.0 supplémentaires au-delà de la valeur par défaut que vous souhaitez demander au fournisseur d'authentification.

    Web modular API

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

    Web namespaced API

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

    Par défaut, lorsque l'option Un compte par adresse e-mail est activée, Firebase demande les étendues d'adresse e-mail et de nom. Si vous modifiez ce paramètre sur Plusieurs comptes par adresse e-mail , Firebase ne demande aucune étendue à Apple, sauf si vous les spécifiez.

  3. Facultatif : si vous souhaitez afficher l'écran de connexion d'Apple dans une langue autre que l'anglais, définissez le paramètre locale . Consultez la documentation Se connecter avec Apple pour connaître les paramètres régionaux pris en charge.

    Web modular API

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });

    Web namespaced API

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });
  4. Authentifiez-vous auprès de Firebase à l'aide de l'objet fournisseur OAuth. Vous pouvez inviter vos utilisateurs à se connecter avec leur compte Apple soit en ouvrant une fenêtre contextuelle, soit en redirigeant vers la page de connexion. La méthode de redirection est privilégiée sur les appareils mobiles.

    • Pour vous connecter avec une fenêtre pop-up, appelez signInWithPopup() :

      Web modular API

      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);
      
          // ...
        });

      Web namespaced API

      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 vous connecter en redirigeant vers la page de connexion, appelez signInWithRedirect() :

    Suivez les meilleures pratiques lorsque vous utilisez signInWithRedirect , linkWithRedirect ou reauthenticateWithRedirect .

    Web modular API

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

    Une fois que l'utilisateur a terminé sa connexion et est revenu à la page, vous pouvez obtenir le résultat de la connexion en appelant getRedirectResult() :

    Web modular API

    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);
    
        // ...
      });

    Web namespaced API

    // 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 ici que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la référence API .

    Contrairement à d'autres fournisseurs pris en charge par Firebase Auth, Apple ne fournit pas d'URL de photo.

    De plus, lorsque l'utilisateur choisit de ne pas partager son e-mail avec l'application, Apple fournit une adresse e-mail unique pour cet utilisateur (sous la forme xyz@privaterelay.appleid.com ), qu'il partage avec votre application. Si vous avez configuré le service de relais de messagerie privé, Apple transfère les e-mails envoyés à l'adresse anonymisée vers la véritable adresse e-mail de l'utilisateur.

    Apple ne partage les informations utilisateur telles que le nom d'affichage avec les applications que la première fois qu'un utilisateur se connecte. Habituellement, Firebase stocke le nom d'affichage la première fois qu'un utilisateur se connecte avec Apple, que vous pouvez obtenir avec firebase.auth().currentUser.displayName . Toutefois, si vous avez déjà utilisé Apple pour connecter un utilisateur à l'application sans utiliser Firebase, Apple ne fournira pas à Firebase le nom d'affichage de l'utilisateur.

Réauthentification et liaison de compte

Le même modèle peut être utilisé avec reauthenticateWithPopup() et reauthenticateWithRedirect() , que vous pouvez utiliser pour récupérer de nouvelles informations d'identification pour les opérations sensibles qui nécessitent une connexion récente :

Web modular API

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
const provider = new OAuthProvider('apple.com');

reauthenticateWithPopup(auth.currentUser, provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.

    // The signed-in user info.
    const user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // ...
  })
  .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);

    // ...
  });

Web namespaced API

const provider = new firebase.auth.OAuthProvider('apple.com');

firebase
  .auth()
  .currentUser
  .reauthenticateWithPopup(provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.
    /** @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 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;

    // ...
  });

Et vous pouvez utiliser linkWithPopup() et linkWithRedirect() pour lier différents fournisseurs d'identité aux comptes existants.

Notez qu'Apple exige que vous obteniez le consentement explicite des utilisateurs avant de lier leurs comptes Apple à d'autres données.

Par exemple, pour lier un compte Facebook au compte Firebase actuel, utilisez le jeton d'accès que vous avez obtenu en connectant l'utilisateur à Facebook :

Web modular API

import { getAuth, linkWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // ...

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Web namespaced API

const provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // Facebook additional data available in result.additionalUserInfo.profile,

      // Additional Facebook OAuth access token can also be retrieved.
      // result.credential.accessToken

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Authentifiez-vous avec Firebase dans une extension Chrome

Si vous créez une application d'extension Chrome, consultez le guide Documents hors écran .

Notez que vous devez toujours vérifier le domaine personnalisé auprès d'Apple de la même manière que le domaine firebaseapp.com par défaut :

http://auth.custom.example.com/.well-known/apple-developer-domain-association.txt

Révocation du jeton

Apple exige que les applications prenant en charge la création de compte permettent aux utilisateurs de lancer la suppression de leur compte dans l'application, comme décrit dans les directives d'examen de l'App Store.

Pour répondre à cette exigence, mettez en œuvre les étapes suivantes :

  1. Assurez-vous d'avoir rempli la section de configuration de l'ID de services et du flux de code OAuth de la configuration du fournisseur de connexion avec Apple, comme indiqué dans la section Configurer la connexion avec Apple .

  2. Étant donné que Firebase ne stocke pas les jetons utilisateur lorsque des utilisateurs sont créés avec Se connecter avec Apple, vous devez demander à l'utilisateur de se reconnecter avant de révoquer son jeton et de supprimer le compte.

    Ensuite, obtenez le jeton d'accès Apple OAuth auprès de OAuthCredential et utilisez-le pour appeler revokeAccessToken(auth, token) afin de révoquer le jeton d'accès Apple OAuth.

    const provider = new OAuthProvider('apple.com');
    provider.addScope('email');
    provider.addScope('name');
    
    const auth = getAuth();
    signInWithPopup(auth, provider).then(result => {
      // Get the Apple OAuth access token.
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
    
      // Revoke the Apple OAuth access token.
      revokeAccessToken(auth, accessToken)
        .then(() => {
          // Token revoked.
    
          // Delete the user account.
          // ...
        })
        .catch(error => {
          // An error happened.
          // ...
        });
    });
    
  3. Enfin, supprimez le compte utilisateur (et toutes les données associées).

Avancé : s'authentifier avec Firebase dans Node.js

Pour vous authentifier auprès de Firebase dans une application Node.js :

  1. Connectez l'utilisateur avec son compte Apple et obtenez le jeton d'identification Apple de l'utilisateur. Vous pouvez y parvenir de plusieurs manières. Par exemple, si votre application Node.js dispose d'une interface de navigateur :

    1. Sur votre backend, générez une chaîne aléatoire (un "nonce") et calculez son hachage SHA256. Le nonce est une valeur à usage unique que vous utilisez pour valider un seul aller-retour entre votre backend et les serveurs d'authentification d'Apple.

      Web modular API

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = (length) => {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        let nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Web namespaced API

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = function(length) {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        var nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');
    2. Sur votre page de connexion, spécifiez le nom occasionnel haché dans votre configuration de connexion avec Apple :

      <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
      <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
      <script>
          AppleID.auth.init({
              clientId: YOUR_APPLE_CLIENT_ID,
              scope: 'name email',
              redirectURI: URL_TO_YOUR_REDIRECT_HANDLER,  // See the next step.
              state: '[STATE]',  // Optional value that Apple will send back to you
                                 // so you can return users to the same context after
                                 // they sign in.
              nonce: HASHED_NONCE  // The hashed nonce you generated in the previous step.
          });
      </script>
      
    3. Obtenez le jeton d'identification Apple du côté serveur de réponse d'authentification POSTée :

      app.post('/redirect', (req, res) => {
        const savedState = req.cookies.__session;
        const code = req.body.code;
        const state = req.body.state;
        const appleIdToken = req.body.id_token;
        if (savedState !== state || !code) {
          res.status(403).send('403: Permission denied');
        } else {
          // Sign in with Firebase using appleIdToken. (See next step).
        }
      });
      

    Voir également Configuration de votre page Web pour la connexion avec Apple .

  2. Après avoir obtenu le jeton d'identification Apple de l'utilisateur, utilisez-le pour créer un objet Credential, puis connectez l'utilisateur avec les informations d'identification :

    Web modular API

    import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    
    // Build Firebase credential with the Apple ID token.
    const provider = new OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    signInWithCredential(auth, authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

    Web namespaced API

    // Build Firebase credential with the Apple ID token.
    const provider = new firebase.auth.OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    firebase.auth().signInWithCredential(authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

Prochaines étapes

Après qu'un utilisateur se connecte pour la première fois, un nouveau compte utilisateur est créé et lié aux informations d'identification (c'est-à-dire le nom d'utilisateur et le mot de passe, le numéro de téléphone ou les informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Ce nouveau compte est stocké dans le cadre de votre projet Firebase et peut être utilisé pour identifier un utilisateur dans chaque application de votre projet, quelle que soit la manière dont l'utilisateur se connecte.

  • Dans vos applications, la méthode recommandée pour connaître le statut 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'objet User . Voir Gérer les utilisateurs .

  • Dans vos règles de sécurité Firebase Realtime Database et Cloud Storage, vous pouvez obtenir 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 informations d'identification du fournisseur d'authentification à un compte utilisateur existant.

Pour déconnecter un utilisateur, appelez signOut :

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});