Como integrar o Amazon Cognito à sua aplicação com o AWS Amplify

Por Gilmar Rodrigues, Arquiteto de Soluções, AWS Brasil Setor Público e;

Isabela Gherson Monteiro, Arquiteta de Soluções, AWS Brasil Setor Público

Na maioria das aplicações, o primeiro passo de interação do usuário é realizar a sua autenticação (usualmente na forma de login e senha) para ganhar acesso ao sistema. Até algum tempo atrás, era comum os desenvolvedores criarem o próprio sistema de autenticação, armazenando as credenciais em um banco de dados, autenticando o cliente de forma simples, mas nem sempre segura. Com o número crescente de invasões e requisitos de inclusão de autenticação com redes sociais ou com outros provedores de identidade, as soluções antigas passaram a não conseguir mais atender às novas necessidades e foi preciso buscar soluções mais completas e robustas, como soluções prontas de Customer Identity and Access Management (CIAM), que possibilitam a adição de autenticação e autorização de usuários externos às aplicações de forma simplificada.

O Amazon Cognito é um serviço de CIAM da AWS que fornece autenticação, autorização e gestão de usuários de forma gerenciada. É possível integrá-lo às aplicações de forma a ter acesso a funcionalidades como:

• Suporte a usuários federados com redes sociais e provedores de identidade empresarial;
• Armazenamento de identidades com campos customizáveis;
• Uma interface do usuário da web integrada e personalizável para login de usuários;
• E outras funcionalidades que podem ser encontradas na página de detalhes do serviço.

Integrando o Amazon Cognito a sua Aplicação Web e Móvel com o AWS Amplify

Para adicionar um diretório de usuários gerenciado para fazer a gestão de acesso de uma aplicação, trabalhamos com o conceito de User Pools (ou grupos de usuário) dentro do Amazon Cognito, o qual usamos para armazenar as diversas informações e atributos dos usuários além de customizações nos fluxos de autenticação e páginas de login para diferentes aplicações clientes do Amazon Cognito User Pool. O provisionamento e integração deste grupo de usuários com uma aplicação pode ser feito de diferentes formas. Implementar esse processo manualmente, exige uma maior complexidade e trabalho do time de desenvolvimento para implementar os fluxos do protocolo OAuth2.0. Neste Blogpost iremos abordar como integrar uma aplicação em Node.js e React com o Amazon Cognito utilizando o AWS Amplify para simplificar esse processo de integração.

O AWS Amplify fornece um framework de desenvolvimento baseado em javascript que permite a integração de serviços AWS em aplicações web e móveis de forma simplificada a partir de seus diferentes módulos. Neste exemplo, utilizaremos apenas o modulo de autenticação, que permite integrar o Amazon Cognito em aplicações web prontas a partir de poucas linhas de código, removendo parte do esforço do time de desenvolvimento, pois não precisam implementar manualmente os fluxos do OAuth2.0.

Provisione uma aplicação Hello Word

Um pré-requisito para iniciar a integração é ter uma aplicação web ou mobile. Podemos começar com uma aplicação “Hello World” em Node.js. Neste exemplo, utilizaremos o Next.js como framework React.

Caso queira executar você mesmo, será necessário instalar o Node.js em seu computador e criar a aplicação (Aqui você encontra a documentação que detalha como criar uma aplicação com Next.js). De forma simplificada, pode começar com o comando a seguir:

npx create-next-app blog --example “https://github.com/vercel/next-learn/tree/master/basics/learn-starter”

Caso prefira utilizar a aplicação de referência deste blogpost, o código fonte completo pode ser encontrado neste link do github.

Instale o AWS Amplify no seu projeto e adicione o módulo de autenticação

Agora vamos adicionar o AWS Amplify ao nosso projeto, mas antes disso é preciso fazer a instalação da CLI do AWS Amplify no seu computador. Siga o processo de instalação descrito aqui.

Feito isso, você instalou e configurou o AWS Amplify e agora ele pode se conectar em uma conta AWS e executar comandos que provisionam os serviços necessários para suportar a aplicação. O AWS Amplify além de ser um framework integrado á aplicação, também possui um recurso de linha de comando, que vamos utilizar para criar os recursos do Amazon Cognito e suas dependências (“Service Roles”, “User Pools”, “Identity Pools”), de forma a facilitar nosso trabalho.

