Authentification du site Web CloudScape

Le générateur d’authentification pour site web CloudScape ajoute une authentification à votre site web CloudScape en utilisant Amazon Cognito.

Ce générateur configure l’infrastructure CDK pour créer un User Pool Cognito et un Identity Pool associé, ainsi qu’une interface hébergée pour gérer les flux de connexion utilisateur et son intégration avec votre site web CloudScape.

Utilisation

Ajouter l’authentification à votre site web CloudScape

Vous pouvez ajouter l’authentification à votre site web CloudScape de deux façons :

VSCode

1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
2. Ouvrez la console Nx dans VSCode
3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
4. Recherchez @aws/nx-plugin - ts#cloudscape-website#auth
5. Remplissez les paramètres requis
6. Cliquez sur 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

Vous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

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

Options

Paramètre	Type	Par défaut	Description
project Requis	string	-	The root directory of the Cloudscape application.
cognitoDomain Requis	string	-	The cognito domain prefix to use
allowSignup	boolean		Whether to allow self-signup

Sortie du générateur

Vous trouverez les modifications suivantes dans votre application React :

• Répertoiresrc

  • Répertoirecomponents

    • RépertoireCognitoAuth

      • index.tsx Composant principal d’authentification
  • main.tsx Mis à jour pour intégrer le composant CognitoAuth

Vous trouverez également le code d’infrastructure suivant généré dans packages/common/constructs :

• Répertoiresrc

  • Répertoirecore

    • user-identity.ts Construct qui définit le user pool et l’identity pool

Utilisation de l’infrastructure

Vous devrez ajouter le construct UserIdentity à votre stack, en le déclarant avant le construct du site 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');
  }
}

Le construct UserIdentity ajoute automatiquement la Configuration Runtime nécessaire pour que votre site web puisse pointer vers le bon Cognito User Pool pour l’authentification.

Accorder des accès aux utilisateurs authentifiés

Pour accorder aux utilisateurs authentifiés l’accès à certaines actions, comme l’autorisation d’appeler une API, vous pouvez ajouter des instructions de stratégie IAM au rôle authentifié du pool d’identités :

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