Integrazione degli elementi UI di Identity Platform nella tua app web

Questa guida mostra come integrare un'interfaccia utente (UI) fornita da Identity Platform in un'app web esistente.

Prima di iniziare

Per completare questa guida, ti serviranno:

Componenti dell'interfaccia utente open source per altri client

Questo articolo spiega come integrare i componenti della UI in un'app web. Per altri tipi di app, consulta le pagine seguenti:

Integrare i componenti dell'interfaccia utente nella tua app

  1. Aggiungi lo script UI e il CSS dalla CDN nel tag <head> della tua pagina.


    <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. Abilita almeno un metodo di accesso utilizzando la console Google Cloud. Per scoprire come fare, consulta la guida rapida.

  3. Nel tag <head> della pagina, configura la modalità di accesso degli utenti: 

    <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. Nell'elemento <body> della pagina, inserisci il widget UI: 

    <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>

    Quando esegui il rendering della pagina, viene visualizzata l'interfaccia utente fornita da Identity Platform, che consente agli utenti di accedere alla tua app.

Per saperne di più sulle personalizzazioni, consulta la documentazione dei componenti UI su GitHub.

Passaggi successivi