Saltearse al contenido
@aws/nx-plugin
Blog

Autenticación del Sitio Web de CloudScape

El generador de Autenticación para CloudScape Website agrega autenticación a tu sitio web CloudScape utilizando Amazon Cognito.

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

Uso

Agregar autenticación a tu sitio web CloudScape

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

  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 aplicación 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 construct UserIdentity a tu stack, declarándolo antes del construct 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 construct UserIdentity agrega automáticamente la Configuración de Runtime necesaria para que tu sitio web pueda acceder al User Pool de Cognito correcto.

    Otorgar acceso a usuarios autenticados

    Para permitir que usuarios autenticados realicen acciones específicas, como otorgar permisos para invocar una API, puedes agregar políticas 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');
      }
    }