Autenticazione per siti web React

Il generatore di autenticazione per siti web React aggiunge l’autenticazione al tuo sito web 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 accesso degli utenti e la sua integrazione con il tuo sito web React.

Utilizzo

Aggiungere l’autenticazione al tuo sito web React

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

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

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

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 web React:

• Directorysrc

  • Directorycomponents

    • DirectoryCognitoAuth

      • index.tsx Main authentication component
  • main.tsx Updated to instrument the CognitoAuth component

Infrastruttura

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

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

CDK

• Directorypackages/common/constructs

  • Directorysrc

    • Directoryapp/ Constructs for infrastructure specific to a project/generator

      • …
    • Directorycore/ Generic constructs which are reused by constructs in app

      • …
    • index.ts Entry point exporting constructs from app
  • project.json Project build targets and configuration

Progetto Generato

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

Terraform

• Directorypackages/common/terraform

  • Directorysrc

    • Directoryapp/ Terraform modules for infrastructure specific to a project/generator

      • …
    • Directorycore/ Generic modules which are reused by modules in app

      • …
  • project.json Project build targets and configuration

Progetto Generato

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

Troverai anche il seguente codice di infrastruttura generato in base al tuo iac selezionato:

CDK

• Directorypackages/common/constructs/src

  • Directorycore

    • user-identity.ts Construct which defines the user pool and identity pool

Terraform

• Directorypackages/common/terraform/src

  • Directorycore

    • Directoryuser-identity

      • main.tf Module wrapper for the identity configuration
      • Directoryidentity

        • identity.tf Core identity infrastructure including Cognito User Pool and Identity Pool
      • Directoryadd-callback-url

        • add-callback-url.tf Module for adding callback URLs to existing user pool clients

Architettura

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

Protezione dalle minacce

Il User Pool viene creato sul piano di funzionalità Plus di Cognito con la protezione dalle minacce impostata sulla 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 delle funzionalità 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.

Autenticazione a più fattori (MFA)

Per impostazione predefinita, gli utenti devono configurare l’MFA (un codice SMS o una password monouso basata sul tempo) prima di poter accedere. Puoi rendere l’MFA opzionale, disattivarla completamente o limitare i metodi di secondo fattore disponibili:

CDK

import { Mfa } from 'aws-cdk-lib/aws-cognito';

new UserIdentity(this, 'Identity', {
  mfa: Mfa.OPTIONAL,
  mfaSecondFactor: { sms: false, otp: true },
});

mfa accetta Mfa.OFF / Mfa.OPTIONAL / Mfa.REQUIRED. mfaSecondFactor.sms e mfaSecondFactor.otp abilitano o disabilitano ciascun metodo di secondo fattore in modo indipendente; non hanno effetto quando mfa è Mfa.OFF. Impostare mfa: Mfa.REQUIRED con entrambi i metodi disabilitati viene rifiutato al momento della sintesi, poiché nessuno potrebbe quindi completare l’accesso.

Terraform

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

  mfa = "OPTIONAL"
  mfa_second_factor_sms = false
  mfa_second_factor_otp = true
}

mfa accetta "OFF" / "OPTIONAL" / "ON". mfa_second_factor_sms e mfa_second_factor_otp abilitano o disabilitano ciascun metodo di secondo fattore in modo indipendente; non hanno effetto quando mfa è "OFF".

L’MFA SMS è legato alla verifica del numero di telefono

Cognito rifiuta la verifica del numero di telefono basata su SMS a meno che SMS non sia anche un metodo MFA abilitato ogni volta che l’MFA non è disattivato, sia in CDK che in Terraform. Disabilitare mfaSecondFactor.sms / mfa_second_factor_sms mentre mfa è attivo disabilita quindi anche la verifica del numero di telefono basata su SMS per il user pool.

Web Application Firewall (WAF)

Per impostazione predefinita, il User Pool è associato a un Web ACL AWS WAFv2 utilizzando i gruppi di regole gestite AWSManagedRulesCommonRuleSet e AWSManagedRulesKnownBadInputsRuleSet. Puoi disabilitare questa opzione 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
}

EC2MetaDataSSRF_QUERYARGUMENTS è impostato su Count

Questa regola contrassegna gli indirizzi di loopback negli argomenti delle query come tentativi di SSRF, il che bloccherebbe l’accesso locale poiché l’interfaccia utente ospitata riceve un redirect_uri localhost. È quindi impostata su Count mentre sono configurati gli URL di callback locali — le corrispondenze vengono comunque registrate e tutte le altre regole bloccano. Rimuovi gli URL di callback locali per ripristinarla su Block.

Utilizzo dell’infrastruttura

CDK

Dovrai aggiungere l’infrastruttura di 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 costrutto UserIdentity aggiunge automaticamente la configurazione di runtime necessaria per garantire che il tuo sito web possa puntare al Cognito User Pool corretto per l’autenticazione.

Conservazione del ruolo SMS

Il User Pool è supportato da un ruolo IAM che Cognito assume per inviare messaggi SMS. La politica 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 puliti manualmente se non più necessari.

Terraform

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

packages/infra/src/main.tf

# Deploy user identity first to add to runtime config
module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

# Deploy website after identity to include runtime config
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # Ensure identity is deployed first to add to runtime config
  depends_on = [module.user_identity]
}

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

Rimuovi gli URL di callback localhost per la produzione

Il client User Pool generato consente l’URL di distribuzione CloudFront (e qualsiasi nome di dominio personalizzato configurato su di esso) come URL di callback/logout OAuth, più 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 la lista consentita 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.

Concedere l’accesso agli utenti autenticati

Per concedere agli utenti autenticati l’accesso per eseguire determinate azioni, come concedere le autorizzazioni per invocare un’API, puoi aggiungere dichiarazioni di policy IAM al ruolo autenticato dell’identity pool:

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', {
      integrations: MyApi.defaultIntegrations(this).build(),
    });

    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
}

# Add permissions for authenticated users to invoke 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}/*"
      }
    ]
  })
}