Como autenticar usuários no Firestore com o Identity Platform e as identidades do Google

Neste documento, mostramos como configurar o controle de acesso baseado no usuário em um banco de dados do Firestore usando o Identity Platform como identidade do usuário. e plataforma de gerenciamento de acesso. Com o Identity Platform, é possível adicionar uma camada de autenticação ao aplicativo para proteger e gerenciar as credenciais dos clientes. O Firestore é um banco de dados flexível e orientado a documentos. Ele usa uma linguagem de regras chamada Regras de segurança do Firestore para controlar o acesso a esses dados. Assim, você não precisa escrever um código de autorização do lado do servidor.

Este tutorial é destinado a desenvolvedores e profissionais de segurança que querem usar o Firestore com as regras de segurança do Firestore e que querem autenticar os usuários com o Identity Platform com um provedor de login externo, como o Google. No código deste tutorial, são demonstradas duas maneiras de usar o Identity Platform e o Firestore:

  • Chamadas de API REST, usando JavaScript para chamar APIs da Identity Platform e do Firestore. Essa abordagem permite que você tenha controle total sobre como seu app da Web cria solicitações para o Identity Platform.
  • O SDK de cliente do Identity Platform, usa o SDK de cliente do Identity Platform e o SDK do Firestore para gerenciar o processo de login no Identity Platform e consultar o Firestore. O SDK fornece funções de wrapper JavaScript sobre as APIs REST do Identity Platform, que permitem chamar o Identity Platform usando funções e objetos do JavaScript, em vez de criar solicitações HTTP manualmente.

O SDK do Identity Platform e o SDK do cliente do Firebase compartilham o mesmo SDK. O SDK é compatível com todos os recursos do Identity Platform. O SDK retém o branding do Firebase para preservar a compatibilidade com versões anteriores.

Arquitetura

O diagrama a seguir mostra a arquitetura lógica descrita neste documento:

Diagrama de arquitetura lógica.

Além do Identity Platform e do Firestore, o tutorial usa e demonstra os seguintes componentes:

  • App da Web: um aplicativo que permite aos usuários fazer login no Identity Platform com identidades do Google. Em seguida, ele consulta o Firestore para conseguir informações sobre seu usuário conectado.
  • Login do Google: o provedor de identidade usado neste exemplo.
  • Gerenciador de autenticação: um endpoint de serviço que recebe a resposta do Google, executa o login com o Identity Platform e envia o resultado de volta ao app da Web para concluir o login processo.

Objetivos

  • Configure o Identity Platform para seu projeto do Google Cloud.
  • Adicione o Google como provedor de login do Identity Platform.
  • Use as regras de segurança do Firestore para controlar o acesso a um banco de dados do Firestore.
  • Faça login de usuários em um app da Web com as APIs Identity Platform e com o SDK de cliente do Identity Platform.
  • Acessar com segurança o Firestore a partir de um app da Web do lado do cliente usando a API REST do Firestore e o SDK de cliente JavaScript do Firestore.

Custos

Neste documento, você usará os seguintes componentes faturáveis do Google Cloud:

Para gerar uma estimativa de custo baseada na projeção de uso deste tutorial, use a calculadora de preços. Novos usuários do Google Cloud podem estar qualificados para uma avaliação gratuita.

Antes de começar

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

    Acessar o seletor de projetos

    Se você selecionar um projeto existente, precisará selecionar um que atenda às seguintes condições:

    • O Datastore não está ativado.
    • O App Engine não está ativado.
    • O projeto não inclui um banco de dados do Firestore com regras de segurança existentes. Substitua as regras existentes pelas regras descritas neste documento.

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

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

      Acessar a página do Identity Platform no Marketplace

    2. Clique em Ativar o Identity Platform e aguarde a conclusão da operação.
  4. Ative o Firestore:
    1. No console do Google Cloud, abra o menu à esquerda e selecione Firestore.
    2. Selecione um modo do Firestore. Clique em Selecionar modo nativo.
    3. Escolha onde armazenar os dados Selecione a região mais próxima de seu local. Clique em Criar banco de dados.

Ao concluir as tarefas descritas neste documento, é possível evitar o faturamento contínuo excluindo os recursos criados. Saiba mais em Limpeza.

Como configurar o Identity Platform

Para ativar a autenticação de usuários no Identity Platform, adicione provedores de identidade.

