GSP186

Informações gerais

Este laboratório mostra como adicionar autenticação ao seu aplicativo usando o Identity Platform. Essa autorização identifica quem você é e determina suas permissões. Para saber mais, consulte as Informações gerais sobre autenticação.

O Identity Platform oferece um serviço de autenticação simples e personalizável para inscrição e login do usuário. As atividades de desenvolvimento e administração se tornam mais fáceis devido à variedade de SDKs de apps (Android, iOS e Web), além de SDKs Admin (Node.js, Java, Python e mais). Para saber mais sobre o Identity Platform, consulte Identity Platform.

Neste laboratório, utilizamos um aplicativo de teste on-line. Você vai adicionar a autenticação do Identity Platform e configurá-la para usar uma credencial com uma senha e um endereço de e-mail simples. Assim, os usuários precisam se registrar e fazer login antes do teste.

Conteúdo

Neste laboratório, você vai executar as seguintes tarefas:

• Adicionar a configuração do Identity Platform a um aplicativo da Web no lado do cliente
• Criar um código Python para integrar a autenticação do Identity Platform a um aplicativo da Web no lado do cliente

Configuração e requisitos

Antes de clicar no botão Começar o Laboratório

Leia estas instruções. Os laboratórios são cronometrados e não podem ser pausados. O timer é ativado quando você clica em Iniciar laboratório e mostra por quanto tempo os recursos do Google Cloud vão ficar disponíveis.

Este laboratório prático permite que você realize as atividades em um ambiente real de nuvem, e não em uma simulação ou demonstração. Você vai receber novas credenciais temporárias para fazer login e acessar o Google Cloud durante o laboratório.

Confira os requisitos para concluir o laboratório:

• Acesso a um navegador de Internet padrão (recomendamos o Chrome).

Observação: para executar este laboratório, use o modo de navegação anônima (recomendado) ou uma janela anônima do navegador. Isso evita conflitos entre sua conta pessoal e de estudante, o que poderia causar cobranças extras na sua conta pessoal.

• Tempo para concluir o laboratório: não se esqueça que, depois de começar, não será possível pausar o laboratório.

Observação: use apenas a conta de estudante neste laboratório. Se usar outra conta do Google Cloud, você poderá receber cobranças nela.

Como iniciar seu laboratório e fazer login no console do Google Cloud

1. Clique no botão Começar o laboratório. Se for preciso pagar por ele, uma caixa de diálogo vai aparecer para você selecionar a forma de pagamento. No painel Detalhes do Laboratório, à esquerda, você vai encontrar o seguinte:

   • O botão Abrir Console do Google Cloud
   • O tempo restante
   • As credenciais temporárias que você vai usar neste laboratório
   • Outras informações, se forem necessárias

2. Se você estiver usando o navegador Chrome, clique em Abrir console do Google Cloud ou clique com o botão direito do mouse e selecione Abrir link em uma janela anônima.

   O laboratório ativa os recursos e depois abre a página Fazer Login em outra guia.

   Dica: coloque as guias em janelas separadas lado a lado.

   Observação: se aparecer a caixa de diálogo Escolher uma conta, clique em Usar outra conta.

3. Se necessário, copie o Nome de usuário abaixo e cole na caixa de diálogo Fazer login.

   {{{user_0.username | "Username"}}}

   Você também encontra o nome de usuário no painel Detalhes do Laboratório.

4. Clique em Próxima.

5. Copie a Senha abaixo e cole na caixa de diálogo de Olá.

   {{{user_0.password | "Password"}}}

   Você também encontra a senha no painel Detalhes do Laboratório.

6. Clique em Próxima.

   Importante: você precisa usar as credenciais fornecidas no laboratório, e não as da sua conta do Google Cloud. Observação: se você usar sua própria conta do Google Cloud neste laboratório, é possível que receba cobranças adicionais.

7. Acesse as próximas páginas:

   • Aceite os Termos e Condições.
   • Não adicione opções de recuperação nem autenticação de dois fatores (porque essa é uma conta temporária).
   • Não se inscreva em testes gratuitos.

Depois de alguns instantes, o console do Google Cloud será aberto nesta guia.

Observação: para acessar os produtos e serviços do Google Cloud, clique no Menu de navegação ou digite o nome do serviço ou produto no campo Pesquisar.

Ativar o Cloud Shell

O Cloud Shell é uma máquina virtual com várias ferramentas de desenvolvimento. Ele tem um diretório principal permanente de 5 GB e é executado no Google Cloud. O Cloud Shell oferece acesso de linha de comando aos recursos do Google Cloud.

1. Clique em Ativar o Cloud Shell na parte de cima do console do Google Cloud.

2. Clique nas seguintes janelas:

   • Continue na janela de informações do Cloud Shell.
   • Autorize o Cloud Shell a usar suas credenciais para fazer chamadas de APIs do Google Cloud.

Depois de se conectar, você verá que sua conta já está autenticada e que o projeto está configurado com seu Project_ID, . A saída contém uma linha que declara o projeto PROJECT_ID para esta sessão:

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

