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 detalhadas desta tarefa diretamente no Google Cloud console, clique em Orientação:

Orientações

---

Antes de começar

Faça login na sua Google Cloud conta do. Se você começou a usar o Google Cloud, crie uma conta para avaliar o desempenho dos nossos produtos em situações reais. Clientes novos também recebem US $300 em créditos para executar, testar e implantar cargas de trabalho.
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
Roles required to select or create a project
• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.
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
Verify that billing is enabled for your Google Cloud project.
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 column 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.

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

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

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

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

Verify that billing is enabled for your Google Cloud project.

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

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

Ativar o Identity Platform

1. No Google Cloud console, acesse a página 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.

   Acessar 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 na opção Ativado para ativar.

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

Criar um usuário

1. No Google Cloud console, 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 os dois valores, porque você precisará deles em uma etapa posterior.

4. Para adicionar o usuário, clique em Adicionar. O novo usuário será 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 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 de SDKs, 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 e inicializar o SDK do 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 seu projeto do Firebase.

     Importante: evite usar várias chaves de API no seu projeto do Firebase se as restrições do aplicativo estiverem definidas como None ou Websites. O uso de várias chaves com essas restrições específicas pode levar à ambiguidade na forma como o Firebase seleciona uma chave, o que pode causar um comportamento inesperado ou interromper os fluxos de trabalho voltados para o usuário.

   • AUTH_DOMAIN: o authDomain do seu projeto do Firebase.

   É possível 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/12.13.0/firebase-SERVICE.js',
   em que SERVICE é o nome de um 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 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 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 um framework de JavaScript como a Angular CLI, Next.js, Vue CLI, ou Create React App. Confira nosso guia sobre 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 Angular CLI, Next.js, Vue CLI, ou Create React App processam automaticamente o empacotamento de módulos para bibliotecas instaladas por NPM e importadas para a base de código.

Por exemplo, é possível usar Webpack para gerar uma pasta dist que contém o aplicativo em pacote e o código de dependência. Consulte Como usar os bundlers de módulos 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 em pacote.

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

3. Abra index.html no seu navegador da Web. Uma mensagem de boas-vindas 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 novo 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 Google Cloud console, 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 código a seguir para 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 com o e-mail do usuário será exibida.

Há um limite de tentativas de login malsucedidas 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 conta do Google Cloud pelos recursos usados nesta página, siga as etapas abaixo.

Excluir o provedor e o usuário

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

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

   Acessar provedores de identidade

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

3. No Google Cloud console, 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.

Excluir 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 atual para as tarefas neste documento, a exclusão dele incluirá a exclusão de quaisquer outros trabalhos feitos nele.
• Os IDs do projeto personalizados são perdidos. Ao criar o projeto, você pode ter criado um ID 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 explorar várias arquiteturas, tutoriais e guias de início rápido, a reutilização de projetos pode evitar que você exceda limites da cota.

1. No Google Cloud console, 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 Desligar para excluir o projeto.

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.

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