Autentica usando 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.

Agrega Firebase al proyecto de JavaScript.
En Firebase console, abre la sección Auth.
En la pestaña Método de acceso, habilita el proveedor de Microsoft.
Agrega el ID y el secreto del cliente de la consola para desarrolladores de ese proveedor a la configuración correspondiente:
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.
Haz 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 utilizando sus cuentas de Microsoft es manejar el flujo de acceso completo con el SDK de Firebase JavaScript.

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

Crea una instancia de un OAuthProvider con el ID de proveedor microsoft.com.
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js
```
API con espacio de nombres web
```
var provider = new firebase.auth.OAuthProvider('microsoft.com');microsoft-oauth.js
```
Opcional: Especifica parámetros de OAuth personalizados adicionales que quieras enviar con la solicitud de OAuth.
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});auth_msft_provider_params.js
```
API con espacio de nombres web
```
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, 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 integrantes de un grupo de usuarios específico de Azure AD accedan a la aplicación, puedes usar el nombre descriptivo del dominio o el identificador GUID del usuario de Azure AD. Para ello, se puede especificar el campo “usuario” en el objeto de los parámetros personalizados.
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
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
```
API con espacio de nombres 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
```
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.
Autentica con Firebase usando 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 con 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:
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
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
```
API con espacio de nombres 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
```
- Para acceder con el redireccionamiento a la página de acceso, llama a signInWithRedirect como se indica a continuación:
Sigue las prácticas recomendadas cuando uses signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js
```
API con espacio de nombres web
```
firebase.auth().signInWithRedirect(provider);microsoft-oauth.js
```
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.
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
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
```
API con espacio de nombres 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
```
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.

Con 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ífica de la app y no coincidirá con el identificador de usuario federado utilizado por Firebase Auth, al que se puede acceder con user.providerData[0].uid. En su lugar, se debe usar el campo de reclamación oid. Si se utiliza un usuario de Azure AD para acceder, la reclamación oid será una coincidencia exacta. Sin embargo, si no se usa una instancia, se rellenerá el campo oid. Para un 4b2eabcdefghijkl con ID federado, el oid tendrá un formulario 00000000-0000-0000-4b2e-abcdefghijkl.

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

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

API con espacio de nombres 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

Se puede utilizar el mismo patrón con reauthenticateWithPopup o reauthenticateWithRedirect, que se puede usar para recuperar credenciales nuevas para operaciones sensibles que requieran un acceso reciente.

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

API con espacio de nombres 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

Maneja errores de cuentas que ya existen con otras credenciales

Si habilitaste la configuración Una cuenta por dirección de correo electrónico en Firebase console, aparecerá el error auth/account-exists-with-different-credential junto con un objeto AuthCredential (credencial de Microsoft) cuando un usuario trate de acceder a un proveedor (como Microsoft) con un correo electrónico que ya está vinculado al proveedor de otro usuario de Firebase (como Google). Para completar el acceso al proveedor deseado, el usuario primero debe acceder al proveedor existente (Google) y, luego, establecer el vínculo con la AuthCredential anterior (credencial de Microsoft).

Si usas signInWithPopup, puedes manejar los errores auth/account-exists-with-different-credential con un código como el siguiente:


