S'authentifier à l'aide de Microsoft avec JavaScript

Vous pouvez autoriser vos utilisateurs à s'authentifier avec Firebase à l'aide de fournisseurs OAuth tels que Microsoft Azure Active Directory en intégrant la connexion OAuth générique à votre application à l'aide du SDK Firebase pour effectuer le flux de connexion de bout en bout.

Avant de commencer

Pour permettre aux utilisateurs de se connecter à l'aide de comptes Microsoft (Azure Active Directory et comptes Microsoft personnels), vous devez d'abord activer Microsoft en tant que fournisseur de connexion pour votre projet Firebase:

  1. Ajoutez Firebase à votre projet JavaScript.
  2. Dans la console Firebase, ouvrez la section Authentification.
  3. Dans l'onglet Mode de connexion, activez le fournisseur Microsoft.
  4. Ajoutez l'ID client et le code secret du client de la console de développement du fournisseur à la configuration du fournisseur :
    1. Pour enregistrer un client OAuth Microsoft, suivez les instructions de la section Démarrage rapide: enregistrer une application avec le point de terminaison Azure Active Directory v2.0. Notez que ce point de terminaison est compatible avec la connexion à l'aide de comptes personnels Microsoft et de comptes Azure Active Directory. En savoir plus sur Azure Active Directory v2.0
    2. Lorsque vous enregistrez des applications auprès de ces fournisseurs, veillez à enregistrer le domaine *.firebaseapp.com de votre projet comme domaine de redirection de votre application.
  5. Cliquez sur Enregistrer.

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 Microsoft consiste à gérer l'ensemble du flux de connexion avec le SDK JavaScript Firebase.

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

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

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
    auth_msft_create_provider.js

    Web

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    microsoft-oauth.js

  2. Facultatif: spécifiez des paramètres OAuth personnalisés supplémentaires que vous souhaitez envoyer avec la requête OAuth.

    Web

    provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});
    auth_msft_provider_params.js

    Web

    provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});
    microsoft-oauth.js

    Pour connaître les paramètres compatibles avec Microsoft, consultez la documentation Microsoft OAuth. Notez que vous ne pouvez pas transmettre de paramètres requis par Firebase avec setCustomParameters(). Ces paramètres sont client_id, response_type, redirect_uri, state, scope et response_mode.

    Pour n'autoriser que les utilisateurs d'un locataire Azure AD particulier à se connecter à l'application, vous pouvez utiliser le nom de domaine convivial du locataire Azure AD ou son identifiant GUID. Pour ce faire, spécifiez le champ "tenant" dans l'objet des paramètres personnalisés.

    Web

    provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});
    auth_msft_provider_params_tenant.js

    Web

    provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});
    microsoft-oauth.js

  3. Facultatif: spécifiez des champs d'application OAuth 2.0 supplémentaires au-delà du profil de base que vous souhaitez demander au fournisseur d'authentification.

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Pour en savoir plus, consultez la documentation Microsoft sur les autorisations et le consentement.

  4. Authentifiez-vous avec Firebase à l'aide de l'objet du fournisseur OAuth. Vous pouvez inviter vos utilisateurs à se connecter avec leur compte Microsoft en ouvrant une fenêtre pop-up ou en les redirigeant vers la page de connexion. La méthode de redirection est préférable 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) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    auth_msft_signin_popup.js

    Web

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    microsoft-oauth.js
    • Pour vous connecter en redirigeant vers la page de connexion, appelez signInWithRedirect:

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

    Web

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

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

    Web

    firebase.auth().signInWithRedirect(provider);
    microsoft-oauth.js

    Une fois que l'utilisateur a terminé la connexion et est revenu sur la page, vous pouvez obtenir le résultat de la connexion en appelant getRedirectResult.

    Web

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

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    auth_msft_signin_redirect_result.js

    Web

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    microsoft-oauth.js

    Une fois l'opération terminée, le jeton d'accès OAuth associé au fournisseur peut être récupéré à partir de l'objet firebase.auth.UserCredential renvoyé.

    À l'aide du jeton d'accès OAuth, vous pouvez appeler l'API Microsoft Graph.

    Par exemple, pour obtenir les informations de base sur le profil, vous pouvez appeler l'API REST suivante:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me

    Contrairement aux autres fournisseurs acceptés par Firebase Auth, Microsoft ne fournit pas d'URL de photo. Les données binaires d'une photo de profil doivent être demandées via l'API Microsoft Graph.

    En plus du jeton d'accès OAuth, le jeton d'ID OAuth de l'utilisateur peut également être récupéré à partir de l'objet firebase.auth.UserCredential. La revendication sub dans le jeton d'identification est spécifique à l'application et ne correspond pas à l'identifiant utilisateur fédéré utilisé par Firebase Auth et accessible via user.providerData[0].uid. Utilisez plutôt le champ de revendication oid. Lorsque vous utilisez un locataire Azure AD pour vous connecter, la revendication oid correspond exactement. Toutefois, dans le cas d'un locataire, le champ oid est rempli. Pour un ID fédéré 4b2eabcdefghijkl, oid aura la forme 00000000-0000-0000-4b2e-abcdefghijkl.

  5. Bien que les exemples ci-dessus se concentrent sur les flux de connexion, vous pouvez également associer un fournisseur Microsoft à un utilisateur existant à l'aide de linkWithPopup/linkWithRedirect. Par exemple, vous pouvez associer plusieurs fournisseurs au même utilisateur, ce qui lui permet de se connecter avec l'un ou l'autre.

    Web

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

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();

linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });
    auth_msft_link_popup.js

    Web

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    microsoft-oauth.js

  6. Le même schéma peut être utilisé avec reauthenticateWithPopup/reauthenticateWithRedirect, qui permet de récupérer de nouveaux identifiants pour les opérations sensibles qui nécessitent une connexion récente.

    Web

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

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();
reauthenticateWithPopup(auth.currentUser, provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });
    auth_msft_reauth_popup.js

    Web

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });
    microsoft-oauth.js

S'authentifier avec Firebase dans une extension Chrome

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

É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é. Ce nouveau compte est stocké dans votre projet Firebase et peut être utilisé pour identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la manière dont il 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'utilisateur à partir de l'objet User. Consultez la section 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