Autentique os usuários existentes do aplicativo React usando o Amazon Cognito e AWS o 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á.

Autentique os usuários existentes do aplicativo React usando o Amazon Cognito e AWS o Amplify UI

Criado por Daniel Kozhemyako () AWS

Ambiente: produção

Tecnologias: aplicativos web e móveis; segurança, identidade, conformidade; produtividade empresarial; análise

AWSserviços: Amazon Cognito; AWS Amplify; Amazon Connect; console de gerenciamento AWS

Resumo

Esse padrão mostra como adicionar recursos de autenticação a um aplicativo React de front-end existente usando uma biblioteca de AWS Amplify interface de usuário 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 o aplicativo. 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 de trabalho conectado à nuvem que autentica os 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

Observação: para criar um componente de UI de autenticação personalizado, você pode executar o componente Authenticator UI no modo headless.

Pré-requisitos e limitações

Pré-requisitos

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 posterior (Gen 1)

  • Amplify 6.0.16 ou posterior (Gen 1)

Arquitetura

Arquitetura de destino

O diagrama a seguir mostra uma arquitetura que usa o Amazon Cognito para autenticar usuários para um aplicativo web React.

O Amazon Cognito autentica usuários para um aplicativo web 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 de usuário de código aberto que fornece componentes personalizáveis que você pode conectar à 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 um novo aplicativo, recomendamos que você use o Amplify Gen 2.

Épicos

TarefaDescriçãoHabilidades 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 requisitos de segurança do grupo de usuários de acordo com seu caso de uso.

Desenvolvedor de aplicativos

Adicionar um cliente de aplicativo.

Configure um cliente do aplicativo do grupo de usuários. Esse cliente é necessário para que seu aplicativo interaja com o grupo de usuários do Amazon Cognito.

Desenvolvedor de aplicativos
TarefaDescriçãoHabilidades 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 aws-exports.js arquivo e salve na src pasta. O arquivo deve incluir as seguintes informações:

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

  • 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 do aplicativo (por exemplo,App.js), importe e carregue o aws-exports.js arquivo 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 Amplify usando o aws-exports.js arquivo:

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

    Para obter mais informações, consulte Configurar categorias do Amplify 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';

Observação: 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 pré-criados do componente.

O componente de Authenticator interface do usuário 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>
    );
}

Observação: para um exemplo do arquivo App.js, 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 JSON da web (JWT) da sessão de um usuário para poder autenticar as solicitações da sessão dele em um back-end. API

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

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.

Da seguinte forma, certifique-se de que seu grupo de usuários do Amazon Cognito esteja configurado para permitir que os usuários se inscrevam para fazer parte do grupo de usuários:

  • Faça login no e AWS Management Console, 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 v5 para a v6.

A Auth categoria mudou para uma abordagem funcional e nomeou parâmetros no Amplify v6. Agora você deve importar o funcional APIs diretamente do aws-amplify/auth caminho. Para obter mais informações, consulte Migrar da v5 para a v6 na documentação do Amplify.

Recursos relacionados

Mais informações

O App.js arquivo 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;