Antes de configurar um provedor do Google no Identity Platform, você precisa configurar a tela de consentimento do OAuth do Google. Os usuários veem essa tela de consentimento na primeira vez que fazem login no app da Web. Na configuração da tela de consentimento do OAuth, é possível definir atributos como o nome do aplicativo, o logotipo do aplicativo e um endereço de e-mail de suporte.

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

    Acessar a página "Provedores do Identity Platform"

  2. Clique em Adicionar um provedor.
  3. Selecione Google e, na página Novo provedor de identidade, clique no link APIs e serviços. A página Credenciais é aberta em uma nova guia. Não feche a guia anterior porque você precisa copiar da página Credentials para a página New identity provider.
  4. Na página Credenciais, clique nas credenciais Cliente da Web (criadas automaticamente pelo serviço do Google).
  5. Copie o valor do ID do cliente, acesse a guia que mostra a página Novo provedor de identidade e cole o valor no campo ID do cliente da Web. Repita essa etapa para copiar o valor da chave secreta do cliente para o campo Chave secreta do cliente da Web.
  6. Na página Novo provedor de identidade, clique em Salvar.
  7. Volte para a página Credenciais e clique em Tela de consentimento OAuth.
  8. Selecione External e clique em Create.
  9. Na página Tela de consentimento OAuth, adicione as seguintes informações:
    • Nome do aplicativo: Identity Platform Tutorial
    • E-mail de suporte: selecione o endereço de e-mail na lista suspensa.
  10. Clique em Salvar.
  11. Na página Editar registro do aplicativo, adicione as seguintes informações:
    • Nome do app: Identity Platform Tutorial
    • E-mail de suporte ao usuário: selecione o endereço de e-mail na lista suspensa.
    • Endereços de e-mail: digite seu endereço de e-mail.
  12. Clique em Salvar e continuar.
  13. Nas páginas Escopos e Informações opcionais, clique em Salvar e continuar.
  14. Na página Resumo, clique em Voltar ao painel.

Como configurar o Firestore

O novo banco de dados do Firestore que você criou está vazio. O novo banco de dados do Firestore também tem um conjunto padrão de regras de segurança que permitem que qualquer pessoa execute operações de leitura no banco de dados. Essas regras padrão impedem que qualquer pessoa grave no banco de dados. Nas próximas etapas, você preencherá o banco de dados com dados e atualizará as regras de segurança para limitar as solicitações de leitura (consulta) aos usuários autorizados.

Criar dados de teste no Firestore

Neste procedimento, você testará as regras de segurança consultando coleções do Firestore em um app da Web.

Primeiro, crie vários documentos para ajudar você a testar as regras de segurança do Firestore. Os nomes de conjuntos e campos diferenciam maiúsculas de minúsculas. Use nomes em letras minúsculas para a coleção e para os campos a fim de evitar que o app da Web falhe quando enviar uma consulta ao Firestore.

  1. Acesse a página do Firestore no console do Google Cloud.
  2. Clique em Iniciar coleção.
  3. No campo ID da coleção, digite customers.

  4. Crie um documento com as seguintes informações:

    ID do document: bob@example.com

    Nome do campo Tipo de campo Valor do campo
    nome String Bob
    empresa String 
    
ExampleOrganization

  5. Clique em Salvar e adicionar outro

  6. Clique em Limpar valores de campo.

  7. Digite as seguintes informações:

  8. ID do documento: seu endereço de e-mail

    Nome do campo Tipo de campo Valor do campo
    nome String Seu nome
    empresa String Nome da empresa.

  9. Clique em Salvar.

Criar regras de segurança do Firestore

As regras de segurança do Firestore podem ser avaliadas usando metadados de autenticação do usuário, dados de consultas recebidas e dados atuais no seu banco de dados.

Com este procedimento, você cria uma regra de segurança para o Firestore com base no endereço de e-mail do usuário conectado e no nome do provedor.

Use o Console do Firebase para gerenciar as regras de segurança do Firestore.

  1. Abra o Console do Firebase e click no projeto.
  2. Clique em Firestore no lado esquerdo da tela.
  3. Na página do Firestore, clique na guia Regras.
  4. Se você optar por usar um projeto atual que tem um banco de dados do Firestore com regras de segurança e estiver planejando limpar o projeto ao concluir este tutorial, anote suas regras de segurança atuais.

  5. Substitua as regras existentes pela seguinte:

    rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
  match /customers/{customerID} {
  allow read:
   if request.auth.uid != null
     && request.auth.token.firebase.sign_in_provider == "google.com"
     && request.auth.token.email == customerID
    }
  }
}

    Esta regra concede permissão somente leitura para a coleção customers. A regra verifica se você fez login por meio do provedor de login do Google configurado no Identity Platform. Ele também garante que você só possa recuperar documentos com um ID de cliente que corresponda ao seu endereço de e-mail.

  6. Clique em Publicar.

