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 a documentação com informações gerais sobre a 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). Consulte o site do Identity Platform para saber mais.

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.

Objetivos

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 Java para integrar a autenticação do Identity Platform a um aplicativo da Web no lado do cliente.

Configuração e requisitos

Para cada laboratório, você recebe gratuitamente um novo projeto do Google Cloud e um conjunto de recursos por um determinado período.

1. Faça login no Qwiklabs usando uma janela anônima do navegador.

2. Controle a duração do laboratório (por exemplo, ) para concluí-lo no tempo determinado.

3. Quando puder começar, clique em .

4. Anote suas credenciais do laboratório. É com elas que você fará login no Console do Google Cloud.

5. Clique em Abrir Console do Google.

6. Clique em Usar outra conta e copie e cole as credenciais deste laboratório nos locais indicados.

7. Aceite os termos e pule a página de recursos de recuperação.

Ative o Google Cloud Shell

O Google Cloud Shell é uma máquina virtual com 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. No console do Cloud, clique no botão "Abrir o Cloud Shell" na barra de ferramentas superior direita.

   

2. Clique em Continuar.

O provisionamento e a conexão do ambiente podem demorar um pouco. Quando você estiver conectado, já estará autenticado, e o projeto estará definido com seu PROJECT_ID. Exemplo:

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

• Para listar o nome da conta ativa, use este comando:

gcloud auth list

Saída:

Credentialed accounts: - @.com (active)

Exemplo de saída:

Credentialed accounts: - google1623327_student@qwiklabs.net

• Para listar o ID do projeto, use este comando:

gcloud config list project

Saída:

[core] project =

Exemplo de saída:

[core] project = qwiklabs-gcp-44776a13dea667a6 Observação: a documentação completa da gcloud está disponível no guia com informações gerais sobre a gcloud CLI .

Tarefa 1: Preparar o aplicativo do estudo de caso

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

Clone o código-fonte no Cloud Shell

1. Clone o repositório deste laboratório:

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

2. Crie um link flexível para seu diretório de trabalho:

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

Configure e execute o aplicativo de estudo de caso

1. Mude para o diretório que contém os arquivos de exemplo deste laboratório:

   cd ~/firebase/start

2. Configure as dependências do 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;
   • executa o mvn clean install;
   • cria entidades no Cloud Datastore;
   • imprime o ID do projeto do Google Cloud Platform.

   Quando as dependências do aplicativo são configuradas, esta saída aparece para você:

   [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 11.775 s [INFO] Finished at: 2021-12-06T15:39:11Z [INFO] ------------------------------------------------------------------------

3. Execute o aplicativo:

   mvn spring-boot:run

   Quando o aplicativo é iniciado, aparece a última linha da saída, que é parecida com o exemplo a seguir:

   15:40:08.312 [restartedMain] INFO c.g.training.appdev.QuizApplication - Started QuizApplication in 7.767 seconds (JVM running for 9.86)

Inicie o aplicativo de teste

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

Deixe essa janela aberta por enquanto, porque mais tarde você vai precisar do domínio de visualização da Web do Cloud Shell, que está no formato 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev.

Tarefa 2: analise 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.

Neste laboratório, vamos usar o editor do Cloud Shell para revisar o código do aplicativo de teste.

Inicie o editor de texto do Cloud Shell

1. No Cloud Shell, clique no ícone Abrir editor na barra de cima. Se necessário, clique em Abrir em uma nova janela.

   O editor de código é iniciado em uma guia separada do navegador, junto com o Cloud Shell.

2. Acesse a pasta /firebase/start usando o painel do navegador de arquivos no lado esquerdo do editor.

3. Na pasta firebase, repare na pasta end. A pasta end contém os mesmos arquivos que a pasta start, mas cada arquivo da pasta end contém o código completo necessário para executar este laboratório.

Analise o aplicativo cliente

1. Selecione o arquivo index.html na pasta .../src/main/resources/static/client. Não confunda com o arquivo index.html que está na pasta static.

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

2. Selecione o arquivo qiq-login-template.html na pasta .../src/main/resources/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.

3. Selecione 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: Configurar a autenticação do Identity Platform

Nesta tarefa, você vai confirmar que o faturamento está ativado no seu projeto do Cloud. Em seguida, 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.

Confirmar a ativação do faturamento

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

2. Verifique se a conta de faturamento está vinculada ao projeto. Você deve ver uma mensagem informando que a conta de faturamento "Qwiklabs Production gcpd xx" está vinculada ao projeto.

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 você ver a mensagem de pop-up "Sair do site", 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 formato 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev.

8. Clique em Salvar.

9. Na nova janela do provedor de identidade, clique em Salvar.

   Talvez seja necessário rolar a tela para baixo para acessar 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 Adicionar.

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

Nesta tarefa, você vai 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 .../src/main/resources/static/client/.

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

7. Salve o arquivo index.html.

8. No Cloud Shell, pressione Ctrl+C para interromper o aplicativo e insira o comando abaixo de novo para reiniciá-lo.

mvn spring-boot:run

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 Take test.

3. Clique em GCP, Pessoas ou Lugares.

   Observação: para fazer um teste, é necessário fazer login primeiro.

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 user1@example.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 user2@example.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.

Finalize o laboratório

Clique em Terminar o laboratório após a conclusão. O Google Cloud Ensina remove os recursos usados e limpa a conta por você.

Você vai poder avaliar sua experiência no laboratório. Basta selecionar o número de estrelas, digitar um comentário e clicar em Enviar.

O número de estrelas indica o seguinte:

• 1 estrela = muito insatisfeito
• 2 estrelas = insatisfeito
• 3 estrelas = neutro
• 4 estrelas = satisfeito
• 5 estrelas = muito satisfeito

Feche a caixa de diálogo se não quiser enviar feedback.

Para enviar seu feedback, fazer sugestões ou correções, use a guia Suporte.

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