Execute os comandos abaixo para inicializar o AWS Amplify na sua aplicação e em seguida adicionar o suporte a autenticação:

amplify init

amplify add auth

Ao adicionar o suporte a autenticação, escolha a opção de configuração padrão com provedor social (Federação).

Escolha fazer o login por email, depois que não quer as configurações avançadas e em seguida escolha um nome de domínio. Para as URIs de redirecionamento do Sign in e do Sign out, digite http://localhost:3000/. E por último, selecione Google como provedor de login social.

Figura 1 – Configuração do módulo de autenticação

Implante os recursos do Amazon Cognito em sua conta AWS

O proximo passo é provisionar de fato os serviços, para isso execute:

amplify push

Em questão de alguns minutos os recursos do Amazon Cognito serão provisionados em sua conta e um arquivo chamado aws-exports.js será criado no diretório “src” da sua aplicação. Esse arquivo é essencial para o funcionamento, pois contém as referências para os serviços da AWS.

Vamos agora adicionar ao projeto, as bibliotecas do AWS Amplify usadas para o processo de autenticação. Execute o comando:

npm install aws-amplify @aws-amplify/auth

Nesse ponto, nossa aplicação está pronta para fazer a autenticação via Amazon Cognito usando os usuários cadastrados no User pool.

Configure federação para sua aplicação

Outra forma de prover acesso utilizando o Amazon Cognito é via Federação a partir de provedores de Identidade Externos (como Facebook, Google, Amazon, Apple, Diretórios do Microsoft AD externos, entre outros). Adicionar federação a sua aplicação te da a flexibilidade de aproveitar usuários previamente cadastrados em outros provedores de identidade, e simplificar o processo de cadastro de seu usuário.

Neste exemplo, vamos usar o Google como provedor de identidade externo, como uma segunda opção de cadastro para a nossa aplicação. Para isso, é necessário configurar a Federação na aplicação, seguindo as instruções

descritas na seção “Setup Your Auth Provider” na aba ‘Google Sign In’. Execute todos os passos do 1 até o 13. Para seguir com a configuração, é preciso incluir os endereços de autenticação do console de desenvolvimento do Google. Clique aqui para ir direto aos passos de configuração e escolha novamente a aba Google, executando os passos de 1 a 6.

Teste o funcionamento

Neste momento, a aplicação está configurada e pronta para ser testada. Se você está criando sua própria aplicação, pode usar o exemplo de código encontrado no arquivo index.jsx de como criar um botão para iniciar o processo de autenticação. Se está usando o código de referência, execute a aplicação com o comando:

npm run dev

Após a inicialização, abra http://localhost:3000 no seu navegador. Você verá uma “aplicação” onde pode escolher fazer a autenticação pelo Google ou pela interface hospedada do próprio Amazon Cognito (Hosted UI). A interface do Amazon Cognito, automaticamente inclui todas as formas de login configuradas. Já o botão do Google, leva ao acesso direto à sua interface de login, sem passar pela interface do Amazon Cognito.

Figura 2 – Tela customizada de login

Essa tela, é um exemplo simplificado de uma interface de usuário personalizada. O botão “Open Hosted UI” redireciona à interface provisionada pelo serviço do Amazon Cognito, que permite algumas customizações simples, ajustando o css para adicionar cores e o logotipo da sua marca. No entanto, se você desejar fazer maiores customizações e criar a própria interface de Login, também é possível, basta executar as chamadas de API para o serviço do Amazon Cognito em seu back-end. Essa customização também é possível se estiver utilizando a Federação de usuários, como pode observar no exemplo.

Repare que ao escolher “Open Google”, você é direcionado para se autenticar nos servidores do Google, e não é necessário digitar senha na aplicação.

Ao usar a Federação, o provedor de identidade externo é responsável pela autenticação, e são copiados para o user pool apenas os atributos adicionais do usuário (como nome e e-mail por exemplo), que você pode especificar no momento da configuração do escopo da federação ao adiciona-la na sua aplicação.