Como configurar o ambiente de teste

Para testar as regras de segurança do Firestore, crie um app da Web que exija login. O app da Web está disponível no GitHub e é transferido para um ambiente do Cloud Shell, em que é possível testar o aplicativo. Depois que o usuário faz login, o app da Web lê os documentos do Firestore e exibe o conteúdo deles.

Configurar o app da Web

  1. Acessar a página "Provedores do Identity Platform"

    Acessar a página "Provedores do Identity Platform"

  2. No lado direito da página, clique em Detalhes da configuração da aplicação.
  3. Copie os valores listados ao lado de apiKey e authDomain para a área de transferência e clique em Fechar.
  4. Na parte superior da página, clique em Google Cloud e copie o ID do projeto do card Informações do projeto.
  5. Clique em Abrir no Cloud Shell para abrir o Cloud Shell, clonar o repositório do GitHub e abrir o arquivo config.js. Quando a caixa de diálogo "Abrir no Cloud Shell" for exibida, clique em Confirmar.

    Abrir no Cloud Shell

  6. No arquivo config.js, substitua os marcadores [API_KEY], [AUTH_DOMAIN] e [PROJECT_ID] pelos valores que você copiou na etapa anterior. O código injeta esses valores no URL e no corpo das mensagens que ele cria quando envia solicitações para o Identity Platform.

Registrar o gerenciador de autenticação personalizado

Quando os usuários acessam seu app da Web, eles são redirecionados para fazer login usando o Google como provedor de identidade. Depois que o usuário faz login no Google, o Google retorna uma resposta de redirecionamento (302) com o token do usuário para o gerenciador de autenticação, conforme mostrado no diagrama da arquitetura. No OAuth 2.0, você precisa registrar todos os URLs de redirecionamento na configuração do provedor com antecedência para evitar que o provedor envie seu token para um destino desconhecido. A página Registro de URL de redirecionamento no site do OAuth 2.0 explica os motivos dessa restrição.

Nesta etapa, você atualiza a lista de URLs de redirecionamento autorizados para confiar nos gerenciadores de autenticação usados neste documento.

A lista de URLs faz parte da configuração do cliente do Google OAuth 2.0, a página em que você copiou o ID e a chave secreta do cliente de quando você configurou o Identity Platform.

Neste tutorial, você usará dois gerenciadores de autenticação diferentes:

  • Um gerenciador de autenticação hospedado pelo Identity Platform.
  • Um gerenciador de autenticação personalizado hospedado pelo app da Web.

O gerenciador de autenticação hospedado pelo Identity Platform é acessível por meio do endpoint a seguir, que é gerenciado pelo Google: https://[YOUR_PROJECT_ID].firebaseapp.com/__/auth/handler

Para usar esse gerenciador, você não precisa atualizar a lista de URLs autorizados nas configurações do cliente para o Google OAuth 2.0. Quando você ativou o Identity Platform anteriormente neste documento, ele adicionou o URL automaticamente à lista de URLs autorizados.

Se você usa o SDK do Identity Platform Client, o SDK usa esse gerenciador de autenticação integrado. O gerenciador de autenticação para o Identity Platform exige que seu app da Web use esse SDK, porque o SDK troca objetos de estado com o gerenciador. Por exemplo, o SDK informa ao gerenciador onde redirecionar os usuários depois que eles fizerem login no Identity Platform.

Para o gerenciador de autenticação personalizado hospedado pelo app da Web, quando você usa as APIs REST do Identity Platform diretamente do JavaScript, recomendamos implementar e hospedar seu próprio gerenciador de autenticação, em vez do SDK.

Neste tutorial, você verá um gerenciador de autenticação de amostra que gerencia o processo de login no Identity Platform quando recebe o token do usuário do Google. É preciso adicionar o URL do gerenciador personalizado à lista de URLs autorizados nas configurações do cliente do Google OAuth 2.0.

Neste tutorial, você executa o aplicativo da Web no Cloud Shell. Depois de iniciar o app da Web, encontre o nome do host da sua instância do Cloud Shell e atualize a configuração do provedor adequadamente.

  1. Execute o app da Web no Cloud Shell:

    npm install