A gcloud é a ferramenta de linha de comando do Google Cloud. Ela vem pré-instalada no Cloud Shell e aceita preenchimento com tabulação.

3. (Opcional) É possível listar o nome da conta ativa usando este comando:

gcloud auth list

4. Clique em Autorizar.

Saída:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (Opcional) É possível listar o ID do projeto usando este comando:

gcloud config list project

Saída:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Observação: consulte a documentação completa da gcloud no Google Cloud no guia de visão geral da gcloud CLI.

Inicie o editor de código do Cloud Shell

Na barra de ferramentas do Cloud Shell, para mover o Cloud Shell para uma nova janela, clique no ícone Abrir em uma nova janela e depois em Abrir editor para iniciar o editor de código.

No terminal do Cloud Shell, execute o seguinte comando para configurar o ID do projeto, ao substituir <YOUR-PROJECT-ID> pela ID do projeto do laboratório:

gcloud config set project <YOUR-PROJECT-ID>

Autorizar o Cloud Shell

Tarefa 1: Preparar o aplicativo do estudo de caso

Nesta tarefa, você vai clonar, configurar e executar o aplicativo de teste.

Clonar o código-fonte no Cloud Shell

1. Clone o esqueleto do aplicativo de um repositório do GitHub.com:

   git clone https://github.com/GoogleCloudPlatform/training-data-analyst

2. Crie um link flexível como atalho para o diretório de trabalho:

   ln -s ~/training-data-analyst/courses/developingapps/v1.3/python/firebase ~/firebase

Configurar e executar o aplicativo de estudo de caso

1. Acesse o diretório que contém os arquivos de amostra deste laboratório:

   cd ~/firebase/start

2. Execute o comando a seguir para alterar a região para us-central para a região padrão atribuída a você:

   export REGION={{{ project_0.startup_script.app_region | REGION }}} sed -i "s/us-central/$REGION/g" prepare_environment.sh

3. Configure o aplicativo:

   . prepare_environment.sh

   Esse arquivo de script faz o seguinte:

   • Cria um aplicativo do App Engine
   • Cria um bucket do Cloud Storage chamado gs:[Project-ID]-media.
   • Exporta as variáveis de ambiente: GCLOUD_PROJECT e GCLOUD_BUCKET.
   • Cria um ambiente isolado virtualenv do Python 3 e o ativa.
   • Executa > pip install -r requirements.txt.
   • Cria entidades no Cloud Datastore
   • Imprime o ID do projeto do Google Cloud Platform

Clique em Verificar meu progresso para conferir o objetivo. Configure o aplicativo do estudo de caso

4. Execute o aplicativo:

   python run_server.py

Inicie o aplicativo do estudo de caso

• No Cloud Shell, clique em Visualização na Web > Visualizar na porta 8080 para exibir o aplicativo de teste.

Deixe essa janela aberta porque você precisará do domínio de visualização na Web do Cloud Shell mais adiante no laboratório.

Tarefa 2: Examinar o código do aplicativo para o estudo de caso

Nesta tarefa, você vai analisar o código do aplicativo do estudo de caso. Você pode usar os editores de shell instalados no Cloud Shell, como nano ou vim, ou usar o editor de código do Cloud Shell.

Este laboratório usará o editor de código do Cloud Shell para revisar o código do aplicativo de teste.

Inicie o editor de código do Cloud Shell

• No Cloud Shell, clique em Abrir editor para iniciar o editor de código.

Observação: se necessário, clique em Abrir em uma nova janela. Para retornar ao terminal, clique em Abrir terminal.

Analise o aplicativo cliente

1. Acesse a pasta firebase/start usando o painel do navegador de arquivos do lado esquerdo do editor de código.

2. Continue a navegação. Abra ...quiz/webapp/static/client/. Clique no arquivo index.html.

   Este arquivo é a única página no aplicativo de página única (SPA) do AngularJS. Ele contém tags <script></script> das bibliotecas e do código do aplicativo, além da marcação do local em que o SPA vai renderizar a saída dinâmica.

3. Selecione o arquivo qiq-login-template.html na pasta ...quiz/webapp/static/client/app/auth/.

   Esse arquivo contém o modelo AngularJS para o componente Login. Observe que ele contém algumas caixas de texto e um botão. O botão tem um manipulador de eventos que executa o código quando é clicado.

4. Ainda nessa pasta, selecione o arquivo qiq-login.js.

   Esse arquivo contém um componente do AngularJS. Ele permite que o usuário faça login no aplicativo ou acesse uma página de registro.

Tarefa 3. Configure a autenticação do Identity Platform

Nessa tarefa, você vai configurar o Identity Platform para fazer o login de um usuário usando e-mail e senha. Por fim, você vai criar um usuário para fazer login no aplicativo de teste.

Configurar o login do Identity Platform para solicitar e-mail e senha

