Autenticação de Website CloudScape

O gerador de Autenticação para Website CloudScape adiciona autenticação ao seu site CloudScape utilizando Amazon Cognito.

Este gerador configura a infraestrutura CDK para criar um User Pool do Cognito e um Identity Pool associado, além de uma interface hospedada para gerenciar fluxos de login de usuários e sua integração com seu site CloudScape.

Utilização

Adicionar Autenticação ao seu Site CloudScape

Você pode adicionar autenticação ao seu site CloudScape de duas formas:

VSCode

1. Instale o Nx Console VSCode Plugin se ainda não o fez
2. Abra o console Nx no VSCode
3. Clique em Generate (UI) na seção "Common Nx Commands"
4. Procure por @aws/nx-plugin - ts#cloudscape-website#auth
5. Preencha os parâmetros obrigatórios
6. Clique em Generate

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth

yarn

yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth

npm

npx nx g @aws/nx-plugin:ts#cloudscape-website#auth

bun

bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth

Você também pode realizar uma execução simulada para ver quais arquivos seriam alterados

pnpm

pnpm nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

npm

npx nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

bun

bunx nx g @aws/nx-plugin:ts#cloudscape-website#auth --dry-run

Opções

Parâmetro	Tipo	Padrão	Descrição
project Obrigatório	string	-	The root directory of the Cloudscape application.
cognitoDomain Obrigatório	string	-	The cognito domain prefix to use
allowSignup	boolean		Whether to allow self-signup

Saída do Gerador

Você encontrará as seguintes alterações no seu site React:

• Directorysrc

  • Directorycomponents

    • DirectoryCognitoAuth

      • index.tsx Componente principal de autenticação
  • main.tsx Atualizado para instrumentar o componente CognitoAuth

Você também encontrará o seguinte código de infraestrutura gerado em packages/common/constructs:

• Directorysrc

  • Directorycore

    • user-identity.ts Construct que define o user pool e identity pool

Uso da Infraestrutura

Você precisará adicionar o construct UserIdentity à sua stack, declarando-o antes do construct do website:

packages/infra/src/stacks/application-stack.ts

import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite, UserIdentity } from ':my-scope/common-constructs';

export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    new UserIdentity(this, 'Identity');

    new MyWebsite(this, 'MyWebsite');
  }
}

O construct UserIdentity adiciona automaticamente a Configuração de Runtime necessária para garantir que seu site possa apontar para o User Pool do Cognito correto para autenticação.

Concedendo Acesso a Usuários Autenticados

Para conceder acesso a usuários autenticados para realizar determinadas ações, como conceder permissões para invocar uma API, você pode adicionar políticas IAM à função autenticada do identity pool:

packages/infra/src/stacks/application-stack.ts

import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite, UserIdentity, MyApi } from ':my-scope/common-constructs';

export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    const identity = new UserIdentity(this, 'Identity');
    const api = new MyApi(this, 'MyApi');

    api.grantInvokeAccess(identity.identityPool.authenticatedRole);

    new MyWebsite(this, 'MyWebsite');
  }
}