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) que proporciona Identity Platform en una aplicación web existente.

Antes de comenzar

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

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

En este artículo, se muestra cómo integrar componentes de 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 la IU 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 acceso con la consola de Google Cloud. 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 la 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 renderices tu página, aparecerá la IU que proporciona Identity Platform para permitir que los usuarios accedan a tu app.

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

¿Qué sigue?