Integrar elementos de la interfaz de usuario de Identity Platform en tu aplicación web

En esta guía se explica cómo integrar una interfaz de usuario proporcionada por Identity Platform en una aplicación web.

Antes de empezar

Para completar esta guía, necesitarás lo siguiente:

Componentes de interfaz de usuario de código abierto para otros clientes

En este artículo se explica cómo integrar componentes de interfaz de usuario en una aplicación web. Para otros tipos de aplicaciones, consulta las siguientes páginas:

Integrar los componentes de la interfaz de usuario en tu aplicación

  1. Añade la secuencia de comandos de la interfaz de usuario y el CSS de la CDN en la etiqueta <head> de tu página.


    <script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />

  2. Habilita al menos un método de inicio de sesión mediante la consola Google Cloud . Consulta la guía de inicio rápido para saber cómo hacerlo.

  3. En la etiqueta <head> de tu página, configura cómo pueden iniciar sesión tus usuarios: 

    <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 interfaz de usuario: 

    <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 renderices tu página, aparecerá la interfaz de usuario proporcionada por Identity Platform, que permitirá a los usuarios iniciar sesión en tu aplicación.

Para obtener más información sobre otras personalizaciones, consulta la documentación de componentes de interfaz de usuario en GitHub.

Siguientes pasos