Integrar elementos da IU da Identity Platform na sua app Web

Este guia mostra como integrar uma interface do utilizador (IU) fornecida pela Identity Platform numa app Web existente.

Antes de começar

Para concluir este guia, precisa do seguinte:

Componentes de IU de código aberto para outros clientes

Este artigo mostra como integrar componentes da IU numa app Web. Para outros tipos de apps, consulte as seguintes páginas:

Integrar os componentes da IU na sua app

  1. Adicione o guião da IU e o CSS da RFC na etiqueta <head> da sua 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. Ative, pelo menos, um método de início de sessão através da Google Cloud consola. Consulte o início rápido para saber como.

  3. Na etiqueta <head> da sua página, configure a forma como os utilizadores podem iniciar sessão: 

    <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. No elemento <body> da sua página, insira o widget de 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>

    Quando renderiza a sua página, a IU fornecida pela Identity Platform é apresentada, o que permite aos utilizadores iniciar sessão na sua app.

Para saber mais sobre outras personalizações, consulte a documentação dos componentes da IU no GitHub.

O que se segue?