Intégrer des éléments de l'interface utilisateur d'Identity Platform à votre application Web

Ce guide explique comment intégrer une interface utilisateur fournie par Identity Platform à une application Web existante.

Avant de commencer

Pour suivre ce guide, vous avez besoin des éléments suivants :

  • Un projet Google Cloud pour lequel vous êtes Propriétaire du projet, avec la facturation activée.

Composants d'interface utilisateur Open Source pour d'autres clients

Cet article vous explique comment intégrer des composants d'interface utilisateur dans une application Web. Pour les autres types d'applications, consultez les pages suivants :

Intégrer les composants d'interface utilisateur dans votre application

  1. Ajoutez le script d'interface utilisateur et le CSS à partir du CDN dans la balise <head> de votre page.


    <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. Activez au moins une méthode de connexion à l'aide de la console Google Cloud . Pour savoir comment, consultez le guide de démarrage rapide.

  3. Dans la balise <head> de votre page, configurez les méthodes de connexion de vos utilisateurs : 

    <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. Insérez le widget d'interface utilisateur dans l'élément <body> de votre page : 

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

    Lorsque vous affichez votre page, l'interface utilisateur fournie par Identity Platform s'affiche, ce qui permet aux utilisateurs de se connecter à votre application.

Pour en savoir plus sur les personnalisations, consultez la documentation sur les composants d'interface utilisateur de GitHub.

Étape suivante