Integra elementos de la IU de Identity Platform en tu aplicación web

En esta guía, se muestra cómo integrar una interfaz de usuario (IU) proporcionada por Identity Platform en una app web existente.

Antes de comenzar

Para completar esta guía, necesitas lo siguiente:

Componentes de la IU de código abierto para otros clientes

En este artículo, se muestra cómo integrar componentes de la IU en una app web. Para otros tipos de apps, consulta las siguientes páginas:

Integra los componentes de IU en tu app

  1. Agrega la secuencia de comandos de IU y CSS de la CDN en la etiqueta <head> de tu página.


    <script src="https://cdn.firebase.com/libs/firebaseui/5.8.2/firebaseui.js"></script>
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/5.8.2/firebaseui.css" />

  2. Habilita al menos un método de acceso con Cloud Console. Consulta la Guía de inicio rápido para aprender a hacer esto.

  3. En la etiqueta <head> de tu página, configura la manera en que los usuarios pueden acceder:

    <script>
// UI Configuration
var uiConfig = {
 signInSuccessUrl: '[URL_TO_REDIRECT_ON_SIGNIN_SUCCESS]',
 signInOptions: [
   // Leave the lines as is for the providers you want to offer your users.
   firebase.auth.GoogleAuthProvider.PROVIDER_ID,
   firebase.auth.FacebookAuthProvider.PROVIDER_ID,
   firebase.auth.TwitterAuthProvider.PROVIDER_ID,
   firebase.auth.GitHubAuthProvider.PROVIDER_ID,
   firebase.auth.EmailAuthProvider.PROVIDER_ID,
   firebase.auth.PhoneAuthProvider.PROVIDER_ID,
   firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
 ],
 // tosUrl and privacyPolicyUrl accept either url string or a callback
 // function.
 // Terms of service url/callback.
 tosUrl: '[YOUR_TOS_URL]',
 // Privacy policy url/callback.
 privacyPolicyUrl: function() {
   window.location.assign('[YOUR_PRIVACY_POLICY_URL]');
 }
};

// Initialize the UI Components.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>

  4. En el elemento <body> de tu página, inserta el widget de la IU: 

    <body>
<!-- The surrounding HTML is left untouched. Your app can use that space for branding, controls and other customizations.-->
<h1>Welcome to [APP_NAME]</h1>
<div id="firebaseui-auth-container"></div>
</body>

    Cuando proceses tu página, aparecerá la IU proporcionada por Identity Platform, lo que permitirá que los usuarios accedan a tu app.

Para obtener más información sobre las personalizaciones, consulta la documentación de componentes de la IU en GitHub.

¿Qué sigue?