Autenticar usando Microsoft con JavaScript,Autenticarse usando Microsoft con JavaScript

Puede permitir que sus usuarios se autentiquen con Firebase utilizando proveedores de OAuth como Microsoft Azure Active Directory integrando el inicio de sesión OAuth genérico en su aplicación utilizando el SDK de Firebase para llevar a cabo el flujo de inicio de sesión de un extremo a otro.

Antes de que empieces

Para iniciar sesión de usuarios usando cuentas de Microsoft (Azure Active Directory y cuentas personales de Microsoft), primero debe habilitar Microsoft como proveedor de inicio de sesión para su proyecto de Firebase:

  1. Agrega Firebase a tu proyecto de JavaScript .
  2. En Firebase console , abre la sección Auth .
  3. En la pestaña Método de inicio de sesión , habilite el proveedor de Microsoft .
  4. Agregue el ID de cliente y el Secreto de cliente desde la consola de desarrollador de ese proveedor a la configuración del proveedor:
    1. Para registrar un cliente Microsoft OAuth, siga las instrucciones de Inicio rápido: Registrar una aplicación con el punto final de Azure Active Directory v2.0 . Tenga en cuenta que este punto final admite el inicio de sesión mediante cuentas personales de Microsoft, así como cuentas de Azure Active Directory. Obtenga más información sobre Azure Active Directory v2.0.
    2. Al registrar aplicaciones con estos proveedores, asegúrese de registrar el dominio *.firebaseapp.com para su proyecto como dominio de redireccionamiento para su aplicación.
  5. Clic en Guardar .

Maneja el flujo de inicio de sesión con el SDK de Firebase

Si está creando una aplicación web, la forma más sencilla de autenticar a sus usuarios con Firebase utilizando sus cuentas de Microsoft es manejar todo el flujo de inicio de sesión con el SDK de JavaScript de Firebase.

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

  1. Cree una instancia de OAuthProvider utilizando el ID de proveedor microsoft.com .

    Web modular API

    import { OAuthProvider } from "firebase/auth";

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

    Web namespaced API

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

  2. Opcional : especifique parámetros OAuth personalizados adicionales que desee enviar con la solicitud OAuth.

    Web modular API

    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 namespaced API

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

    Para conocer los parámetros que admite Microsoft, consulte la documentación de Microsoft OAuth . Ten en cuenta que no puedes pasar los parámetros requeridos por Firebase con setCustomParameters() . Estos parámetros son client_id , tipo_respuesta , redirección_uri , estado , alcance y modo_respuesta .

    Para permitir que solo los usuarios de un inquilino de Azure AD en particular inicien sesión en la aplicación, se puede usar el nombre de dominio descriptivo del inquilino de Azure AD o el identificador GUID del inquilino. Esto se puede hacer especificando el campo "inquilino" en el objeto de parámetros personalizados.

    Web modular API

    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 namespaced API

    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. Opcional : especifique alcances de OAuth 2.0 adicionales más allá del perfil básico que desea solicitar al proveedor de autenticación.

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

    Para obtener más información, consulte la documentación de permisos y consentimiento de Microsoft .

  4. Autentíquese con Firebase utilizando el objeto proveedor de OAuth. Puede solicitar a sus usuarios que inicien sesión con sus cuentas de Microsoft abriendo una ventana emergente o redirigiéndolos a la página de inicio de sesión. Se prefiere el método de redireccionamiento en dispositivos móviles.

    • Para iniciar sesión con una ventana emergente, llame signInWithPopup :

    Web modular API

    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 namespaced API

    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
    • Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect :

    Siga las mejores prácticas al utilizar signInWithRedirect , linkWithRedirect o reauthenticateWithRedirect .

    Web modular API

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

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

    Web namespaced API

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

    Una vez que el usuario completa el inicio de sesión y regresa a la página, puede obtener el resultado del inicio de sesión llamando getRedirectResult .

    Web modular API

    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 namespaced API

    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

    Una vez completado correctamente, el token de acceso de OAuth asociado con el proveedor se puede recuperar del objeto firebase.auth.UserCredential devuelto.

    Con el token de acceso de OAuth, puede llamar a la API de Microsoft Graph .

    Por ejemplo, para obtener la información básica del perfil, se puede llamar a la siguiente API REST:

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

    A diferencia de otros proveedores compatibles con Firebase Auth, Microsoft no proporciona una URL de foto y, en su lugar, los datos binarios para una foto de perfil deben solicitarse a través de Microsoft Graph API .

    Además del token de acceso de OAuth, el token de ID de OAuth del usuario también se puede recuperar del objeto firebase.auth.UserCredential . La sub en el token de ID es específica de la aplicación y no coincidirá con el identificador de usuario federado utilizado por Firebase Auth y al que se puede acceder a través de user.providerData[0].uid . En su lugar, se debe utilizar el campo de reclamo oid . Cuando se utiliza un inquilino de Azure AD para iniciar sesión, la notificación oid será una coincidencia exacta. Sin embargo, para el caso de no inquilino, el campo oid se rellena. Para un ID federado 4b2eabcdefghijkl , el oid tendrá el formato 00000000-0000-0000-4b2e-abcdefghijkl .

  5. Si bien los ejemplos anteriores se centran en los flujos de inicio de sesión, también tiene la posibilidad de vincular un proveedor de Microsoft a un usuario existente mediante linkWithPopup / linkWithRedirect . Por ejemplo, puede vincular varios proveedores al mismo usuario, permitiéndoles iniciar sesión con cualquiera de ellos.

    Web modular API

    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 namespaced API

    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. Se puede usar el mismo patrón con reauthenticateWithPopup / reauthenticateWithRedirect , que se puede usar para recuperar credenciales nuevas para operaciones confidenciales que requieren un inicio de sesión reciente.

    Web modular API

    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 namespaced API

    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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, consulte la guía Documentos fuera de pantalla .

Próximos pasos

Después de que un usuario inicia sesión por primera vez, se crea una nueva cuenta de usuario y se vincula a las credenciales (es decir, el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) con las que el usuario inició sesión. Esta nueva cuenta se almacena como parte de su proyecto de Firebase y se puede usar para identificar a un usuario en cada aplicación de su proyecto, independientemente de cómo inicie sesión el usuario.

  • En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .

  • En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Puede permitir que los usuarios inicien sesión en su aplicación utilizando múltiples proveedores de autenticación vinculando las credenciales del proveedor de autenticación a una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

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 namespaced API

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