node app.js

  2. Aguarde a seguinte saída aparecer: Example app listening on port 8080!

  3. Clique no ícone Visualização da Web e em Visualizar na porta 8080. Aguarde a nova guia mostrar a página da Web e copie o valor em URL do gerenciador de autenticação (para o cliente do Google OAuth 2.0).

  4. Acesse a página Credenciais.
    Acessar a página "Credenciais"

  5. Na página Credenciais, clique em Cliente da Web (criado automaticamente pelo serviço do Google).

  6. Na página URIs de redirecionamento autorizados, clique em Adicionar URI e cole o URL que você copiou anteriormente.

  7. Clique em Salvar e deixe o app da Web em execução.

Autorizar o domínio do app da Web

Quando você usa o gerenciador de autenticação do Identity Platform, o gerenciador redireciona você de volta ao app da Web, com suas informações e tokens de usuário. Para evitar o envio de informações a um domínio não autorizado, você precisa autorizar o domínio em que o aplicativo da Web está sendo executado.

  1. Volte para a página da Web padrão do aplicativo da Web e copie o valor em nome de Host (para domínios autorizados do Identity Platform).
  2. Acesse a página "Configurações do Identity Platform".

    Acessar a página "Configurações" do Identity Platform

  3. Clique na guia Segurança e em Adicionar domínio.
  4. Cole o domínio que você copiou, clique em Adicionar e em Salvar.
  5. Mantenha o app da Web em execução no Cloud Shell. Você precisará dele na próxima tarefa.

Como fazer login no Identity Platform com sua identidade do Google

O diagrama a seguir expande o diagrama da arquitetura de alto nível no início deste guia. Este diagrama apresenta os detalhes do processo de autenticação descrito neste documento para mostrar o fluxo cronológico de eventos. Os eventos começam com o usuário clicando em um botão de login e terminam com o aplicativo da Web recuperando dados do Firestore usando a identidade do usuário:

Arquitetura de alto nível.

  1. Um usuário do seu app da Web clica em Fazer login com o Google no app da Web.
  2. O app da Web consulta o Identity Platform em busca do URL de login do provedor de identidade escolhido (neste caso, o Google).
  3. O app da Web redireciona o usuário para a página de login do seu provedor de identidade, junto com um URL de callback que aponta para o gerenciador de autenticação.
  4. Na página de login do provedor, o usuário insere as credenciais e consentimentos na autorização solicitada pelo app da Web.
  5. Depois que o usuário faz login, o provedor gera um token e envia um redirecionamento ao URL de retorno de chamada fornecido anteriormente.
  6. O gerenciador de autenticação recebe o token emitido pelo Google e o envia para o Identity Platform para fazer o login do usuário. O Identity Platform valida o token, faz o login do usuário e retorna um token de ID e um token de atualização emitidos pelo Identity Platform com as informações do usuário. Quando o Identity Platform faz o login do usuário pela primeira vez, ele cria um perfil de usuário correspondente no banco de dados. As informações da conta disponibilizadas pelo Google são usadas para preencher o perfil do usuário.
  7. Depois de fazer login no Identity Platform, o gerenciador redirecionará você de volta para o app da Web, junto com os novos tokens recebidos do Identity Platform.
  8. Para enviar solicitações ao Firestore, o app da Web anexa o token de código do usuário a todas as solicitações do Firestore. As regras de segurança do Firestore determinam que o Firestore trata todas as solicitações sem um token de código como uma solicitação anônima. Ele é negado.
  9. Os tokens de código emitidos pelo Identity Platform expiram após uma hora. Se o token de código expirar, o app da Web usará o token de atualização em cache para recuperar um novo token de código do Identity Platform.

O app da Web de amostra demonstra como interagir com o Identity Platform e o Firestore de duas maneiras.

O primeiro método é com a API REST do Identity Platform:

  • Esta técnica usa código personalizado que chama as APIs REST do Identity Platform usando JavaScript.
  • As chamadas de API são implementadas no arquivo site/identity-platform-auth-helper.js. O gerenciador de autenticação é implementado no arquivo views/auth-handler.ejs.
  • Os objetos de estado de troca e de gerenciador de troca permitem que você volte ao app da Web após o login.

O segundo método é com o SDK de cliente do Identity Platform:

  • Com essa técnica, o SDK lida com o processo de login.
  • O SDK implementa todas as chamadas de API necessárias e expõe um conjunto de funções para o desenvolvedor, a fim de controlar qual fluxo de login iniciar.

Fazer login usando as APIs REST do Identity Platform

Há duas chamadas de API principais que controlam o fluxo de login com o Google como provedor de identidade.

