Google is committed to advancing racial equity for Black communities. See how.
Cette page a été traduite par l'API Cloud Translation.
Switch to English

S'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 exécuter 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 Apple Developer Program

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 identifiant 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 ID de clé dans la section suivante.
  3. Si vous utilisez l'une des fonctionnalités de Firebase Authentication qui envoient des e-mails aux utilisateurs, y compris la connexion par lien de messagerie, la vérification de l'adresse e-mail, la révocation de changement de compte, etc., configurez le service de relais de messagerie privé Apple et inscrivez-vous à l' 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. En outre, dans la section de 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 offre aux utilisateurs la possibilité de rendre anonyme leurs données, y compris leur adresse e-mail, lors de la privaterelay.appleid.com . 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 applicables aux développeurs ou aux conditions d'Apple concernant ces identifiants Apple anonymisés.

Cela inclut l'obtention du consentement de l'utilisateur requis avant d'associer toute information personnelle identifiant directement à un identifiant Apple anonymisé. Lorsque vous utilisez l'authentification Firebase, cela peut inclure les actions suivantes:

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

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

Gérez 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 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 .

    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.

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

    Par défaut, lorsqu'un compte par adresse e-mail est activé, Firebase demande des portées d'e-mail et de nom. Si vous définissez 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 locale paramètres locale . Consultez la documentation relative à la connexion avec Apple pour connaître les paramètres régionaux pris en charge.

    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 leurs comptes Apple en ouvrant une fenêtre contextuelle ou en les redirigeant vers la page de connexion. La méthode de redirection est préférée sur les appareils mobiles.

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

      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;
      
          // ...
        })
        .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 signInWithRedirect() , appelez signInWithRedirect() :

      firebase.auth().signInWithRedirect(provider);

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

      // 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;
      
            // ...
          }
          // 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 obtenir la liste des codes d'erreur, consultez la référence API .

    Contrairement aux 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 xyz@privaterelay.appleid.com une adresse e-mail unique pour cet utilisateur (de 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 anonyme vers la véritable adresse e-mail de l'utilisateur.

    Apple partage uniquement les informations utilisateur telles que le nom d'affichage avec les applications la première fois qu'un utilisateur se firebase.auth().currentUser.displayName . Habituellement, Firebase stocke le nom d'affichage la première fois qu'un utilisateur se firebase.auth().currentUser.displayName avec Apple, que vous pouvez obtenir avec firebase.auth().currentUser.displayName . Cependant, 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 une nouvelle information d'identification pour les opérations sensibles qui nécessitent une connexion récente:

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;

    // ...
  })
  .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é à des comptes existants.

Notez qu'Apple vous demande d'obtenir 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 vous connectant à Facebook:

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

S'authentifier avec Firebase dans une extension Chrome

Si vous créez une application d'extension Chrome, vous devez ajouter votre ID d'extension Chrome:

  1. Ouvrez votre projet dans la console Firebase .
  2. Dans la section Authentification , ouvrez la page Méthode de connexion.
  3. Ajoutez un URI comme celui-ci à la liste des domaines autorisés:
    chrome-extension://CHROME_EXTENSION_ID

Seules les opérations contextuelles ( signInWithPopup et linkWithPopup ) sont disponibles pour les extensions Chrome, car les extensions Chrome ne peuvent pas utiliser les redirections HTTP. Vous devez appeler ces méthodes à partir d'un script d'arrière-plan plutôt que d'une fenêtre contextuelle d'action du navigateur, car la fenêtre contextuelle d'authentification annulera la fenêtre contextuelle d'action du navigateur.

Dans le fichier manifeste de votre extension Chrome, assurez-vous d'ajouter l'URL https://apis.google.com à la liste d'autorisation content_security_policy .

Notez que vous devez toujours vérifier le domaine personnalisé avec 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

Avancé: authentifiez-vous avec Firebase dans Node.js

Pour vous authentifier avec 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 accomplir cela de plusieurs manières. Par exemple, si votre application Node.js a 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 aller-retour unique entre votre backend et les serveurs d'authentification d'Apple.

      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.substr(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 nonce haché dans votre configuration 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 la 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).
        }
      });
      

    Consultez également la section Configuration de votre page Web pour vous connecter avec Apple .

  2. Une fois que vous avez obtenu le jeton d'identifiant Apple de l'utilisateur, utilisez-le pour créer un objet Credential, puis connectez-vous à l'utilisateur avec les informations d'identification:

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

Lorsqu'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 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' User 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 liant les informations d'identification du fournisseur d'authentification à un compte d'utilisateur existant.

Pour déconnecter un utilisateur, appelez l' signOut

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