Autentica mediante Microsoft con JavaScript

Puedes dejar que los usuarios se autentiquen con Firebase mediante proveedores de OAuth, como Microsoft Azure Active Directory, con solo integrar un acceso genérico de OAuth en tu app, usando el SDK de Firebase para llevar a cabo el flujo de acceso de extremo a extremo.

Antes de comenzar

Para que los usuarios accedan con cuentas de Microsoft (cuentas de Azure Active Directory o cuentas personales de Microsoft), primero debes habilitar Microsoft como un proveedor de acceso para tu 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 acceso, habilita el proveedor de Microsoft.
  4. Agrega el ID de cliente y el secreto del cliente de la consola para desarrolladores de ese proveedor a la configuración del proveedor:
    1. Para registrar un cliente de OAuth de Microsoft, sigue las instrucciones en la Guía de inicio rápido: Registra una app con el extremo Azure Active Directory v2.0. Ten en cuenta que este extremo admite el acceso con cuentas personales de Microsoft, así como cuentas de Azure Active Directory. Obtén más información sobre Azure Active Directory v2.0.
    2. Cuando registres apps con estos proveedores, asegúrate de registrar el dominio *.firebaseapp.com para el proyecto como el dominio de redireccionamiento de la app.
  5. Haga clic en Guardar.

Maneja el flujo de acceso con el SDK de Firebase

Si estás compilando una app web, la manera más sencilla de autenticar a tus usuarios con Firebase mediante sus cuentas de Microsoft es manejar el flujo de acceso con el SDK de Firebase para JavaScript.

A fin de manejar el flujo de acceso con el SDK de Firebase JavaScript, sigue estos pasos:

  1. Crea una instancia de un OAuthProvider con el ID de proveedor microsoft.com.

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

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

    Para conocer los parámetros que admite Microsoft, consulta la documentación de OAuth de Microsoft. Ten en cuenta que no puedes pasar los parámetros obligatorios de 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 una instancia específica de Azure AD accedan a la aplicación, puedes usar el nombre descriptivo del dominio o el identificador GUID de la instancia de Azure AD. Para ello, se puede especificar el campo “instancia” en el objeto de los parámetros personalizados.

    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: Especifica alcances de OAuth 2.0 adicionales aparte del perfil básico que quieres solicitar del proveedor de autenticación.

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

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

  4. Autentica con Firebase mediante el objeto del proveedor de OAuth. Puedes pedirles a los usuarios que accedan con sus cuentas de Microsoft a través de una ventana emergente o mediante un redireccionamiento a la página de acceso. En dispositivos móviles, se prefiere el método de redireccionamiento.

    • Para acceder con una ventana emergente, llama a signInWithPopup de la siguiente manera:

      firebase.auth().signInWithPopup(provider)
        .then(function(result) {
          // User is signed in.
          // 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(function(error) {
          // Handle error.
        });
      
    • Para acceder mediante el redireccionamiento a la página de acceso, llama a signInWithRedirect como se indica a continuación:

      firebase.auth().signInWithRedirect(provider);
      

      Después de que el usuario termine de acceder y vuelva a la página, puedes obtener el resultado de acceso con solo llamar a getRedirectResult.

      firebase.auth().getRedirectResult()
        .then(function(result) {
          // User is signed in.
          // 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(function(error) {
          // Handle error.
        });
      

    Si se completa correctamente, el token de acceso de OAuth asociado con el proveedor se puede recuperar a partir del objeto firebase.auth.UserCredential que se muestra.

    Mediante el token de acceso de OAuth, puedes llamar a la API de Microsoft Graph.

    Por ejemplo, para obtener información básica de perfil, se puede llamar a la siguiente API de 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 de una foto de perfil se deben solicitar a través de la API de Microsoft Graph.

    Además del token de acceso de OAuth, el token de ID de OAuth del usuario también se puede recuperar a partir del objeto firebase.auth.UserCredential. La reclamación sub en el token de ID es específico de la app y no coincidirá con el identificador de usuario federado utilizado por Firebase Auth, al que se puede acceder mediante user.providerData[0].uid. En su lugar, se debe usar el campo de reclamación oid. Si se usa una instancia de Azure AD para acceder, la reclamación oid será una coincidencia exacta. Sin embargo, si no usa una instancia, se rellenará el campo oid. Para un 4b2eabcdefghijkl con ID federado, el oid tendrá un formulario 00000000-0000-0000-4b2e-abcdefghijkl.

  5. Si bien los ejemplos anteriores se enfocan en los flujos de acceso, también puedes vincular un proveedor de Microsoft con un usuario existente mediante linkWithPopup o linkWithRedirect. Por ejemplo, puedes vincular varios proveedores con el mismo usuario para que este pueda acceder con cualquiera de ellos.

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then(function(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(function(error) {
          // Handle error.
        });
    
  6. Se puede utilizar el mismo patrón con reauthenticateWithPopup o reauthenticateWithRedirect, que se puede usar a fin de recuperar credenciales nuevas para operaciones sensibles que requieran un acceso reciente.

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then(function(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(function(error) {
          // Handle error.
        });
    

Autentica con Firebase en una extensión de Chrome

Si estás compilando una app de extensión de Chrome, debes incluir en la lista blanca el ID de extensión de Chrome:

  1. Abre el proyecto en Firebase console.
  2. En la sección Authentication, abre la página Método de acceso.
  3. Agrega un URI como el siguiente a la lista de dominios autorizados:
    chrome-extension://CHROME_EXTENSION_ID

Solo las operaciones con ventanas emergentes (signInWithPopup y linkWithPopup) están disponibles para las extensiones de Chrome, ya que estas no pueden usar redireccionamientos HTTP. Deberías llamar a estos métodos desde una secuencia de comandos en segundo plano en lugar de una ventana emergente de acción en el navegador, ya que la ventana emergente de autenticación cancela la de acción del navegador.

Asegúrate de incluir la URL https://apis.google.com en la lista blanca content_security_policy en el archivo de manifiesto de la extensión de Chrome.

Próximos pasos

Cuando un usuario accede por primera vez, se crea una cuenta de usuario nueva y se la vincula con las credenciales (el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) que el usuario utilizó para acceder. Esta cuenta nueva se almacena como parte de tu proyecto de Firebase y se puede usar para identificar a un usuario en todas las apps del proyecto, sin importar cómo acceda.

  • En las apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Puedes obtener la información básica de perfil del usuario a partir del objeto User. Consulta Administra usuarios.

  • En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, puedes obtener el ID del usuario único que accedió a partir de la variable auth y usarlo para controlar a qué datos podrá acceder.

Si quieres permitir que los usuarios accedan a la app con varios proveedores de autenticación, puedes vincular las credenciales de estos proveedores con una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llama a signOut de la siguiente manera:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});