S'authentifier avec Apple avec JavaScript

Vous pouvez autoriser vos utilisateurs à s'authentifier avec 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 de commencer

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

Rejoindre l'Apple Developer Program

Seuls les membres de l'équipe Apple Developer peuvent configurer la fonctionnalité Se connecter avec Apple Google Cloud.

Configurer la connexion avec Apple

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

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

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

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

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

  2. Créez un Connectez-vous avec une clé privée Apple. Vous aurez besoin de votre nouvelle clé privée et de son 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 via un lien e-mail, la validation d'adresse e-mail, la révocation de la modification de compte, etc., configurez le service de relais de messagerie privé d'Apple et enregistrez noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com (ou votre domaine de modèle d'e-mail personnalisé) afin qu'Apple puisse transférer les e-mails envoyés par Firebase Authentication vers des adresses e-mail Apple anonymisées.

Activer Apple comme fournisseur de connexion

  1. Ajoutez Firebase à votre projet.
  2. Dans la console Firebase, ouvrez la section Authentification. Dans l'onglet Méthode de connexion, activer le fournisseur Apple. Indiquez l'ID de service que vous avez créé dans la section précédente. Dans la section Configuration du flux de code OAuth, indiquez également votre ID 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.

Respecter les exigences d'Apple concernant les données anonymisées

Se connecter avec Apple permet aux utilisateurs d'anonymiser leurs données, y compris leur adresse e-mail, lorsqu'ils se connectent. Utilisateurs qui choisissent cette option possèdent des adresses e-mail avec le domaine privaterelay.appleid.com. Quand ? vous utilisez Se connecter avec Apple dans votre application, vous devez vous conformer aux les règles pour les développeurs ou les conditions d'utilisation d'Apple concernant ces données anonymisées ID.

Cela inclut l'obtention du consentement requis de l'utilisateur avant que associer des données permettant de vous identifier directement à une adresse e-mail anonyme ID. Lorsque vous utilisez Firebase Authentication, cela peut inclure les actions suivantes :

  • Associez 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 (Facebook, Google, etc.) à un identifiant Apple anonyme, ou inversement

La liste ci-dessus n'est pas exhaustive. Consulter l'Apple Developer Program dans la section "Abonnement" de votre compte de développeur assurez-vous 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éez une instance de OAuthProvider en utilisant la ID de fournisseur apple.com.

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');
    auth_apple_provider_create.js

    Web

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

  2. Facultatif:spécifiez des champs d'application OAuth 2.0 supplémentaires par défaut que vous souhaitez demander au fournisseur d'authentification.

    Web

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

    Web

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

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

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

    Web

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

    Web

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

  4. Authentifiez-vous avec Firebase à l'aide de l'objet du fournisseur OAuth. Vous pouvez inviter vos utilisateurs à se connecter avec leur compte Apple en ouvrant un ou en vous redirigeant vers la page de connexion. La méthode de redirection est de préférence sur les appareils mobiles.

    • Pour vous connecter à l'aide d'une fenêtre pop-up, appelez signInWithPopup() :

      Web

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

    // ...
  });
      auth_apple_signin_popup.js

      Web

      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;

    // ...
  });
      apple.js

    • Pour vous connecter en redirigeant vers la page de connexion, appelez signInWithRedirect() :

    Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_apple_signin_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider);
    apple.js

    Une fois que l'utilisateur s'est connecté et est revenu sur la page, vous pouvez obtenir le résultat de connexion en appelant getRedirectResult():

    Web

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

    // ...
  });
    auth_apple_signin_redirect_result.js

    Web

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

    // ...
  });
    apple.js

    C'est également là que vous pouvez détecter et gérer les erreurs. Pour obtenir la liste des codes d'erreur, consultez la documentation de référence de l'API.

    Contrairement à d'autres fournisseurs compatibles avec Firebase Auth, Apple ne fournit pas URL de la photo.

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

    Apple ne partage des informations utilisateur, telles que le nom à afficher, qu'avec les applications la première fois qu'un utilisateur se connecte. En général, Firebase stocke le nom à afficher la première fois qu'un utilisateur se connecte avec Apple, firebase.auth().currentUser.displayName Toutefois, si vous utilisiez auparavant Apple pour connecter un utilisateur à l'application utilisant Firebase, Apple ne fournira pas à Firebase le nom à afficher de l'utilisateur.

Réauthentification et association de comptes

Le même schéma peut être utilisé avec reauthenticateWithPopup() et reauthenticateWithRedirect(), que vous pouvez utiliser pour récupérer pour effectuer des opérations sensibles nécessitant une connexion récente:

Web

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

    // ...
  });
auth_apple_reauthenticate_popup.js

Web

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;

    // ...
  });
apple.js

Vous pouvez également utiliser linkWithPopup() et linkWithRedirect() pour associer différents de fournisseurs d'identité aux 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 associer un compte Facebook au compte Firebase actuel, utilisez le jeton d'accès obtenu lorsque vous avez connecté l'utilisateur à Facebook :

Web

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

Web

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

S'authentifier avec Firebase dans une extension Chrome

Si vous développez une application d'extension Chrome, consultez la Guide des documents hors écran

Notez que vous devez toujours valider le domaine personnalisé auprès d'Apple, comme pour le domaine firebaseapp.com par défaut :

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

Révocation des jetons

Apple exige que les applications permettant de créer un compte doivent permettre aux utilisateurs de lancer la suppression de leur compte dans l'application, comme décrit dans les Consignes d'examen de l'App Store.

Pour répondre à cette exigence, procédez comme suit:

  1. Assurez-vous d'avoir rempli le ID du service et le flux de code OAuth configuration de la configuration du fournisseur Se connecter avec Apple, en tant que décrit dans la section Configurer la connexion avec Apple .

  2. Étant donné que Firebase ne stocke pas les jetons utilisateur lorsque les 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.

    Obtenez ensuite le jeton d'accès Apple OAuth via OAuthCredential. Utilisez-le pour appeler revokeAccessToken(auth, token) afin de révoquer l'authentification OAuth Apple un jeton d'accès.

    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é : Authentifier avec Firebase dans Node.js

Pour vous authentifier avec Firebase dans une application Node.js, procédez comme suit:

  1. Connecter l'utilisateur avec son compte Apple et obtenir son identifiant Apple à partir d'un jeton d'accès. Pour ce faire, vous pouvez procéder de différentes manières. Par exemple, si votre 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 aller-retour unique entre votre backend et les serveurs d'authentification d'Apple.

      Web

      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');
      auth_apple_nonce_node.js

      Web

      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');
      apple.js

    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'ID Apple à partir de la réponse d'authentification POST côté serveur :

      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 Configurer votre page Web pour Se connecter avec Apple.

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

    Web

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

    Web

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

Étapes suivantes

Lorsqu'un utilisateur se connecte pour la première fois, un compte utilisateur est créé et associé aux identifiants (nom d'utilisateur et mot de passe, numéro de téléphone ou informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Cette nouvelle est stocké dans votre projet Firebase et peut servir à identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la façon 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'objet User. Consultez 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 identifiants du fournisseur d'authentification à un compte utilisateur existant.

Pour déconnecter un utilisateur, appelez . signOut:

Web

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

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

Web

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