Autenticación del Sitio Web de CloudScape

El generador de Autenticación para Sitio Web CloudScape agrega autenticación a tu sitio web de CloudScape usando Amazon Cognito.

Este generador configura la infraestructura de CDK para crear un User Pool de Cognito y un Identity Pool asociado, así como una interfaz hospedada para manejar flujos de inicio de sesión y su integración con tu sitio web de CloudScape.

Uso

Agregar autenticación a tu sitio web de CloudScape

Puedes agregar autenticación a tu sitio web de CloudScape de dos maneras:

VSCode

1. Instale el Nx Console VSCode Plugin si aún no lo ha hecho
2. Abra la consola Nx en VSCode
3. Haga clic en Generate (UI) en la sección "Common Nx Commands"
4. Busque @aws/nx-plugin - ts#cloudscape-website#auth
5. Complete los parámetros requeridos
6. Haga clic en 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

También puede realizar una ejecución en seco para ver qué archivos se cambiarían

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

Opciones

Parámetro	Tipo	Predeterminado	Descripción
project Requerido	string	-	The root directory of the Cloudscape application.
cognitoDomain Requerido	string	-	The cognito domain prefix to use
allowSignup	boolean		Whether to allow self-signup

Salida del generador

Encontrarás los siguientes cambios en tu sitio web de React:

• Directorysrc

  • Directorycomponents

    • DirectoryCognitoAuth

      • index.tsx Componente principal de autenticación
  • main.tsx Actualizado para integrar el componente CognitoAuth

También se generará el siguiente código de infraestructura en packages/common/constructs:

• Directorysrc

  • Directorycore

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

Uso de infraestructura

Debes agregar el constructo UserIdentity a tu stack, declarándolo antes del constructo del sitio web:

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');
  }
}

El constructo UserIdentity agrega automáticamente la Configuración en tiempo de ejecución necesaria para que tu sitio web pueda apuntar al User Pool de Cognito correcto.

Otorgar acceso a usuarios autenticados

Para permitir que usuarios autenticados realicen ciertas acciones, como otorgar permisos para invocar una API, puedes agregar declaraciones de políticas de IAM al rol autenticado del 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');
  }
}