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 uma como e-mail e 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.

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

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

  3. Na lista Selecionar um provedor, escolha 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. Observe os dois 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 framework de JavaScript porque o SDK v9 é otimizado para funcionar com bundlers de módulo para eliminar o 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 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.

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

Acessar o Identity Platform no seu JavaScript

Agora que inicializou o SDK do Firebase, você 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 de usuário que você criou anteriormente neste guia.

Usar um bundler de módulo para reduzir o 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, 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 o JavaScript para sua 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 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 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 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 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 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, os usuários se inscreveriam usando uma página de registro dedicada. e fazer login inserindo os e-mails e as senhas. Identity Platform oferece um IU de autenticação pré-criada, que que você pode usar para essas páginas ou pode criar o seu próprio. Talvez você também queira oferecem 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: