Autenticazione del Sito Web React

Il generatore di autenticazione per React Website aggiunge l’autenticazione al tuo sito React utilizzando Amazon Cognito.

Questo generatore configura l’infrastruttura CDK o Terraform 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 React.

Utilizzo

Aggiungere l’autenticazione al tuo sito React

Puoi aggiungere l’autenticazione al tuo sito React 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#website#auth
5. Compila i parametri richiesti
6. Clicca su Generate

CLI

pnpm

pnpm nx g @aws/nx-plugin:ts#website#auth

yarn

yarn nx g @aws/nx-plugin:ts#website#auth

npm

npx nx g @aws/nx-plugin:ts#website#auth

bun

bunx nx g @aws/nx-plugin:ts#website#auth

Puoi anche eseguire una prova per vedere quali file verrebbero modificati

pnpm

pnpm nx g @aws/nx-plugin:ts#website#auth --dry-run

yarn

yarn nx g @aws/nx-plugin:ts#website#auth --dry-run

npm

npx nx g @aws/nx-plugin:ts#website#auth --dry-run

bun

bunx nx g @aws/nx-plugin:ts#website#auth --dry-run

Opzioni

Parametro	Tipo	Predefinito	Descrizione
project Obbligatorio	string	-	La directory radice del sito web.
cognitoDomain	string	-	Il prefisso del dominio Cognito da utilizzare. Se omesso, viene derivato un valore dallo scope npm e dal nome del progetto del sito web.
allowSignup	boolean		Se consentire l'auto-registrazione
iac	inherit | cdk | terraform	inherit	Il provider IaC preferito. Per impostazione predefinita viene ereditato dalla selezione iniziale.
preferInstallDependencies	boolean	true	Se preferire l'installazione delle dipendenze dopo l'esecuzione del generatore. Impostare su false per rimandare l'installazione quando si eseguono più generatori in batch (l'installazione viene comunque eseguita se necessaria affinché i generatori successivi possano calcolare il grafo dei progetti Nx); installare una volta alla fine.

Output del Generatore

Troverai le seguenti modifiche nel tuo sito React:

• Directorysrc

  • Directorycomponents

    • DirectoryCognitoAuth

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

Infrastruttura

Poiché questo generatore fornisce infrastruttura come codice basata sul tuo iacProvider selezionato, creerà un progetto in packages/common che include i relativi costrutti CDK o moduli Terraform.

Il progetto comune di infrastruttura come codice è strutturato come segue:

CDK

• Directorypackages/common/constructs

  • Directorysrc

    • Directoryapp/ Construct per l’infrastruttura specifica di un progetto/generatore

      • …
    • Directorycore/ Construct generici riutilizzati dai construct in app

      • …
    • index.ts Punto di ingresso che esporta i construct da app
  • project.json Target di build e configurazione del progetto

Progetto generato

Questo progetto è generato utilizzando il ts#project generator e quindi configura gli stessi target di build.

Terraform

• Directorypackages/common/terraform

  • Directorysrc

    • Directoryapp/ Moduli Terraform per l’infrastruttura specifica di un progetto/generatore

      • …
    • Directorycore/ Moduli generici riutilizzati dai moduli in app

      • …
  • project.json Target di build e configurazione del progetto

Progetto generato

Questo progetto è generato utilizzando il terraform#project generator e quindi configura gli stessi target di build.

Troverai anche il seguente codice infrastrutturale generato in base al iacProvider selezionato:

CDK

• Directorypackages/common/constructs/src

  • Directorycore

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

Terraform

• Directorypackages/common/terraform/src

  • Directorycore

    • Directoryuser-identity

      • main.tf Modulo wrapper per la configurazione dell’identità
      • Directoryidentity

        • identity.tf Infrastruttura principale dell’identità inclusi Cognito User Pool e Identity Pool
      • Directoryadd-callback-url

        • add-callback-url.tf Modulo per aggiungere URL di callback ai client esistenti del user pool

Architettura

Questo generatore aggiunge un user pool Amazon Cognito (per l’accesso) e un identity pool (per federare gli utenti autenticati a credenziali IAM con ambito limitato) all’architettura esistente del sito web statico:

Protezione dalle minacce

