Como integrar elementos da IU do Identity Platform ao seu app da Web

Neste guia, mostramos como integrar uma interface do usuário (IU) fornecida pelo Identity Platform a um app da Web atual.

Antes de começar

Para concluir este guia, você precisará do seguinte:

  • Um projeto do Google Cloud em que você é proprietário de projetos, com faturamento ativado.

Componentes de IU de código aberto para outros clientes

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

Como integrar os componentes da IU ao app

  1. Adicione o script de IU e o CSS da CDN na tag <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 login usando o console do Google Cloud. Veja o guia de início rápido para saber como fazer isso.

  3. Na tag <head> da sua página, configure como os usuários podem fazer login: 

    <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 página, insira o widget da 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 você renderiza sua página, a IU fornecida pelo Identity Platform é exibida, permitindo que os usuários façam login no seu app.

Para saber mais, consulte a documentação do componente de IU no GitHub.

A seguir