Salta ai contenuti
@aws/nx-plugin
Blog

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

Sezione intitolata “Utilizzo”

Aggiungere l’autenticazione al tuo sito React

Sezione intitolata “Aggiungere l’autenticazione al tuo sito React”

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

  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#react-website#auth
  5. Compila i parametri richiesti
    • Clicca su Generate

    Opzioni

    Sezione intitolata “Opzioni”
    Parametro Tipo Predefinito Descrizione
    project Obbligatorio string - The root directory of the React website.
    cognitoDomain Obbligatorio string - The cognito domain prefix to use
    allowSignup boolean Whether to allow self-signup
    iacProvider string Inherit The preferred IaC provider. By default this is inherited from your initial selection.

    Output del Generatore

    Sezione intitolata “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

    Sezione intitolata “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:

    • 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

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

    • Directorypackages/common/constructs/src
      • Directorycore
        • user-identity.ts Construct che definisce il user pool e identity pool

    Utilizzo dell’Infrastruttura

    Sezione intitolata “Utilizzo dell’Infrastruttura”

    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.

    Concessione Accesso agli Utenti Autenticati

    Sezione intitolata “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à:

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