As duas chamadas de API principais que controlam o fluxo de login com o Google como provedor.

  • Obtém o URL e o identificador do provedor. O método accounts.createAuthUri retorna um URL de autorização do provedor de identidade fornecido. O app da Web navega até o URL de autorização retornado para iniciar o processo de login com o provedor de identidade selecionado (por exemplo, o Google).

    O snippet de código a seguir mostra como chamar essa API:

    IdentityPlatformAuthHelper.prototype.createAuthUri = function(providerId, tenantId) {
  // https://cloud.google.com/identity-platform/docs/reference/rest/v1/accounts/createAuthUri
  const createAuthUriUrl = `${this.identityPlatformBaseUrl}/accounts:createAuthUri?key=${config.apiKey}`;
  const request = {
    'providerId' : providerId,
    'tenantId' : tenantId,
    'continueUri' : this.authHandlerUrl,
  };

  return fetch(
      createAuthUriUrl,
      {
        contentType: 'application/json',
        method: 'POST',
        body: JSON.stringify(request)
      }
    )
  .then(response => response.json())
  .then(data => {
    return {
      "authUri" : data.authUri,
      "sessionId" : data.sessionId
    };
  })
  .catch(error => {
    console.error(error);
  });
};

  • Faça login no Identity Platform usando um token emitido pelo Google. O método accounts.signInWithIdp faz o login do usuário no Identity Platform por meio da resposta de autorização do provedor de identidade. A API responde a essa solicitação com um novo token, emitido pelo Identity Platform. O app da Web chama essa API depois de receber uma resposta de autorização bem-sucedida do provedor de identidade. O snippet de código a seguir mostra como chamar essa API:

    IdentityPlatformAuthHelper.prototype.signInWithIdp = function(data) {
  authState = this.getAuthState();
  this.authHandlerUrl = authState.authHandlerUrl;

  // https://cloud.google.com/identity-platform/docs/reference/rest/v1/accounts/signInWithIdp
  const signInWithIdpUrl = `${this.identityPlatformBaseUrl}/accounts:signInWithIdp?key=${config.apiKey}`;

  const request = {
      'requestUri' : this.authHandlerUrl,
      'sessionId' : authState.sessionId,
      'returnRefreshToken' : true,
      'returnSecureToken' : true,
      'tenantId' : authState.tenantId
    };

  if (authState.providerId == 'google.com' || authState.providerId.startsWith('saml.')) {
    request.postBody = `${data}&providerId=${authState.providerId}`;
  } else {
    throw new Error('This sample script only supports the google.com and SAML providers for Identity Platform');
  }

  fetch(
      signInWithIdpUrl,
      {
        contentType: 'application/json',
        method: 'POST',
        body: JSON.stringify(request)
      }
    )
  .then(response => response.json())
  .then(data => {
    this.user = data;
    this.signedInHandler(this.user);
  })
  .catch(error => {
    console.error(error);
  });
}

    O valor do campo postBody tem formatos diferentes, dependendo do provedor de identidade selecionado e do protocolo de autorização usado. O código processa o provedor de identidade do Google com o token do OpenID Connect (OIDC) e os provedores de identidade baseados em SAML com as respectivas respostas SAML. Se você estiver usando outros tipos de tokens de autorização, como os tokens de acesso OAuth 2.0 ou OAuth 1.0, consulte a documentação da API do seu provedor.

Depois de fazer login no app da Web, o usuário pode enviar consultas para o Firestore.

Fluxo de eventos quando o app da Web envia uma consulta ao Firestore

Antes que o código possa acionar uma solicitação para as APIs REST do Firestore, ele adiciona o token de ID que foi emitido e assinado pelo Identity Platform para a solicitação. O snippet de código a seguir mostra como criar a solicitação:

function showCustomerInformation(userEmail) {
  $('#customer-information').show();
  $('#output').empty();

  const idTokenPromise = authHelper.getIdToken();
  const firestoreEndpoint = 'https://firestore.googleapis.com/v1';
  const defaultDbPath = `projects/${config.projectId}/databases/(default)/documents`;
  const collectionId = 'customers';

  // Call Firestore via its REST API and authenticate with the user's ID token
  idTokenPromise
  .then(idToken => {
    console.log(`JWT Token: ${idToken}`);
    return fetch(
      `${firestoreEndpoint}/${defaultDbPath}/${collectionId}/${userEmail}`,
      {
        headers: {
          'Authorization': 'Bearer ' + idToken
        },
        contentType: 'application/json',
        method: 'GET'
      })
  })
  .then(response => response.json())
  .then(data => {
      if (data.error) {
        throw data.error.message;
      }
      var fields = data.fields;
      $('#output').append($('<p>').text(`Id: ${userEmail}`));
      $('#output').append($('<p>').text(`Name: ${fields.name.stringValue}`));
      $('#output').append($('<p>').text(`Company: ${fields.company.stringValue}`));
      $('#output').append($('<p>').text(`Doc path: ${data.name}`));
      $('#output').append($('<p>').text(`Doc URL: ${firestoreEndpoint}/${data.name}`));
  })
  .catch(error => {
    console.error(error);
    $('#output').text("Error: " + JSON.stringify(error));
  });
}

