Autenticazione del Sito Web CloudScape

Il generatore CloudScape Website Authentication aggiunge l’autenticazione al tuo sito web CloudScape utilizzando Amazon Cognito.

Questo generatore configura l’infrastruttura CDK per creare un Cognito User Pool e un Identity Pool associato, oltre a un’interfaccia utente ospitata per gestire i flussi di login degli utenti e la sua integrazione con il tuo sito web CloudScape.

Utilizzo

Aggiungi autenticazione al tuo sito web CloudScape

Puoi aggiungere l’autenticazione al tuo sito web CloudScape in due modi:

VSCode

1. Installa il Nx Console VSCode Plugin se non l'hai già fatto
2. Apri la console Nx in VSCode
3. Clicca su Generate (UI) nella sezione "Common Nx Commands"
4. Cerca @aws/nx-plugin - ts#cloudscape-website#auth
5. Compila i parametri richiesti
6. Clicca su 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

Puoi anche eseguire una prova per vedere quali file verrebbero modificati

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

Opzioni

Parametro	Tipo	Predefinito	Descrizione
project Obbligatorio	string	-	The root directory of the Cloudscape application.
cognitoDomain Obbligatorio	string	-	The cognito domain prefix to use
allowSignup	boolean		Whether to allow self-signup

Output del generatore

Troverai le seguenti modifiche nel tuo sito web React:

• Directorysrc

  • Directorycomponents

    • DirectoryCognitoAuth

      • index.tsx Componente principale per l’autenticazione
  • main.tsx Aggiornato per integrare il componente CognitoAuth

Troverai anche il seguente codice infrastrutturale generato in packages/common/constructs:

• Directorysrc

  • Directorycore

    • user-identity.ts Construct che definisce il user pool e l’identity pool

Utilizzo dell’infrastruttura

Dovrai aggiungere il construct UserIdentity al tuo stack, dichiarandolo prima del construct del sito 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');
  }
}

Il construct UserIdentity aggiunge automaticamente la Configurazione Runtime necessaria per garantire che il tuo sito web possa puntare al corretto Cognito User Pool per l’autenticazione.

Concessione dell’accesso agli utenti autenticati

Per concedere agli utenti autenticati l’accesso a determinate azioni, come concedere permessi per richiamare un’API, puoi aggiungere policy IAM al ruolo autenticato dell’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');
  }
}