1. No console do Google Cloud, acesse o Menu de navegação () e clique em Identity Platform.

2. Clique em Ativar Identity Platform.

   Observação: se a mensagem de pop-up "Sair do site" for exibida, clique em Sair.

   A página do Identity Platform aparece no console do Cloud.

   

3. Clique em Adicionar um provedor.

4. Na janela "Método de login", em Selecionar um provedor, clique em E-mail/senha.

5. Clique em Ativado.

6. No painel "Domínios autorizados", clique em Adicionar domínio.

7. Volte para o aplicativo de teste em execução e copie o domínio, que tem o seguinte formato

8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-{{{project_0.default_region | "REGION"}}}-ctgq.cloudshell.dev

8. Cole o domínio no campo Domínio.

9. Modifique o domínio colado para que apenas o nome de domínio fique no campo "Domínio".

   Remova https:// e tudo o que segue o nome de domínio, incluindo barras. O nome de domínio deve terminar com cloudshell.dev.

10. Clique em Save.

Observação: se uma mensagem de erro for exibida indicando que você deve tentar novamente mais tarde, você provavelmente enviou mais do que o nome de domínio. Clique em Cancelar na caixa de diálogo e, em seguida, em Adicionar domínio para tentar novamente.

11. Na janela do provedor de identidade, clique em Salvar.

    Talvez seja necessário rolar a tela para baixo para ver o botão "Salvar".

Adicionar um usuário

1. No painel do Identity Platform, clique em Usuários.

2. Clique em Adicionar usuário.

3. Na caixa de diálogo "Adicionar usuário", especifique as seguintes informações:

   E-mail	user1@example.com
   Senha	abc123!

4. Clique em Add.

Clique em Verificar meu progresso para conferir o objetivo. Configure a autenticação do Identity Platform

Tarefa 4: Integrar o Identity Platform a um aplicativo da Web do lado do cliente

Nesta tarefa, você aplicará a configuração do Identity Platform ao seu aplicativo da Web do lado do cliente.

1. No painel de navegação, clique em Provedores.

2. Clique em Detalhes da configuração do aplicativo.

3. Na caixa de diálogo "Configurar seu aplicativo", copie a marcação do Identity Platform.

   

4. Clique em Fechar.

5. No editor de código do Cloud Shell, abra o arquivo index.html em ...webapp/static/client/.

6. Cole a marcação de configuração logo antes das outras tags <script></script> da parte inferior da página.

7. Salve o arquivo index.html.

Tarefa 5: Execute o aplicativo

Nesta tarefa, você vai verificar se pode fazer login no aplicativo de teste usando as credenciais criadas no Identity Platform na etapa anterior. Depois, vai registrar um novo usuário no aplicativo de teste e verificar se essas credenciais foram adicionadas ao Identity Platform.

1. Retorne ao aplicativo de teste e atualize o navegador.

2. Na barra de navegação, clique em Fazer o teste.

   

3. Clique em GCP, Pessoas ou Lugares.

   Observação: as páginas do teste estarão em branco porque não é possível fazer um teste sem estar logado.

4. Na barra de navegação, insira as seguintes credenciais inválidas:

   E-mail	user2@example.com
   Senha	abcd1234$

5. Clique em Login.

   Observação: a tentativa de login vai falhar porque o usuário não tem registro.

6. Insira as seguintes credenciais que você criou em uma tarefa anterior:

   E-mail	user1@example.com
   Senha	abc123!

7. Clique em Login.

   O endereço de e-mail do usuário deve aparecer na barra de navegação, e a primeira pergunta é apresentada.

   Observação: se o login não funcionar, a senha pode não ter sido configurada corretamente. Volte para a página "Usuários" no Identity Platform e exclua e adicione novamente com a senha correta o usuario1@exemplo.com.

8. Na barra de navegação, clique em Logout.

9. Clique no link Registrar.

10. No formulário novo, insira as seguintes credenciais:

    E-mail	user2@example.com
    Senha	abcd1234$

11. Clique em Registrar.

    É necessário uma senha mais complexa. Se você inseriu uma senha aceitável, vai se conectar e ter o acesso redirecionado para o teste do GCP.

    Depois disso, já vai ser possível responder às perguntas.

12. Na barra de navegação, clique em Logout.

    Observação: você vai sair da sessão e ter o acesso redirecionado para a página inicial do teste.

13. No console do Google Cloud, no painel de navegação do Identity Platform, clique em Usuários.

    Observação: você vai ver que usuario2@exemplo.com foi adicionado como um usuário.

Parabéns!

Neste laboratório, você aprendeu a usar o Identity Platform para ativar o registro por e-mail e senha no seu aplicativo.

Manual atualizado em 13 de novembro de 2024

Laboratório testado em 13 de novembro de 2024

Copyright 2025 Google LLC. Todos os direitos reservados. Google e o logotipo do Google são marcas registradas da Google LLC. Todos os outros nomes de produtos e empresas podem ser marcas registradas das respectivas empresas a que estão associados.