A função IdentityPlatformAuthHelper.getIdToken() retorna um token de ID válido na forma de um JSON Web Token (JWT) recuperando um token em cache do navegador. Se o token já tiver expirado, a função será renovada chamando a API Identity Platform para trocar um token de atualização por um novo token de código.

O snippet a seguir mostra como verificar se o token de ID atual ainda é válido ou expirado e como atualizá-lo conforme necessário chamando o Identity Platform:

IdentityPlatformAuthHelper.prototype.getIdToken = function() {
  const token = this.jwtDecode(this.user.idToken);

  // If exp has passed, refresh the token
  if (Date.now() > token.payload.exp * 1000) {
    return this.refreshToken(this.user.refreshToken);
  }
  return Promise.resolve(this.user.idToken);
}

IdentityPlatformAuthHelper.prototype.jwtDecode = function(t) {
  const token = {};
  token.raw = t;
  token.header = JSON.parse(window.atob(t.split('.')[0]));
  token.payload = JSON.parse(window.atob(t.split('.')[1]));
  return token;
}

IdentityPlatformAuthHelper.prototype.refreshToken = function(refreshToken) {
  // https://cloud.google.com/identity-platform/docs/reference/rest/client#section-refresh-token
  const tokenUrl = `https://securetoken.googleapis.com/v1/token?key=${config.apiKey}`;
  const requestBody = new URLSearchParams(`grant_type=refresh_token&refresh_token=${refreshToken}`);

  return fetch(
      tokenUrl,
      {
        contentType: 'application/x-www-form-urlencoded',
        method: 'POST',
        body: requestBody
      }
    )
  .then(response => response.json())
  .then(data => {
    this.user.idToken = data.id_token;
    this.user.refreshToken = data.refresh_token;
    return this.user.idToken;
  })
  .catch(error => {
    console.error(error);
  });
}

Execute as etapas a seguir para fazer login no Identity Platform com sua identidade do Google:

  1. Retorne à guia que mostra a página padrão do app da Web. Se você já fechou essa guia, volte para a página do Cloud Shell, clique em Visualização na Web e, em seguida, em Visualizar na porta 8080. Aguarde a nova guia mostrar a página da Web.
  2. Altere o endereço no navegador para mostrar a página customer-info-with-api.html. O novo URL tem o seguinte formato: https://random_prefix-devshell.appspot.com/customer-info-with-api.html

  3. Clique em Sign in with Google e faça login com suas credenciais. Depois de fazer login, uma caixa de texto será exibida com seu endereço de e-mail.

    Se você quiser decodificar o JWT para ver as informações do usuário fornecidas pelo Identity Platform e pelo Google, faça o seguinte. Como alternativa, leia o próximo passo.

    As informações do usuário estão na seção payload (segundo) do JWT e estão codificadas em base64. Para decodificar a segunda parte do JWT e imprimir as informações em um arquivo JSON Usando jq, execute o seguinte comando no Cloud Shell:

    token=[PASTE_JWT_STRING_HERE]
echo $token | awk '{split($0, a, "."); print a[2]; }' | base64 -d | jq

    Continue consultando o Firestore para encontrar outros documentos.

  4. Clique em Receber informações do cliente. Seu nome e o nome da empresa aparecem conforme você os inseriu no banco de dados do Firestore.

  5. Altere o endereço de e-mail para bob@example.com e clique em Fazer login com o Google. A resposta desta vez é a seguinte mensagem de erro:

    Error: "Missing or insufficient permissions." The security rule you added to Firestore limits your access to documents with an ID that matches your email address, as it appears in the token that Identity Platform created.

  6. Não feche a página da Web. Você precisará usá-la no próximo procedimento.

Faça login usando o SDK do cliente do Identity Platform