Faça login usando as suas credenciais do google para testar a funcionalidade do Amazon Cognito.

Figura 3 – Tela de login do Google

Se utilizar a própria interface do Amazon Cognito, automaticamente todas as federações configuradas serão mostradas como opções de login, além dos usuários na própria base de dados do serviço.

Figura 4 – Amazon Cognito Hosted UI

Após o login, o processo de autenticação é concluído e o token de acesso é recebido.

Adicionando e atualizando atributos customizados

O Amazon Cognito suporta também adicionar atributos customizados para os usuários federados, ou seja, atributos extras que não fazem parte do escopo da federação. Por exemplo, você pode precisar da informação do CPF de um usuário, porém o Google não te fornece este dado por padrão. Para tornar isso possível, basta adicionar o atributo em seu user pool, e solicitar o input do usuário após o cadastro.

Neste exemplo, você também encontra código para alterar atributos customizados da base do Amazon Cognito. Se você tiver essa necessidade de armazenar outros atributos do usuário, além dos existentes por padrão.

Criando o campo customizado

Para testar essa funcionalidade, crie o campo CPF como um atributo customizado em seu user pool. Essa atributo fica disponível para todos os usuários do pool, inclusive os federados.

Acesse o console do Amazon Cognito e selecione o seu user pool. Selecione a aba de experiência de cadastro (Sign-up experience). Na sessão de atributos personalizados, clique em Adicionar e preencha os campos conforme a figura a seguir:

Figura 5 – Adicionando atributo personalizado

Clique em salvar alterações, e você verá o novo atributo disponível na seção atributos customizados (custom attributes):

Figura 6 – Visualizando novo atributo

Agora já podemos testar a funcionalidade, atualizando o atributo CPF para o usuário previamente configurado usando a federação (Figura 3). Ao fazer o login, você foi redirecionado de volta a sua aplicação:

Figura 7 – Atualização do CPF

Preencha o CPF, e clique em “Update CPF”. A aplicação irá utilizar a API Update User Attributes para adicionar o seu CPF como atributo do usuário cadastrado no user pool. Para validar a atualização, entre novamente no console do Amazon Cognito, em seu User Pool, na aba de usuários, e clique no usuário adicionado. Você já deve ver o atributo “custom:cpf” com a informação atualizada:

Figura 8 – Atualização do CPF

Limpando os recursos

Parabéns! Você concluiu todas as etapas necessárias para adicionar o Amazon Cognito como provedor de autenticação para a sua aplicação.

Caso tenha seguido o blogpost para fins de testes, não se esqueça de remover todos recursos criados executando:

amplify delete

Conclusão

O Amazon Cognito é um serviço da AWS que fornece autenticação, autorização e gestão de usuários de forma gerenciada, para otimizar o controle de acesso em sua aplicação. Podemos integrá-lo as aplicações de diferentes formas, porém o framework de desenvolvimento AWS Amplify, nos proporciona uma forma simplificada de fazer essa integração sem precisar lidar com os fluxos do protocolo OAuth 2.0.

Neste Blogpost demonstramos como você pode integrar o Amazon Cognito como mecanismo de autenticação para a sua aplicação utilizando o AWS Amplify, adicionar federação, customizar a interface de login e adicionar atributos personalizados para os usuários.

O Amazon Cognito tem diversas outras funcionalidades que ajudam a melhorar ainda mais sua postura de segurança, incluindo sua recente integração com o AWS WAF (Web Application Firewall) e funcionalidades de segurança avançada como autenticação adaptativa e verificação de credenciais vazadas. Para mais informações, acesse a documentação.

Para conhecer mais sobre o AWS Amplify e seus componentes, acesse a documentação

Sobre os autores

Gilmar Rodrigues é Arquiteto de Soluções da AWS no time de setor público com foco em empresas de Energia e Utilities. Trabalhou anteriormente com arquitetura e integração de aplicações em empresas do setor de telecomunicações e varejo.

Isabela Gherson Monteiro é Arquiteta de Soluções na AWS com foco em Edtechs e ajuda clientes do setor publico a construirem suas soluções seguindo boas práticas na nuvem AWS. Apresenta entusiasmo pelas áreas de Analytics e Inteligência Artificial.