Autenticação de usuários de aplicações existentes do React ao usar o Amazon Cognito e o AWS Amplify UI - Recomendações da AWS
ResumoPré-requisitos e limitaçõesArquiteturaFerramentasPráticas recomendadasÉpicosSolução de problemasRecursos relacionadosMais informações

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Autenticação de usuários de aplicações existentes do React ao usar o Amazon Cognito e o AWS Amplify UI

Daniel Kozhemyako, Amazon Web Services

Resumo

Este padrão demonstra como adicionar funcionalidades de autenticação a uma aplicação frontend existente do React ao usar a biblioteca do AWS Amplify UI e um grupo de usuários do Amazon Cognito.

O padrão usa o Amazon Cognito para fornecer autenticação, autorização e gerenciamento de usuários para a aplicação. Ele também usa um componente do Amplify UI, uma biblioteca de código aberto que estende os recursos do desenvolvimento da interface do AWS Amplify usuário (UI). O componente Authenticator UI gerencia as sessões de login e executa o fluxo conectado à nuvem, que autentica usuários por meio do Amazon Cognito.

Depois de implementar esse padrão, os usuários podem entrar usando qualquer uma das seguintes credenciais:

  • Nome de usuário e senha

  • Provedores de identidades sociais, como o Apple, Facebook, o Google e o Amazon

  • Provedores de identidade corporativa compatíveis com SAML 2.0 ou OpenID Connect (OIDC)

nota

Para criar um componente personalizado da interface do usuário de autenticação, é possível executá-lo no Authenticator UI com o modo sem periféricos.

Pré-requisitos e limitações

Pré-requisitos

  • Um ativo Conta da AWS

  • Uma aplicação da web do React, versão 18.2.0 ou versões posteriores

  • Node.js e npm, versões 6.14.4 ou versões posteriores, instalados

Limitações

  • Esse padrão se aplica somente aos aplicativos web React.

  • Esse padrão usa um componente Amplify UI pré-construído. A solução não abrange as etapas necessárias para implementar um componente de UI personalizado.

Versões do produto

  • Amplify UI 6.1.3 ou versões posteriores (Gen 1)

  • Amplify 6.0.16 ou versões posteriores (Gen 1)

Arquitetura

Arquitetura de destino

O diagrama apresentado a seguir ilustra uma arquitetura que usa o Amazon Cognito para autenticar usuários em uma aplicação da web do React.

O Amazon Cognito autentica usuários em uma aplicação da web do React.

Ferramentas

Serviços da AWS

  • O Amazon Cognito fornece autenticação, autorização e gerenciamento de usuários para suas aplicações Web e móveis.

Outras ferramentas

  • O Amplify UI é uma biblioteca de interface do usuário de código aberto que oferece componentes personalizáveis que podem ser conectados à nuvem.

  • O Node.js é um ambiente de tempo de JavaScript execução orientado a eventos projetado para criar aplicativos de rede escaláveis.

  • O npm é um registro de software executado em um ambiente Node.js e usado para compartilhar ou emprestar pacotes e gerenciar a implantação de pacotes privados.

Práticas recomendadas

Se você estiver criando uma nova aplicação, recomendamos o uso do Amplify Gen 2.

Épicos

TarefaDescriptionHabilidades necessárias

Criar um grupo de usuários.

Criar um grupo de usuários do Amazon Cognito. Configure as opções de login e os parâmetros de segurança do grupo de usuários de acordo com os requisitos do seu caso de uso.

Desenvolvedor de aplicativos

Adicionar um cliente de aplicativo.

Configure um cliente do aplicativo do grupo de usuários. Este cliente é necessário para que sua aplicação interaja com o grupo de usuários do Amazon Cognito.

Desenvolvedor de aplicativos
TarefaDescriptionHabilidades necessárias

Instale as dependências.

Para instalar os pacotes aws-amplify e @aws-amplify/ui-react, execute o seguinte comando no diretório raiz do seu aplicativo:

npm i @aws-amplify/ui-react aws-amplify
Desenvolvedor de aplicativos

Configure o grupo de usuários.

Com base no exemplo a seguir, crie um arquivo aws-exports.js e salve-o na pasta src. O arquivo deve incluir as seguintes informações:

  • Região da AWS em que seu grupo de usuários do Amazon Cognito está

  • O ID do grupo de usuários do Amazon Cognito

  • ID do cliente do aplicativo

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;
Desenvolvedor de aplicativos

Importe e configure o serviço Amplify.

  1. No arquivo de ponto de entrada da aplicação (por exemplo, App.js), importe e carregue o arquivo aws-exports.js inserindo as seguintes linhas de código:

    import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

  2. Com base no exemplo a seguir, configure o cliente do Amplify usando o arquivo aws-exports.js:

    // Configure Amplify in index file or root file
Amplify.configure({ ...awsExports });

    Para obter mais informações, consulte Configure Amplify categories na documentação do Amplify.

Desenvolvedor de aplicativos

Adicione o componente Authenticator UI.

Para exibir o componente Authenticator UI, adicione as seguintes linhas de código ao arquivo do ponto de entrada do aplicativo (App.js):

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
nota

O trecho de código de exemplo importa o componente Authenticator UI e o arquivo “styles.css” do Amplify UI, que é necessário ao usar os temas desenvolvidos previamente do componente.

O componente Authenticator UI fornece dois valores de retorno:

  • Detalhes do usuário

  • Uma função que pode ser invocada para desconectar o usuário

Veja o componente do exemplo a seguir:

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}
nota

Para obter um arquivo App.js de exemplo, consulte a seção Informações adicionais deste padrão.

Desenvolvedor de aplicativos

(Opcional) Recupere as informações da sessão.

Depois que um usuário é autenticado, você pode recuperar dados do cliente Amplify sobre sua sessão. Por exemplo, você pode recuperar o token web JSON (JWT) da sessão de um usuário para autenticar as solicitações da sessão em uma API de backend.

Veja o exemplo a seguir de um cabeçalho de solicitação que inclui um JWT:

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();
Desenvolvedor de aplicativos

Solução de problemas

ProblemaSolução

Novos usuários não podem se cadastrar no aplicativo.

Conforme indicado a seguir, certifique-se de que o grupo de usuários do Amazon Cognito esteja configurado para permitir que os usuários se registrem no próprio grupo de usuários:

  • Faça login no e Console de gerenciamento da AWS, em seguida, abra o console do Amazon Cognito.

  • No painel de navegação à esquerda, escolha grupo de usuários.

  • Escolha seu grupo de usuários na lista.

  • Em General Settings (Configurações gerais), escolha Políticas.

  • Escolha Permitir que os próprios usuários se cadastrem.

O componente Auth parou de funcionar após a atualização da versão 5 para a 6.

Na versão 6 do Amplify, a categoria Auth passou a utilizar uma abordagem funcional e parâmetros nomeados. Agora você deve importar o funcional APIs diretamente do aws-amplify/auth caminho. Para obter mais informações, consulte Migrate from v5 to v6 na documentação do Amplify.

Recursos relacionados

Mais informações

O arquivo App.js deve conter o seguinte código:

import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
                <p>Your token is: {token}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}

export default App;