Autentica mediante SAML en apps web

Si actualizaste a Firebase Authentication with Identity Platform, puedes autenticar a tus usuarios con Firebase mediante el proveedor de identidad de SAML que prefieras. Esto permite usar la solución de SSO basada en SAML para que los usuarios accedan 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 a tu proyecto de JavaScript.

  2. Si aún no lo hiciste, actualiza a Firebase Authentication with Identity Platform. La autenticación de SAML 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.

    Web 

    import { SAMLAuthProvider } from "firebase/auth";

const provider = new SAMLAuthProvider('saml.example-provider');

    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():

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    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().

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

    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

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

    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.