Catch up on everthing we announced at this year's Firebase Summit. Learn more

Authentification à l'aide d'Apple avec JavaScript

Vous pouvez autoriser vos utilisateurs à 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 les 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

Connectez - vous avec d' Apple ne peut être configuré par les membres du programme Apple Developer .

Configurer la connexion avec Apple

Sur le Apple Developer site, procédez comme suit:

  1. Associer votre site Web à votre application comme décrit dans la première section de Configurer Connectez - vous 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 projet Firebase ID sur la page de la console Firebase .

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

  2. Créer un signe avec Apple clé privée . 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 Firebase authentification des fonctionnalités qui envoient des e - mails aux utilisateurs, y compris les e - mail lien de connexion, adresse e - mail de vérification, compte révocation du changement, et d' autres, configurer le service de relais de courrier électronique privé d' noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com Apple et vous inscrire 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. Ajouter Firebase à votre projet .
  2. Dans la console Firebase , ouvrez la section Auth. Sur l'onglet Connexion méthode, permettre au fournisseur d' Apple. Spécifiez l'ID de service que vous avez créé dans la section précédente. En outre, dans la section de configuration de flux de code OAuth, spécifiez votre Apple ID et équipe la clé privée et clé ID que vous avez créé dans la section précédente.

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

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

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

  • Associez une adresse e-mail à un identifiant Apple anonymisé ou vice versa.
  • Lier 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 Abonnement 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 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éer une instance d'un OAuthProvider utilisant le fournisseur correspondant ID apple.com.

    Web version 9

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

    Web version 8

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

    Web version 9

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

    Web version 8

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

    Par défaut, quand on compte par adresse e - mail est activée, Firebase demande champs e - mail et nom. Si vous modifiez ce paramètre à plusieurs comptes par adresse e - mail, Firebase ne demande pas de champs d' application d'Apple à moins que vous spécifiez.

  3. Facultatif: Si vous voulez afficher le signe dans l' écran d'Apple dans une langue autre que l' anglais, définissez le locale paramètre. Voir le Connectez - vous avec docs d' Apple pour les paramètres régionaux pris en charge.

    Web version 9

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

    Web version 8

    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 pop-up, appel signInWithPopup() :

      Web version 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;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 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;
      
          // ...
        })
        .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 la page de connexion, appelez signInWithRedirect() :

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);

      Une fois que les utilisateurs finalise la connexion et retourne à la page, vous pouvez obtenir le signe en résultat en appelant getRedirectResult() :

      Web version 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.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

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

    En outre, lorsque l'utilisateur choisit de ne pas partager leur e - mail avec l'application, les dispositions d' Apple une adresse e - mail unique pour cet utilisateur (de la forme xyz@privaterelay.appleid.com ), qu'elle 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 ne partage les informations utilisateur telles que le nom d'affichage avec des applications la première fois un utilisateur se connecte. Habituellement, les magasins Firebase le nom d'affichage de la première fois qu'un utilisateur se connecte 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 schéma peut être utilisé avec reauthenticateWithPopup() et reauthenticateWithRedirect() , que vous pouvez utiliser pour récupérer un titre frais pour les opérations sensibles qui nécessitent de connexion récente:

Web version 9

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.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });

Web version 8

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 relier les 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 version 9

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 version 8

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 de connexion de la méthode.
  3. Ajouter un URI comme suit à la liste des domaines autorisés:
    chrome-extension://CHROME_EXTENSION_ID

Seules les opérations popup ( signInWithPopup , linkWithPopup et reauthenticateWithPopup ) sont disponibles pour des extensions Chrome, comme des extensions Chrome ne peuvent pas utiliser les redirections HTTP. Vous devez appeler ces méthodes à partir d'un script de page 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. Les méthodes pop - up ne peuvent être utilisés dans les extensions en utilisant Manifest V2 . La nouvelle Manifest V3 permet uniquement des scripts de base sous la forme des travailleurs de services qui ne peuvent pas effectuer les opérations de pop - up du tout.

Dans votre marque de fichier manifeste d'extension Chrome vous que vous ajoutez l' https://apis.google.com URL à la content_security_policy allowlist.

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

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

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

Pour s'authentifier avec Firebase dans une application Node.js :

  1. Connectez-vous à 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'un navigateur frontal :

    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.

      Web version 9

      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.substr(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Web version 8

      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 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'identifiant Apple à partir du serveur de réponse d'authentification POSTed :

      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 aussi Configuration de votre page Web pour identifier 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-vous à l'utilisateur avec les informations d'identification :

    Web version 9

    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 version 8

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

Une fois qu'un utilisateur se connecte pour la première fois, un nouveau compte d'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'autorisation, avec lesquelles 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, quel que soit le mode de connexion de l'utilisateur.

  • Dans vos applications, la méthode recommandée pour connaître l'état de votre auth utilisateur de définir un observateur sur le Auth objet. Vous pouvez obtenir des informations sur le profil de base de l'utilisateur de l' User objet. Voir Gérer les utilisateurs .

  • Dans votre base de données et en temps réel Firebase Cloud Storage Les règles de auth sécurité , vous pouvez obtenir la signature dans ID d'utilisateur unique de l' utilisateur de la auth variable et l' utiliser pour contrôler les données d' un accès utilisateur peut.

Vous pouvez permettre aux utilisateurs de se connecter à votre application à l' aide des fournisseurs d'authentification multiples en reliant les informations d' identification de fournisseur auth à un compte d'utilisateur existant.

Pour vous déconnecter un utilisateur, appelez signOut :

Web version 9

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

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

Web version 8

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