Em vez de criar manualmente as solicitações para o Identity Platform, use o SDK do cliente do Identity Platform. O SDK gerencia o processo de login e fornece funções para controlar o fluxo de login, como qual provedor usar ou se um redirecionamento ou pop-up será usado.

Para usar o SDK cliente do Identity Platform, você precisa incluir vários arquivos de script na página HTML. O snippet a seguir mostra quais scripts são necessários:

<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>

O snippet a seguir mostra como usar o SDK para fazer login com o provedor do Google.

$('#sign-in').click((event) => {
  provider = new firebase.auth.GoogleAuthProvider();
  //firebase.auth().signInWithPopup(provider)
  firebase.auth().signInWithRedirect(provider)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });
});

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $('#logged-out').hide();
    /* If the provider gives a display name, use the name for the
    personal welcome message. Otherwise, use the user's email. */
    const welcomeName = user.displayName ? user.displayName : user.email;
    console.log(firebase.auth().currentUser);
    $('#user').text(welcomeName);
    $('#logged-in').show();
    $('#email').val(firebase.auth().currentUser.email);
  } else {
    $('#logged-in').hide();
    $('#logged-out').show();
    $('#email').val('');
  }
  $('#customer-information').hide();
});

$('#sign-out').click(function(event) {
  firebase.auth().signOut().then(function() {
    console.log('Sign out successful');
  }, function(error) {
    console.error(error);
  });
});

A função firebase.auth().signInWithRedirect() inicia o processo de login na mesma janela do navegador, redirecionando o usuário para a página de login do provedor. Usar o GoogleAuthProvider instrui a função a iniciar o fluxo de login do Google.

É possível substituir o comportamento de redirecionamento por um comportamento de pop-up chamando a função signInWithPopup.

Para usar outros provedores de autenticação, adicione qualquer tipo que implemente a interface firebase.auth.AuthProvider. Para incluir todos os parâmetros necessários, siga a documentação do provedor selecionado.

A função firebase.auth().onAuthStateChanged é um observador que aciona o login e a saída. No login, o código do app da Web preenche a página da Web com as informações retiradas do objeto User e oculta o botão de login. Ao sair, o código limpará a página da Web e mostrará o botão de login novamente.

O SDK de cliente do Identity Platform é integrado ao SDK do Firestore. Em todas as consultas, o SDK do Firestore anexa um token de ID válido, buscando-o no SDK do cliente do Identity Platform. O SDK de cliente do Identity Platform é responsável por atualizar o token de ID quando ele expira.

O snippet de código a seguir mostra como consultar o Firestore usando o SDK do Firestore:

function showCustomerInformation(userEmail) {
  $('#customer-information').show();
  $('#output').empty();

  const db = firebase.firestore();
  const collectionId = 'customers';

  query = db.collection(collectionId).doc(userEmail).get();
  query.then((doc) => {
    var fields = doc.data();
    $('#output').append($('<p>').text(`Id: ${doc.id}`));
    $('#output').append($('<p>').text(`Name: ${fields.name}`));
    $('#output').append($('<p>').text(`Company: ${fields.company}`));
  }).catch((error) => {
    console.error(error);
    $('#output').text("Error: " + error.toString());
  });
}

Observe que você não precisa escrever o código para adicionar o token de ID à consulta. Os SDKs do Firestore e do Identity Platform usam o processo de autenticação.

Execute as etapas a seguir para fazer login no Identity Platform com sua identidade do Google e, em seguida, consulte o Firestore:

  1. Se você já fechou a guia do app da Web relevante, volte para a guiaCloud Shell clique em Visualização na Web e Visualizar na porta 8080. Aguarde a nova guia mostrar a página da Web.
  2. Altere o endereço no navegador para mostrar a página customer-info-with-sdk.html. O novo URL tem o seguinte formato: https://random_prefix-devshell.appspot.com/customer-info-with-sdk.html
  3. Clique em Sign in with Google e faça login com suas credenciais. Depois de fazer login, uma caixa de texto aparecerá com seu endereço de e-mail.
  4. Clique em Receber informações do cliente. Seu nome e o nome da empresa aparecem conforme você os inseriu no banco de dados do Firestore.

  5. Altere o endereço de e-mail para bob@example.com e clique em Fazer login com o Google. A resposta desta vez é uma mensagem de erro:

    Error: FirebaseError: [code=permission-denied]: Missing or insufficient Permissions.

    Para mais informações sobre como usar o JavaScript para consultar o Firestore, consulte a documentação do Firestore.

Solução de problemas no app da Web

