AWS: S3 Static Page + Cloudfront + Cognito

Quando você precisa adicionar uma camada de autenticação, registro de novos usuários, recuperação de conta e MFA no seu site, o Cognito pode ser uma boa opção.

Nesse artigo iremos adicionar autenticação em um site estático hospedado no S3 acessado via Cloudfront.

1. Cognito

Inicialmente vamos precisar criar um User pool no Cognito, que será o nosso diretório de usuários.

Acesse o serviço Cognito e vá em User pools > Create user pool. A opção Cognito user pool já vem selecionada e vamos marcar a opção Email como opção de Sign-in. Dessa forma, os usuários vão se autenticar através de e-mail no nosso site.

Clique em Next.

Você poderá definir uma política de senha para seus usuários. Vamos manter o padrão Cognito.

Na opção de MFA, você pode permitir o uso de MFA para aumentar a segurança do seu site. No caso desse projeto, vamos deixar sem MFA.

Vamos deixar habilitada a opção de Self-service account recovery para permitir que os usuários possam recuperar a conta caso esquecerem a senha. No método de recuperação vamos deixar Email only.

Clique em Next.

Vamos deixar a opção Enable self-registration habilitada, permitindo que usuários possam criar uma conta para acessar o nosso site.

Nas opções de verificação e confirmação, vamos manter o padrão.

Em Required attributes temos a possibilidade de definir diversos campos obrigatórios para um novo usuário, como nome, endereço, entre outros. Para esse projeto, vamos manter apenas o e-mail.

Clique em Next.

Na opção de e-mail, vamos utilizar a opção Send email with Cognito, que é uma opção voltada a testes, com poucos envios de e-mail por dia. Caso for um projeto voltado a ambiente produtivo, o recomendado é a opção via SES.

Clique em Next.

Defina um nome para seu pool de usuários e deixe desmarcado a opção Use the Cognito Hosted UI, pois vamos utilizar uma página html personalizada para isso.

Selecione a opção de Public client e dê um nome para seu App client. Deixe a opção Don´t generate a client secret desmarcada.

Mantenha os demais valores padrões e clique em Next.

Revise os dados e clique em Create user pool.

Pronto! Agora temos nosso diretório de usuários pronto para ser integrado ao nosso site.

2. S3 Static Page + Cloudfront

O próximo passo é publicarmos nosso site estático no S3 e expor o acesso via CloudFront. Para ver um artigo sobre esse processo, clique nesse link. Assim que seu site estiver acessível, você verá a página abaixo:

O projeto completo você encontra nesse link.

3. Integrando o site ao Cognito

Agora precisamos apenas fazer alguns ajustes em um arquivo js para integrar nosso site ao User Pool que criamos no Cognito.

No arquivo js/config.js você deverá informar o userPoolId, userPoolClientId e region.

O userPoolId você pode obter acessando o seu UserPool.

O userPoolClientId você pode obter acessando o seu UserPool, aba App integration, campo Client ID.

A região voce deverá informar com a respectiva região que foi criada seu User Pool

window._config = {
    cognito: {
        userPoolId: 'us-east-1_021as5dd', // e.g. us-east-1_uXboG5pAb
        userPoolClientId: '21sda32s1dasd512230as1d2', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'us-east-1' // e.g. us-east-1
    }
};

Com isso, sua página hospedada no S3 já estará com controle de autenticação e registro de usuários via AWS Cognito.

Sempre que você fizer o registro de um novo usuário, irá receber um e-mail com um código de confirmação que deverá ser utilizado para confirmar o cadastro da conta.