Precisa de alguma autenticação para seu aplicativo da web? Nesta postagem, mostrarei como configurar um grupo de usuários do Amazon Cognito e usar a IU hospedada do Amazon Cognito junto com o Amplify JavaScript para fazer login e logout.

Parte 1: Criação do grupo de usuários do Amazon Cognito

Escolha sua região da AWS, abra o Amazon Cognito e vá para Grupos de usuários e clique em Criar grupo de usuários.

Na etapa 1, vamos escolher E-mail como a única opção de login.

Na etapa 2, irei com No MFA para simplificar, o restante deixarei como padrão.

As configurações padrão na etapa 3 parecem boas para mim.

Na etapa 4, simplificarei e escolherei Send email with Cognito , deixando o restante como padrão.

Na etapa 5, vamos inserir um nome de grupo de usuários e marcar Use the Cognito Hosted UI.

Role para baixo, vamos usar um domínio Cognito e escolha um prefixo.

Vamos escolher um nome de cliente de aplicativo e definirei o URL de retorno de chamada permitido para o URL do meu servidor de desenvolvimento (http://localhost:5173/já que estarei usando o Vite ). Depois de entrar, o usuário será redirecionado para este URL.

Uma última coisa, expanda Configurações avançadas do cliente do aplicativo , role até a parte inferior e clique em Adicionar URL de saída . Vou definir isso para o mesmo que o URL de retorno de chamada. O restante pode ser deixado como padrão.

Revise suas seleções na etapa 6 e clique em Criar grupo de usuários.

Agora você tem um novo grupo de usuários!

Parte 2: Obter parâmetros para configurar o Amplify

Precisamos obter alguns parâmetros para as configurações do Amplify Cognito . Clique no nome do grupo de usuários recém-criado e anote o ID do grupo de usuários e o domínio Cognito (sem a parte https://).

Em seguida, clique na guia Integração do aplicativo e role para baixo até a parte inferior para encontrar seu cliente de aplicativo.

Clique no nome do aplicativo cliente para abri-lo. Anote o ID do cliente .

Legal, devemos estar prontos para configurar o Amplify agora. Apenas certifique-se de ter todos esses parâmetros (exemplo entre parênteses):

• Região Cognito (eu-norte-1)
• ID do grupo de usuários (eu-north-1_4taDddVXH)
• ID do cliente (5fetar0pehrrdb451i5ucol4p5)
• Domínio Cognito (auth-demo.auth.eu-north-1.amazoncognito.com)
• URL de retorno de chamada e saída (http://localhost:5173/)

Vamos criar um novo projeto Vite. Vou simplificar e usar o Vanilla JavaScript.

Não há graça sem o Amplify, vamos instalá-lo:

npm install aws-amplify

// vite.config.js
export default {
  define: {
    global: {},
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
};

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script defer type="module" src="auth.js"></script>
  </head>
  <body>
    <button id="auth"></button>
  </body>
</html>

// auth.js
import { Amplify, Auth } from 'aws-amplify';

Amplify.configure({
  Auth: {
    region: 'eu-north-1', // Cognito region
    userPoolId: 'eu-north-1_4taDddVXH', // User pool ID
    userPoolWebClientId: '5fetar0pehrrdb451i5ucol4p5', // Client ID (app client)
  },
  oauth: {
    domain: 'auth-demo.auth.eu-north-1.amazoncognito.com', // Cognito domain (without "https://")
    redirectSignIn: 'http://localhost:5173/', // App client callback URL
    redirectSignOut: 'http://localhost:5173/', // App client sign-out URL
    responseType: 'code', // OAuth grant type (code is recommended)
  },
});

// auth.js
const button = document.getElementById('auth');
Auth.currentAuthenticatedUser()
  .then((user) => {
    // Woop, the user is signed in!
    const email = user.signInUserSession.idToken.payload.email;
    button.textContent = `Sign out ${email}`;
    button.addEventListener('click', () => Auth.signOut());
  })
  .catch(() => {
    // The user is not signed in...
    button.textContent = 'Sign in';
    button.addEventListener('click', () => Auth.federatedSignIn());
  });

Parte 4: Vamos dar uma volta

Inicie o servidor de desenvolvimento com:

vite

Ok, não é super chamativo. Mas vamos lá, é um exemplo mínimo. Vamos clicar em Entrar.

Isso abre a IU hospedada do Cognito. Clique em Sign up para criar uma conta e siga os passos. Agora você deve estar conectado (não, esse não é meu e-mail pessoal):

Incrível, podemos entrar e sair, e posso até fechar o navegador e ainda estar conectado quando o abrir novamente! Isso é tudo, pessoal! E para completar, repositório do GitHub com o código:https://github.com/oskaerik/auth-demo