Saiba mais sobre as etapas de solução de problemas que podem ser úteis se você encontrar os seguintes problemas ao executar o app da Web.

Erros ao navegar pelo app da Web

Erro Observações
Você verá uma das seguintes mensagens de erro:

Error:Could not connect to Cloud Shell on port 8080

Error:No active Cloud Shell 		Verifique se o Cloud Shell está aberto e se o app da Web está em execução, conforme explicado em Registrar o gerenciador de autenticação personalizado. Se você abrir uma nova sessão do Cloud Shell, altere o diretório de trabalho para o diretório do app da Web antes de executar o app da Web:

cd "$HOME"/cloudshell_open/securing-cloud-firestore-with-identity-platform

Depois de executar o app da Web, verifique se o resultado abaixo é exibido:

Example app listening on port 8080!

Erros ao fazer login no Google

Erro Observações
Nada acontece quando você clica em Fazer login com o Google. Você verá o seguinte código de erro:

Cannot GET /undefined 		Verifique se você definiu as variáveis apiKey e authDomain no arquivo config.js, conforme explicado em Configurar o aplicativo da Web
Na página de login do Google, você verá a seguinte mensagem de erro:

Authorization Error - Error 400: redirect_uri_mismatch 		O URL de redirecionamento enviado ao Google não corresponde à lista de URLs autorizados para o cliente OAuth. Verifique se você configurou os URIs de redirecionamento autorizados, conforme explicado em Registrar o gerenciador de autenticação personalizado.
Quando você fizer login no Google com o SDK do Identity Platform, verá a seguinte mensagem de erro:

This domain (***) is not authorized to run this operation. Add it to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign-in method tab 		Esse erro pode aparecer se o domínio que o Cloud Shell usa não existir na lista de domínios permitidos do Identity Platform. Para verificar se o nome de domínio foi adicionado à lista de domínios, siga as etapas em Autorizar o domínio do app da Web.

Erros ao buscar informações do cliente

Erro Observações
Você verá uma das seguintes mensagens de erro:

Error: FirebaseError: [code=permission-denied]: Missing or insufficient permissions

Error: Missing or insufficient permissions 		É possível que as regras de segurança do Firestore não validem o token enviado ao Firestore. Verifique se as regras de segurança do Firestore estão configuradas corretamente, conforme explicado em Criar regras de segurança do Firestore.
Você verá uma das seguintes mensagens de erro:

Error: FirebaseError: [code=unavailable]: Failed to get document because the client is offline

Error: "The project *** does not exist or it does not contain an active Datastore or Firestore database

Error: "Project id [PROJECT_ID] is malformed: it either contains invalid characters or is too long 		Verifique se você definiu a propriedade projectId no arquivo config.js, conforme explicado em Configurar o aplicativo da Web.

Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados no tutorial, exclua o projeto que os contém ou mantenha o projeto e exclua os recursos individuais.

  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.

Excluir recursos individuais

  1. No Cloud Shell, pressione Ctrl+C para interromper o app da Web.

  2. Exclua o diretório do repositório clonado:

    rm -rf "$HOME"/cloudshell_open/securing-cloud-firestore-with-identity-platform

  3. Acesse a página "Configurações do Identity Platform".

    Acessar a página Configurações do Identity Platform

  4. Clique na guia Segurança, exclua o domínio adicionado anteriormente e clique em Salvar.

  5. Acesse a página Provedores de identidade.

    Acessar a página "Provedores do Identity Platform"

  6. Exclua o provedor do Google que você adicionou anteriormente.

  7. Acesse APIs e serviços e depois a página Credenciais.

    Acessar a página Credenciais

  8. Na página "Credenciais", clique em Cliente da Web (criado automaticamente pelo serviço do Google).

  9. Na página URIs de redirecionamento autorizados, exclua o URL que você colou anteriormente e clique em Salvar.

  10. Abra o Console do Firebase e clique no seu projeto no painel de navegação do console.

  11. Selecione a opção Banco de dados no menu Desenvolver à esquerda.

  12. Na página Banco de dados, clique na guia Regras.

  13. Substitua as regras de segurança atuais pelas usadas antes de iniciar o documento e clique em Publicar.

  14. Acesse a página do Firestore no console do Google Cloud.

  15. Clique no menu à esquerda da coleção customers e em Delete collection.

  16. No pop-up de confirmação de exclusão, digite customers no campo "ID do conjunto" e clique em Excluir.

A seguir

Confira arquiteturas de referência, diagramas e práticas recomendadas do Google Cloud. Confira o Centro de arquitetura do Cloud.