Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Autenticar usando Microsoft con JavaScript

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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

Antes de que empieces

Para que los usuarios inicien sesión con 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. Agregue Firebase a su proyecto de JavaScript .
  2. En Firebase console , abra 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 de la consola de desarrollador de ese proveedor a la configuración del proveedor:
    1. Para registrar un cliente de Microsoft OAuth, siga las instrucciones de Inicio rápido: registrar una aplicación con el extremo de Azure Active Directory v2.0 . Tenga en cuenta que este punto final admite el inicio de sesión con cuentas personales de Microsoft, así como con 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. Haga clic en Guardar .

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

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

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 con el ID de proveedor microsoft.com .

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. Opcional : especifique parámetros de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth.

    Web version 9

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

    Web version 8

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

    Para conocer los parámetros compatibles con Microsoft, consulte la documentación de Microsoft OAuth . Tenga en cuenta que no puede pasar parámetros requeridos por Firebase con setCustomParameters() . Estos parámetros son client_id , response_type , redirect_uri , state , scope y response_mode .

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

    Web version 9

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

    Web version 8

    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'
    });
  3. Opcional : especifique ámbitos de OAuth 2.0 adicionales más allá del perfil básico que desee solicitar al proveedor de autenticación.

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

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

  4. Autenticarse con Firebase mediante el objeto del 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, llama a signInWithPopup :

    Web version 9

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

    Web version 8

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

    Web version 9

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    Después de que el usuario complete el inicio de sesión y regrese a la página, puede obtener el resultado del inicio de sesión llamando a getRedirectResult .

    Web version 9

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

    Web version 8

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

    Al completarse con éxito, 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 admitidos por 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 . El reclamo sub en el token de ID es específico de la aplicación y no coincidirá con el identificador de usuario federado que usa Firebase Auth y al que se puede acceder a través user.providerData[0].uid . En su lugar, se debe utilizar el campo de reclamación oid . Al usar un arrendatario de Azure AD para iniciar sesión, la 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á la forma 00000000-0000-0000-4b2e-abcdefghijkl .

  5. Si bien los ejemplos anteriores se enfocan en los flujos de inicio de sesión, también tiene la capacidad 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 version 9

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

    Web version 8

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

    Web version 9

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

    Web version 8

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, debe agregar su ID de extensión de Chrome:

  1. Abra su proyecto en la consola de Firebase .
  2. En la sección Autenticación , abra la página Método de inicio de sesión .
  3. Agregue un URI como el siguiente a la lista de dominios autorizados:
    chrome-extension://CHROME_EXTENSION_ID

Solo las operaciones emergentes ( signInWithPopup , linkWithPopup y reauthenticateWithPopup ) están disponibles para las extensiones de Chrome, ya que las extensiones de Chrome no pueden usar redireccionamientos HTTP. Debe llamar a estos métodos desde un script de página de fondo en lugar de una ventana emergente de acción del navegador, ya que la ventana emergente de autenticación cancelará la ventana emergente de acción del navegador. Los métodos emergentes solo se pueden usar en extensiones que usan Manifest V2 . El Manifest V3 más nuevo solo permite scripts en segundo plano en forma de trabajadores de servicio, que no pueden realizar las operaciones emergentes en absoluto.

En el archivo de manifiesto de su extensión de Chrome, asegúrese de agregar la URL https://apis.google.com a la lista de permitidos content_security_policy .

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 establecer un observador en el objeto Auth . A continuación, puede obtener la información básica del perfil del User del objeto Usuario. Consulte Administrar usuarios .

  • En sus Reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión 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 varios 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 a 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.
});