Il User Pool viene creato sul piano funzionalità Plus di Cognito con la protezione dalle minacce impostata in modalità AUDIT per l’autenticazione standard. In modalità audit, Cognito assegna un livello di rischio a ogni accesso e registra la valutazione in CloudWatch senza bloccare gli utenti.

Una volta osservate le valutazioni del rischio per i tuoi utenti, puoi passare all’applicazione completa per rispondere automaticamente alle attività rischiose (ad esempio richiedendo MFA o bloccando l’accesso):

CDK

Imposta standardThreatProtectionMode su StandardThreatProtectionMode.FULL_FUNCTION in packages/common/constructs/src/core/user-identity.ts.

Terraform

Imposta advanced_security_mode su ENFORCED nel blocco user_pool_add_ons in packages/common/terraform/src/core/user-identity/identity/identity.tf.

Web Application Firewall (WAF)

Per impostazione predefinita, il User Pool è associato a un AWS WAFv2 Web ACL utilizzando i gruppi di regole gestite AWSManagedRulesCommonRuleSet e AWSManagedRulesKnownBadInputsRuleSet. Puoi disabilitarlo se desideri gestire il tuo Web ACL o se non ne hai bisogno:

CDK

new UserIdentity(this, 'Identity', { enableWaf: false });

Terraform

module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"

  enable_waf = false
}

Utilizzo dell’Infrastruttura

CDK

Dovrai aggiungere l’infrastruttura per l’identità utente al tuo stack, dichiarandola prima 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 necessaria Configurazione Runtime per garantire che il tuo sito possa puntare al corretto Cognito User Pool per l’autenticazione.

Conservazione del ruolo SMS

Il User Pool è supportato da un ruolo IAM che Cognito assume per inviare messaggi SMS. La policy di rimozione del ruolo rispecchia quella del User Pool — per impostazione predefinita il UserPool di CDK utilizza RemovalPolicy.RETAIN, quindi con cdk destroy sia il User Pool che il suo ruolo SMS vengono conservati e dovranno essere eliminati manualmente se non più necessari.

Terraform

Dovrai aggiungere il modulo per l’identità utente e assicurarti che il tuo sito web dipenda da esso:

packages/infra/src/main.tf

# Distribuisci prima l'identità utente per aggiungerla alla configurazione runtime
module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

# Distribuisci il sito web dopo l'identità per includere la configurazione runtime
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # Assicura che l'identità sia distribuita prima
  depends_on = [module.user_identity]
}

Il modulo per l’identità utente aggiunge automaticamente la necessaria Configurazione Runtime per garantire che il tuo sito possa puntare al corretto Cognito User Pool per l’autenticazione.

Rimuovere gli URL di callback localhost per la produzione

Il client User Pool generato consente l’URL della distribuzione CloudFront come URL di callback/logout OAuth, oltre a http://localhost:4200 e http://localhost:4300 per lo sviluppo locale contro il pool distribuito.

Si raccomanda di rimuovere gli URL di callback/logout http://localhost per gli stage di produzione, mantenendo l’allowlist limitata alle origini reali della tua applicazione.

CDK

Modifica gli URL di callback/logout in packages/common/constructs/src/core/user-identity.ts.

Terraform

Modifica i callback_urls/logout_urls in packages/common/terraform/src/core/user-identity/identity/identity.tf.

Concessione Accesso agli Utenti Autenticati

Per concedere agli utenti autenticati l’accesso a determinate azioni, come concedere permessi per invocare un’API, puoi aggiungere dichiarazioni di policy IAM al ruolo autenticato del pool di identità:

CDK

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

Terraform

packages/infra/src/main.tf

module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

module "asset_bucket" {
  source = "../../common/terraform/src/core/asset-bucket"
}

module "my_api" {
  source = "../../common/terraform/src/app/apis/my-api"

  asset_bucket_name = module.asset_bucket.bucket_name
}

# Aggiungi permessi per gli utenti autenticati di invocare Fast API
resource "aws_iam_role_policy" "authenticated_fast_api_invoke" {
  name = "authenticated-user-invoke-my-api"
  role = module.user_identity.authenticated_role_name

  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Action = [
          "execute-api:Invoke"
        ]
        Resource = "${module.my_api.api_execution_arn}/*"
      }
    ]
  })
}