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 o login de um usuário com e-mail e senha.

---

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

Orientações

---

Antes de começar

1. Faça login na sua conta do Google Cloud. Se você começou a usar o Google Cloud agora, crie uma conta para avaliar o desempenho de nossos produtos em situações reais. Clientes novos também recebem US$ 300 em créditos para executar, testar e implantar cargas de trabalho.

2. No console do Google Cloud, na página do seletor de projetos, selecione ou crie um projeto do Google Cloud.

   Observação: se você não pretende manter os recursos criados neste procedimento, crie um projeto novo em vez de selecionar um que já existe. Depois de concluir essas etapas, é possível excluir o projeto. Para fazer isso, basta remover todos os recursos associados a ele.

   Acessar o seletor de projetos

3. Verifique se a cobrança está ativada para o seu projeto do Google Cloud.

4. Verifique se você tem os seguintes papéis no projeto: Identity Platform Admin, Service Usage Admin

   Verificar os papéis

   1. No console do Google Cloud, abra a página IAM.

      Acessar IAM
   2. Selecionar um projeto.

   3. Na coluna Principal, encontre a linha que contém seu endereço de e-mail.

      Caso seu endereço de e-mail não esteja nessa coluna, isso significa que você não tem papéis.

   4. Na coluna Papel da linha com seu endereço de e-mail, verifique se a lista de papéis inclui os papéis necessários.

   Conceder os papéis

   1. No console do Google Cloud, abra a página IAM.

      Acesse o IAM
   2. Selecionar um projeto.
   3. Clique em CONCEDER ACESSO.
   4. No campo Novos participantes, digite seu endereço de e-mail.
   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 Save.

5. No console do Google Cloud, na página do seletor de projetos, selecione ou crie um projeto do Google Cloud.

   Observação: se você não pretende manter os recursos criados neste procedimento, crie um projeto novo em vez de selecionar um que já existe. Depois de concluir essas etapas, é possível excluir o projeto. Para fazer isso, basta remover todos os recursos associados a ele.

   Acessar o seletor de projetos

6. Verifique se a cobrança está ativada para o seu projeto do Google Cloud.

7. Verifique se você tem os seguintes papéis no projeto: Identity Platform Admin, Service Usage Admin

   Verificar os papéis

   1. No console do Google Cloud, abra a página IAM.

      Acessar IAM
   2. Selecionar um projeto.

   3. Na coluna Principal, encontre a linha que contém seu endereço de e-mail.

      Caso seu endereço de e-mail não esteja nessa coluna, isso significa que você não tem papéis.

   4. Na coluna Papel da linha com seu endereço de e-mail, verifique se a lista de papéis inclui os papéis necessários.

   Conceder os papéis

   1. No console do Google Cloud, abra a página IAM.

      Acesse o IAM
   2. Selecionar um projeto.
   3. Clique em CONCEDER ACESSO.
   4. No campo Novos participantes, digite seu endereço de e-mail.
   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 Save.

Ativar o Identity Platform

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

   Acessar o Identity Platform

2. Clique em Ativar Identity Platform.

Configurar um login por e-mail

1. Acesse a página 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ê 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 usada pelo app. Verifique se você está seguindo as etapas corretas para seu 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 do SDK, como window.firebase, consulte Fazer upgrade da versão 8 para o SDK modular da Web 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 um 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 projeto do Firebase.
   • AUTH_DOMAIN: o authDomain do projeto do Firebase.

   Encontre 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/10.11.0/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 usar 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, este é um app que tenta fazer login de um usuário codificado e exibir 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 projeto do Firebase.
• AUTH_DOMAIN: o authDomain do 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: pule esta etapa se você estiver usando uma ferramenta CLI do framework JavaScript, como a CLI do Angular, Next.js, CLI Vue ou Criar app React. Confira nosso guia sobre agrupamento 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 CLI Angular, Next.js, CLI Vue ou Criar app React processam automaticamente o agrupamento de módulos para bibliotecas instaladas pelo npm e importadas para a base de código.

Por exemplo, você pode usar o Webpack para gerar uma pasta dist contendo o aplicativo empacotado e o código de dependência. Consulte Como usar bundlers de módulos com o Firebase para mais informações.

Importar JavaScript para sua página

1. Crie um novo arquivo denominado index.html.

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

   <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 máquina local, crie um arquivo chamado 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 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 o 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 seu navegador da Web. Uma mensagem de boas-vindas exibindo o e-mail do usuário será exibida.

Há um limite de tentativas malsucedidas de login do usuário. 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 sua 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 atual 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 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 criado, clique em Excluir ao lado do nome dele. 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. No Console do Google Cloud, acesse a página Gerenciar recursos.

   Acessar "Gerenciar recursos"

2. Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir .
3. Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.

A seguir

Em um app real, seus usuários se inscreveriam usando uma página de registro dedicada e, em seguida, fariam login inserindo seus e-mails e senhas. O Identity Platform oferece uma interface de autenticação predefinida que pode ser usada para essas páginas. Também é possível criar a sua própria. Também é possível 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.

• Migre usuários do aplicativo existente para o Identity Platform.