Fazer login de um usuário com um e-mail usando o Identity Platform

Fazer login de um usuário com um e-mail usando o Identity Platform

Saiba como usar o Identity Platform para fazer login de um usuário com um e-mail e uma senha.

---

Para seguir as instruções passo a passo desta tarefa diretamente no console do Google Cloud, clique em Orientação:

Orientações

---

Antes de começar

1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

3. Make sure that billing is enabled for your Google Cloud project.

4. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

   Check for the roles

   1. In the Google Cloud console, go to the IAM page.

      Go to IAM
   2. Select the project.

   3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

   4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

   Grant the roles

   1. In the Google Cloud console, go to the IAM page.

      Acessar o IAM
   2. Selecionar um projeto.
   3. Clique em CONCEDER ACESSO.

   4. No campo Novos principais, insira seu identificador de usuário. Normalmente, é o endereço de e-mail de uma Conta do Google.

   5. Na lista Selecionar um papel, escolha um.
   6. Para conceder outros papéis, clique em Adicionar outro papel e adicione cada papel adicional.
   7. Clique em Salvar.

   8. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

      Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

      Go to project selector

   9. Make sure that billing is enabled for your Google Cloud project.

   10. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

       Check for the roles

       1. In the Google Cloud console, go to the IAM page.

          Go to IAM
       2. Select the project.

       3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

       4. For all rows that specify or include you, check the Role colunn to see whether the list of roles includes the required roles.

       Grant the roles

       1. In the Google Cloud console, go to the IAM page.

          Acessar o IAM
       2. Selecionar um projeto.
       3. Clique em CONCEDER ACESSO.

       4. No campo Novos principais, insira seu identificador de usuário. Normalmente, é o endereço de e-mail de uma Conta do Google.

       5. Na lista Selecionar um papel, escolha um.
       6. Para conceder outros papéis, clique em Adicionar outro papel e adicione cada papel adicional.
       7. Clique em Salvar.

       Ativar o Identity Platform

       1. No console do Google Cloud, acesse a página Identity Platform no Marketplace do Cloud.

          Acesse o Identity Platform

       2. Clique em Ativar Identity Platform.

Configurar um login por e-mail

1. Acesse a página Provedores de identidade.

   Acessar os provedores de identidade

2. Na página Provedores de identidade, clique em Adicionar um provedor.

3. Na lista Selecionar um provedor, selecione E-mail/senha.

4. Clique no botão Ativado para ativar.

5. Para salvar as configurações do provedor, clique em Salvar.

Criar um usuário

1. No console do Google Cloud, acesse a página Usuários.

   Acessar "Usuários"

2. Clique em Adicionar usuário.

3. No campo E-mail, digite um e-mail e uma senha. Anote esses dois valores, porque você vai precisar deles em uma etapa posterior.

4. Para adicionar o usuário, clique em Adicionar. O novo usuário é listado na página Usuários.

Fazer o login do usuário

As etapas para fazer login do usuário variam de acordo com a versão do SDK que o app está usando. Verifique se você está seguindo as etapas corretas para o aplicativo.

Observação: é recomendado usar o SDK v9, especialmente em apps de produção. Se você precisar de suporte para outras opções de gerenciamento de SDK, como window.firebase, consulte Fazer upgrade da versão 8 para o SDK da Web modular ou Formas alternativas de adicionar o Firebase.

SDK v9 (modular)

Instalar o SDK e inicializar o Firebase

A versão 9 do SDK do Firebase para JavaScript usa o formato de módulo JavaScript.

Esse fluxo de trabalho usa npm e requer bundlers de módulos ou ferramentas de framework de JavaScript porque o SDK v9 é otimizado para funcionar com bundlers de módulos para eliminar código não utilizado (tree shaking) e diminuir o tamanho do SDK.

Para usar o SDK v9, siga estas etapas:

1. No diretório do projeto, instale o Firebase usando o npm:

   npm install firebase

2. Inicialize o Firebase no app e crie um objeto do app Firebase:

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

   Substitua:

   • API_KEY: o apiKey do seu projeto do Firebase.
   • AUTH_DOMAIN: o authDomain do seu projeto do Firebase.

   Você pode encontrar esses valores na configuração do projeto do Firebase do seu app.

   Um app Firebase é um objeto semelhante a um contêiner que armazena configurações comuns e compartilha a autenticação nos serviços do Firebase. Depois de inicializar um objeto do app Firebase no código, é possível adicionar e começar a usar os serviços do Firebase.

   Se você usa o ESM e quer usar módulos do navegador, substitua todas as linhas import pelo seguinte padrão:
   import { } from 'https://www.gstatic.com/firebasejs/11.0.2/firebase-SERVICE.js',
   em que SERVICE é um nome de SDK, como firebase-firestore.

   O uso de módulos do navegador é uma maneira rápida de começar, mas recomendamos o uso de um bundler de módulos para produção.

Acessar o Identity Platform no seu JavaScript

Agora que você inicializou o SDK do Firebase, é possível usá-lo em qualquer lugar do app. Por exemplo, aqui está um app que tenta fazer login em um usuário fixado e mostrar o resultado em uma página da Web.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

Substitua:

