Autentica mediante SAML en apps web

Si actualizaste a Firebase Authentication con Identity Platform, puedes autenticar tus usuarios con Firebase mediante el proveedor de identidad de SAML que prefieras, lo que permite usar tu solución de SSO basada en SAML para el acceso de los usuarios a la app de Firebase.

Firebase Authentication solo admite el flujo de SAML iniciado por el proveedor de servicios.

Antes de comenzar

Para que los usuarios accedan mediante un proveedor de identidad de SAML, primero debes recopilar cierta información del proveedor:

• ID de entidad del proveedor: Es un URI que identifica al proveedor de identidad.
• URL de SSO de SAML del proveedor: Es la URL de la página de acceso del proveedor de identidad.
• Certificado de clave pública del proveedor: Es el certificado que se usa para validar los tokens firmados por el proveedor de identidad.
• ID de entidad de tu app: Es un URI que identifica a tu app, el “proveedor de servicios”.

Una vez que tengas la información anterior, habilita SAML como proveedor de acceso para el proyecto de Firebase.

1. Agrega Firebase al proyecto de JavaScript.

2. Actualiza a Firebase Authentication con Identity Platform si aún no lo has hecho. La autenticación de OpenID Connect solo está disponible en proyectos actualizados.

3. En la página Proveedores de acceso de Firebase console, haz clic en Agregar proveedor nuevo y, luego, en SAML.

4. Asígnale un nombre a este proveedor. Toma nota del ID de proveedor que se genera (algo como saml.example-provider). Lo necesitarás cuando agregues el código de acceso a tu app.

5. Especifica el ID de entidad del proveedor de identidad, la URL de SSO y el certificado de clave pública. También especifica el ID de entidad de tu app (el proveedor de servicios). Estos valores deben coincidir exactamente con los valores que te asignó el proveedor.

6. Guarda los cambios.

7. Si aún no autorizas el dominio de tu app, agrégalo a la lista de entidades permitidas en la página Autenticación > Configuración de Firebase console.

Maneja el flujo de acceso con el SDK de Firebase

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

1. Crea una instancia de un SAMLAuthProvider con el ID de proveedor que obtuviste en Firebase console.

   API modular web

   import { SAMLAuthProvider } from "firebase/auth";
   
   const provider = new SAMLAuthProvider('saml.example-provider');
   

   API con espacio de nombres web

   var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
   ``
   

1. Autentica con Firebase mediante el objeto del proveedor de SAML.

   Puedes redireccionar al usuario a la página de acceso del proveedor o abrir la página de acceso en una ventana emergente del navegador.

   Flujo de redireccionamiento

   Para redireccionar a la página de acceso del proveedor, llama a signInWithRedirect():

   API modular web

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

   API con espacio de nombres web

   firebase.auth().signInWithRedirect(provider);
   

   Después de que el usuario termine de acceder y vuelva a tu app, puedes obtener el resultado de acceso con solo llamar a getRedirectResult().

   API modular web

   import { getAuth, getRedirectResult, SAMLAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
   
       // Provider data available using getAdditionalUserInfo()
     })
     .catch((error) => {
       // Handle error.
     });
   

   API con espacio de nombres web

   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   Flujo de ventana emergente

   API modular web

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   API con espacio de nombres web

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   El token de ID y el objeto UserInfo contienen la dirección de correo electrónico del usuario solo si se proporciona en el atributo NameID de la aserción de SAML del proveedor de identidad:

   <Subject>
     <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
   </Subject>
   

2. Si bien los ejemplos anteriores se enfocan en los flujos de acceso, puedes usar el mismo patrón para vincular un proveedor de SAML con un usuario existente mediante linkWithRedirect() y linkWithPopup(), y volver a autenticar a un usuario con reauthenticateWithRedirect() y reauthenticateWithPopup(), que se pueden usar para recuperar credenciales nuevas para operaciones sensibles que requieren un acceso reciente.