Saltearse al contenido
@aws/nx-plugin
Blog

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:

  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
    • Haga clic en Generate

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