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:
- Un proyecto de Google Cloud para el que eres propietario del proyecto con facturación habilitada
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
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" />
Habilita al menos un método de acceso con Cloud Console. Consulta la Guía de inicio rápido para aprender a hacer esto.
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>
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?
- Obtén más información sobre cómo configurar reclamaciones personalizadas en los usuarios.
- Lee sobre la API de Admin Auth.
- Obtén más información sobre cómo autenticar usuarios en App Engine mediante Identity Platform.