// Step 1.
// User tries to sign in to Microsoft.
auth.signInWithPopup(new firebase.auth.OAuthProvider('microsoft.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Microsoft credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Microsoft credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Modo de redireccionamiento

Este error se maneja de manera similar en el modo de redireccionamiento, con la diferencia de que la credencial pendiente debe almacenarse en caché entre acciones de redireccionamiento de páginas (por ejemplo, el uso de almacenamiento de sesión).

A diferencia de los proveedores de OAuth que admite Firebase, como Google, Facebook y Twitter, en los que se puede lograr el acceso con un token de acceso de OAuth basado en credenciales, Firebase Auth no admite la misma capacidad para los proveedores como Microsoft debido a la incapacidad del servidor de Firebase Auth para verificar el público de los tokens de acceso de OAuth de Microsoft. Este es un requisito de seguridad fundamental y podría exponer las aplicaciones y los sitios web a volver a reproducir ataques en los que el token de acceso de OAuth de Microsoft que se obtuvo para un proyecto (atacante) se puede usar para acceder a otro proyecto (víctima). En su lugar, Firebase Auth ofrece la capacidad de manejar todo el flujo de OAuth y el intercambio de códigos de autorización con el ID y secreto del cliente de OAuth configurados en Firebase console. Como el código de autorización solo se puede usar junto con un ID/secreto de cliente específico, no se puede usar un código de autorización obtenido para un proyecto con otro.

Si es necesario usar estos proveedores en entornos no admitidos, se requerirían una biblioteca de OAuth de terceros y la autenticación personalizada de Firebase. La primera es necesaria para autenticarse con el proveedor y la última para intercambiar la credencial del proveedor por un token personalizado.

Autentica con Firebase en una extensión de Chrome

Si desarrollas una app de extensión de Chrome, debes agregar el ID de la extensión de Chrome:

Abre tu proyecto en Firebase console.
En la sección Authentication, abre la página Sign-in method.
Agrega un URI como el siguiente a la lista de dominios autorizados:
```
chrome-extension://CHROME_EXTENSION_ID
```

Solo las operaciones con ventanas emergentes (signInWithPopup, linkWithPopup y reauthenticateWithPopup) 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 página de 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. Los métodos de ventana emergente solo se pueden usar en extensiones con Manifest V2. El Manifest V3 más reciente solo permite secuencias de comandos en segundo plano en forma de service workers, que no pueden realizar operaciones de ventana emergente.

En el archivo de manifiesto de tu extensión de Chrome, asegúrate de agregar la URL https://apis.google.com a la lista de entidades permitidas content_security_policy.

Cuando crees un proyecto, Firebase le otorgará un subdominio único: https://my-app-12345.firebaseapp.com.

También se usará como mecanismo de redireccionamiento para el acceso con OAuth. Todos los proveedores de OAuth admitidos deberían permitir el dominio. Sin embargo, es probable que los usuarios vean ese dominio cuando accedan a Microsoft antes de que se los redireccione a la aplicación (p. ej.: Continúa a https://my-app-12345.firebaseapp.com).

Para evitar que se muestre el subdominio, puedes configurar un dominio personalizado con Firebase Hosting de la siguiente manera:

Sigue los pasos 1 a 3 de Configura tu dominio para Hosting. Cuando verificas la propiedad de tu dominio, Hosting aprovisiona un certificado SSL para el dominio personalizado.
Agrega tu dominio personalizado a la lista de dominios autorizados en Firebase console: auth.custom.domain.com.
Incluye la URL de la página de redireccionamiento en la lista de entidades permitidas de la consola para desarrolladores de Microsoft o en la página de configuración de OAuth. Podrás acceder a ella desde tu dominio personalizado: https://auth.custom.domain.com/__/auth/handler.

Cuando inicialices la biblioteca JavaScript, especifica el dominio personalizado en el campo authDomain:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

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 tus apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Luego podrás obtener la información de perfil básica del usuario a partir del objeto User. Consulta Administra usuarios en Firebase.
En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, a partir de la variable auth, puedes obtener el ID del usuario único que accedió y usarlo para controlar a qué datos podrá acceder.

Para 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 hacer que un usuario salga de la sesión, llama a signOut de la siguiente manera:

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

API con espacio de nombres web

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

Autentica usando Microsoft con JavaScript

Antes de comenzar

Maneja el flujo de acceso con el SDK de Firebase

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

Maneja errores de cuentas que ya existen con otras credenciales

Modo de ventanas emergentes

Modo de redireccionamiento

Avanzado: Administra el flujo de acceso manualmente

Autentica con Firebase en una extensión de Chrome

Personaliza el dominio de redireccionamiento para el acceso con Microsoft

Próximos pasos

API modular web

API con espacio de nombres web