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.

    Go to project selector

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

  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.

      Go to project selector

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

    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 do Identity Platform no no Cloud Marketplace.

        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 "Provedores do Identity Platform"

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

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

  4. Clique em Ativado para ativar essa opção.

  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 página.

Fazer o login do usuário

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

SDK v9 (modular)

Instalar o SDK e inicializar o Firebase

A versão 9 do SDK do Firebase para JavaScript usa uma 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.

Acessar o Identity Platform no seu JavaScript

Agora que você inicializou o SDK do Firebase, pode usá-lo em qualquer lugar da sua app. Por exemplo, este é um app que tenta fazer login em um sistema usuário 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 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

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 do Vue, ou Criar um app React processam automaticamente o empacotamento de módulos para bibliotecas instaladas pelo NPM e importados para a base de código.

Por exemplo, é possível usar o Webpack para gerar uma pasta dist que contém o aplicativo em pacote e o código de dependência. Consulte Como usar 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. Adicionar dois contêineres HTML básicos e importar o bundled 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 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 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 no 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 malsucedidas do usuário. Várias tentativas rápidas e malsucedidas de login 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 atual do Google Cloud, exclua o provedor e o usuário que você criou 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 do de nuvem. 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:

  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: