Autenticazione per Sito Web React

Il generatore React Website Authentication 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 il relativo 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:

Esegui questo generatore@aws/nx-plugin:ts#website#auth

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

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

Componi il tuo comando5

projectObbligatorio

cognitoDomain

allowSignup

false

iac

inheritcdkterraform

preferInstallDependencies

true

--dry-runPuoi anche eseguire una prova per vedere quali file verrebbero modificati

Opzioni

Opzioni del generatore5 opzioni

projectObbligatoriostring

La directory radice del sito web.

cognitoDomainstring

Il prefisso del dominio Cognito da utilizzare. Se omesso, viene derivato un valore dallo scope npm e dal nome del progetto del sito web.

allowSignupbooleanPredefinito: false

Se consentire l'auto-registrazione

iacenumPredefinito: inherit

Il provider IaC preferito. Per impostazione predefinita viene ereditato dalla selezione iniziale.

inheritcdkterraform

preferInstallDependenciesbooleanPredefinito: 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 a credenziali IAM con ambito) all’architettura esistente del sito web statico:

Loading the diagram…

Protezione dalle minacce

Il User Pool viene creato sul piano funzionalità Plus di Cognito con la protezione dalle minacce in modalità di applicazione solo audit per l’autenticazione standard. In modalità solo audit, Cognito assegna un livello di rischio a ogni accesso e registra la valutazione 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), quindi configurare la risposta per livello di rischio tramite l’autenticazione adattiva:

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 quali metodi di secondo fattore sono 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 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 di 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, StackProps } 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, props?: StackProps) {
    super(scope, id, props);

    new UserIdentity(this, 'Identity');

    new MyWebsite(this, 'MyWebsite');
  }
}

Il costrutto UserIdentity aggiunge automaticamente la Configurazione 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 su 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 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ù gli URL del server di sviluppo locale e di anteprima di ciascun sito web connesso (ad es. http://localhost:4200 e http://localhost:4300 per il primo sito web generato in un workspace) per lo sviluppo locale rispetto al pool distribuito. Ogni sito web generato con ts#website viene assegnato alle proprie porte distinte, quindi un workspace con più siti web avrà più di una coppia http://localhost:<port> consentita qui.

Si consiglia 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, StackProps } 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, props?: StackProps) {
    super(scope, id, props);

    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}/*"
      }
    ]
  })
}