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 Start Lab

Leia estas instruções. Os laboratórios são cronometrados e não podem ser pausados. O timer é iniciado quando você clica em Começar o 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, 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 ou uma janela anônima do navegador. Isso evita conflitos entre sua conta pessoal e a conta de estudante, o que poderia causar cobranças extras na sua conta pessoal.

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

Observação: não use seu projeto ou conta do Google Cloud neste laboratório para evitar cobranças extras na sua conta.

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, você verá um pop-up para selecionar a forma de pagamento. No painel Detalhes do laboratório à esquerda, você verá o seguinte:

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

2. Clique em Abrir Console do Google. O laboratório ativa recursos e depois abre outra guia com a página Fazer login.

   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. Caso seja preciso, copie o Nome de usuário no painel Detalhes do laboratório e cole esse nome na caixa de diálogo Fazer login. Clique em Avançar.

4. Copie a Senha no painel Detalhes do laboratório e a cole na caixa de diálogo Olá. Clique em Avançar.

   Importante: você precisa usar as credenciais do painel à esquerda. Não use suas credenciais do Google Cloud Ensina. Observação: se você usar sua própria conta do Google Cloud neste laboratório, é possível que receba cobranças adicionais.

5. 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 GCP vai ser aberto nesta guia.

Observação: para ver uma lista dos produtos e serviços do Google Cloud, clique no Menu de navegação no canto superior esquerdo.

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.

Depois de se conectar, vai notar 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 YOUR_PROJECT_ID

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

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

gcloud auth list

3. Clique em Autorizar.

4. A saída será parecida com esta:

Saída:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net 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_ID>

Exemplo de saída:

[core] project = qwiklabs-gcp-44776a13dea667a6 Observação: para conferir a documentação completa da gcloud, acesse o guia com informações gerais sobre a gcloud CLI no Google Cloud.

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.

Termine a Quest

Este laboratório autoguiado faz parte da Quest Application Development - Python. Uma Quest é uma série de laboratórios relacionados que formam um programa de aprendizado. Ao concluir uma Quest, você ganha um selo como reconhecimento da sua conquista. É possível publicar os selos e incluir um link para eles no seu currículo on-line ou nas redes sociais. Inscreva-se em qualquer Quest que tenha este laboratório para receber os créditos de conclusão na mesma hora. Consulte o catálogo do Google Cloud Ensina para ver todas as Quests disponíveis.

Próximas etapas / Saiba mais

• Para conferir outros recursos do Google Cloud que podem ser usados com o Firebase, consulte Documentação do pacote de operações do Google Cloud.
• Para saber mais sobre o Deployment Manager, confira Firebase e Google Cloud.

Manual atualizado em 23 de outubro de 2023

Laboratório testado em 23 de outubro de 2023

Copyright 2024 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.