• API_KEY: o apiKey do seu projeto do Firebase.
• AUTH_DOMAIN: o authDomain do seu projeto do Firebase.
• EMAIL_ID: o endereço de e-mail do usuário que você criou anteriormente neste guia.
• PASSWORD: a senha do usuário que você criou anteriormente neste guia.

Usar um bundler de módulo para redução de tamanho

Observação: ignore esta etapa se estiver usando uma ferramenta CLI de framework JavaScript, como a Angular CLI, Next.js, Vue CLI ou Create React App. Confira nosso guia sobre o empacotamento de módulos para mais informações.

O SDK da Web do Firebase foi projetado para funcionar com bundlers de módulos para remover qualquer código não utilizado (tree shaking). É altamente recomendável usar essa abordagem para apps de produção. Ferramentas como a Angular CLI, Next.js, Vue CLI ou Create React App processam automaticamente o empacotamento de módulos para bibliotecas instaladas pelo npm e importadas para a base de código.

Por exemplo, é possível usar o Webpack para gerar uma pasta dist que contém o aplicativo e o código de dependência em pacote. Consulte Como usar os bundlers de módulo com o Firebase para mais informações.

Importar o JavaScript para a página

1. Crie um novo arquivo denominado index.html.

2. Adicione dois contêineres HTML básicos e importe o js agrupado.

   <script defer src="js/bundled.js"></script>
   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

3. Abra index.html em seu navegador da Web. Uma mensagem de recepção com o e-mail do usuário será exibida.

SDK v8 (legado)

Criar uma página da Web

1. Na sua máquina local, crie um arquivo com o nome index.html.

2. No arquivo HTML, adicione dois contêineres HTML:

   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

Inicializar o SDK de cliente do Identity Platform com sua chave de API

1. No console do Google Cloud, acesse a página Provedores de identidade.

   Acessar os provedores de identidade

2. Clique em Detalhes da configuração do aplicativo.

3. Copie o código de inicialização para index.html.

Fazer o login do usuário

1. Para fazer login do usuário, copie o seguinte código em index.html:

   <script>
     var email = "EMAIL_ID";
     var password = "PASSWORD";
   
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         document.getElementById("message").innerHTML = "Welcome, " + user.email;
       } else {
         document.getElementById("message").innerHTML = "No user signed in.";
       }
     });
   
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
       document.getElementById("message").innerHTML = error.message;
     });
   </script>
   

   Esse código chama signInWithEmailAndPassword() e processa o resultado com o callback onAuthStateChanged().

   Substitua:

   • EMAIL_ID: o e-mail do usuário que você criou anteriormente
   • PASSWORD: a senha do usuário que você criou anteriormente

2. Abra index.html no navegador da Web. Uma mensagem de boas-vindas exibindo o e-mail do usuário será exibida.

Há um limite de tentativas de login do usuário sem sucesso. Várias tentativas de login rápidas e malsucedidas bloqueiam temporariamente o usuário da conta.

Para mais informações sobre outros limites do Identity Platform, consulte Cotas e limites.

Limpar

Para evitar cobranças na conta do Google Cloud pelos recursos usados nesta página, siga estas etapas.

Excluir o provedor e o usuário

Se você usou um projeto do Google Cloud, exclua o provedor e o usuário criados para evitar cobranças na sua conta:

1. No console do Google Cloud, acesse a página Provedores de identidade.

   Acessar os provedores de identidade

2. Para excluir o provedor, clique em Excluir ao lado do nome dele. Para confirmar, clique em Excluir.

3. No console do Google Cloud, acesse a página Usuários.

   Acessar "Usuários"

4. Para excluir o usuário que você criou, clique em Excluir ao lado do nome do usuário. Para confirmar, clique em Excluir.

Exclua o projeto

O jeito mais fácil de evitar cobranças é excluindo o projeto que você criou para o tutorial.

Para excluir o projeto:

Cuidado: excluir um projeto tem os seguintes efeitos:

• Tudo no projeto é excluído. Se você tiver usado um projeto existente para as tarefas neste documento, a exclusão dele incluirá a exclusão de quaisquer outros trabalhos feitos no projeto.
• Os IDs do projeto personalizados são perdidos. Ao criar o projeto, você pode ter criado um código do projeto personalizado para ser usado no futuro. Para preservar os URLs que usam o ID do projeto, como um URL appspot.com, exclua recursos específicos do projeto, em vez de excluir o projeto inteiro.

Se você planeja passar por várias arquiteturas, tutoriais ou guias de início rápido, a reutilização de projetos pode evitar que você exceda os limites da cota do projeto.

1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

A seguir

Em um app real, seus usuários se inscreveriam usando uma página de registro dedicada e fariam login inserindo os e-mails e senhas. O Identity Platform oferece uma IU de autenticação pré-criada que pode ser usada para essas páginas. Outra opção é criar sua própria. Talvez você queira oferecer suporte a outros métodos de login, como provedores sociais (como Facebook ou Google), números de telefone, OIDC ou SAML.

Saiba mais sobre estes assuntos:

• Faça login de usuários com JavaScript, Android, iOS, C++ ou Unity.

• Faça login de usuários com OIDC ou SAML.

• Migrar usuários do seu app atual para o Identity Platform.