Permitir que los usuarios accedan con Microsoft

En este documento se muestra cómo usar Identity Platform para acceder a los usuarios con Microsoft. Se admiten las cuentas personales de Microsoft y las cuentas de Azure Active Directory (Azure AD).

Antes de comenzar

En este instructivo, se supone que ya habilitaste Identity Platform y que tienes una aplicación web básica escrita con HTML y JavaScript. Consulta la Guía de inicio rápido para aprender a hacer esto.

Configura Microsoft como proveedor

Para configurar Microsoft como un proveedor de identidad, haz lo siguiente:

  1. Ve a la página Proveedores de identidad en la consola de Google Cloud.

    Ir a la página Proveedores de identidad

  2. Haz clic en Agregar un proveedor.

  3. Selecciona Microsoft en la lista.

  4. Ingresa el ID de la aplicación de Microsoft y el secreto de la aplicación. Si aún no tienes un ID y un secreto, sigue los pasos de la Guía de inicio rápido: Registra una app con el extremo de Azure AD v2.0 para obtener uno.

    Este extremo admite las cuentas personales de Microsoft y las cuentas de Azure AD. Consulta la descripción general de Microsoft Identity Platform (v2.0) para obtener más información sobre Azure AD.

  5. Configura el URI que se enumera en Configura Microsoft como el URI de redireccionamiento de OAuth válido para tu app de Microsoft. Si configuraste un dominio personalizado en Identity Platform, actualiza el URI de redireccionamiento en la configuración de tu app de Microsoft para usar el dominio personalizado en lugar del predeterminado. Por ejemplo, cambia https://myproject.firebaseapp.com/__/auth/handler a https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Para registrar los dominios de tu app, haz clic en Agregar dominio en Dominios autorizados. Para fines de desarrollo, localhost ya está habilitado de forma predeterminada.

  7. En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu app para inicializar el SDK de cliente de Identity Platform.

  8. Haz clic en Guardar.

Acceso de los usuarios con el SDK de cliente

  1. Crea una instancia del objeto OAuthProvider y pasa microsoft.com como el ID del proveedor:

    JavaScript

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

  2. Opcional: Agrega permisos de OAuth. Los permisos especifican qué datos solicitas de Microsoft. Los datos más sensibles pueden requerir permisos específicos. Consulta la documentación de Microsoft para determinar los permisos que necesita tu app.

    JavaScript

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    
  3. Opcional: Especifica parámetros personalizados de OAuth adicionales. Estos son específicos de Microsoft y, por lo general, se usan para personalizar la experiencia de autenticación.

    JavaScript

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

    Puedes usar el parámetro mkt para personalizar el lenguaje del flujo de autenticación. Por ejemplo:

    provider.setCustomParameters({
      mkt: 'fr'
    });
    

    Puedes usar la propiedad tenant para limitar el acceso a los usuarios fuera de un dominio de Azure AD en particular. Especifica el nombre de dominio descriptivo de la instancia o su identificador de GUID. Los usuarios que no estén dentro de este dominio no podrán acceder. Por ejemplo:

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

    Consulta la documentación de OAuth de Microsoft para obtener una lista completa de los parámetros que admite Microsoft. Ten en cuenta que no puedes pasar parámetros reservados por OAuth o Identity Platform.

  4. Usa el objeto OAuthProvider para permitir que el usuario acceda. Puedes abrir una ventana emergente o redireccionar la página actual. El redireccionamiento es más sencillo para los usuarios de dispositivos móviles.

    Para mostrar una ventana emergente, llama a signInWithPopup():

    JavaScript

    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 redireccionar la página, primero llama a signInWithRedirect():

    Sigue las prácticas recomendadas cuando uses signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    JavaScript

    firebase.auth().signInWithRedirect(provider);

    Luego, llama a getRedirectResult() cuando tu página cargue para recuperar el token de Microsoft:

    JavaScript

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

Una vez que tengas un token de acceso, puedes usarlo para llamar a la API de Microsoft Graph. Por ejemplo:

REST

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

A diferencia de otros proveedores compatibles con Identity Platform, Microsoft no proporciona una URL de foto para los usuarios. En cambio, deberás usar la API de Graph para solicitar los datos binarios de la foto.

Además del token de acceso, también puedes recuperar el token de ID de Microsoft de un usuario. La reclamación oid en este token contiene un ID único para el usuario. Puedes compararlo con el ID ubicado en user.providerData[0].uid. Si tus usuarios acceden con una instancia de Azure AD, estos campos coincidirán de forma exacta. De lo contrario, el campo se rellenará con ceros (por ejemplo, el ID federado 4b2eabcdefghijkl aparecerá como 00000000-0000-0000-4b2e-abcdefghijkl).

No uses la reclamación sub para comparar los ID de usuario. La reclamación sub es específica de la app y no coincidirá con el ID que usa Microsoft.

Permite que los usuarios accedan de forma manual

Otros proveedores de Identity Platform, como Google, Facebook y Twitter, dejan que le permitas acceder a los usuarios de forma manual si llamas a signInWithCredential().

Esta función no es compatible con Microsoft. Identity Platform no puede verificar el público de los tokens de acceso de OAuth de Microsoft, lo cual es un requisito de seguridad fundamental.

Si no puedes usar el SDK de cliente de Identity Platform para permitir que los usuarios accedan, deberás usar una biblioteca de OAuth de terceros con el fin de autenticarte en Microsoft. Luego, puedes usar la autenticación personalizada para intercambiar la credencial de Microsoft por un token personalizado.

¿Qué sigue?