Condividi tramite


Esercitazione: Configurare Azure Active Directory B2C con la piattaforma Arkose Labs

Questa esercitazione descrive come integrare l'autenticazione di Azure Active Directory B2C (Azure AD B2C) con Arkose Labs Arkose Protect Platform. I prodotti Arkose Labs aiutano le organizzazioni a contrastare gli attacchi di bot, l'acquisizione di account e le aperture di account fraudolenti.

Prerequisiti

Per iniziare, è necessario:

Descrizione dello scenario

L'integrazione dei prodotti Arkose Labs include i componenti seguenti:

  • Arkose Protect Platform - Servizio da proteggere da bot e altri abusi automatizzati
  • Flusso utente di iscrizione di Azure AD B2C - Esperienza di iscrizione che usa la piattaforma Arkose Labs
    • Connettori HTML, JavaScript e API personalizzati si integrano con la piattaforma Arkose
  • Funzioni di Azure - Endpoint api ospitata che funziona con la funzionalità connettori API

Il diagramma seguente illustra come la piattaforma Arkose Labs si integra con Azure AD B2C.

Diagramma dell'architettura di integrazione Arkose Labs e Azure AD B2C.

  1. Un utente si iscrive e crea un account. L'utente seleziona Invia e viene visualizzata una sfida di imposizione di Arkose Labs.
  2. L'utente completa la sfida. Azure AD B2C invia lo stato a Arkose Labs per generare un token.
  3. Arkose Labs invia il token ad Azure AD B2C.
  4. Azure AD B2C chiama un'API Web intermedia per passare il modulo di iscrizione.
  5. Il modulo di iscrizione passa a Arkose Labs per la verifica dei token.
  6. Arkose Labs invia i risultati della verifica all'API Web intermedia.
  7. L'API invia un risultato positivo o negativo ad Azure AD B2C.
  8. Se la sfida ha esito positivo, un modulo di iscrizione passa ad Azure AD B2C, che completa l'autenticazione.

Richiedere una demo da Arkose Labs

  1. Passare a arkoselabs.com per prenotare una demo.
  2. Creare un account.
  3. Passare alla pagina di accesso di Arkose Portal .
  4. Nel dashboard passare alle impostazioni del sito.
  5. Individuare la chiave pubblica e la chiave privata. Queste informazioni verranno usate in un secondo momento.

Nota

I valori di chiave pubblica e privata sono ARKOSE_PUBLIC_KEY e ARKOSE_PRIVATE_KEY. Vedere Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.

Integrazione con Azure AD B2C

Creare un attributo personalizzato ArkoseSessionToken

Per creare un attributo personalizzato:

  1. Accedere alla portale di Azure, quindi passare ad Azure AD B2C.
  2. Selezionare Attributi utente.
  3. Selezionare Aggiungi.
  4. Immettere ArkoseSessionToken come nome dell'attributo.
  5. Selezionare Crea.

Altre informazioni: Definire attributi personalizzati in Azure Active Directory B2C

Creare un flusso utente

Il flusso utente è per l'iscrizione e l'accesso o l'iscrizione. Il flusso utente di Arkose Labs viene visualizzato durante l'iscrizione.

  1. Creare flussi utente e criteri personalizzati in Azure Active Directory B2C. Se si usa un flusso utente, usare Consigliato.

  2. Nelle impostazioni del flusso utente passare a Attributi utente.

  3. Selezionare l'attestazione ArkoseSessionToken .

    Screenshot del token di sessione Arkose in Attributi utente.

Configurare il layout di pagina, JavaScript e HTML personalizzato

  1. Passare ad Azure-Samples/active-directory-b2c-node-sign-up-user-flow-arkose.
  2. Trovare il modello HTML con tag JavaScript <script> . Queste operazioni sono tre:
  • Caricare lo script Arkose Labs, che esegue il rendering del widget e esegue la convalida di Arkose Labs sul lato client.

  • Nascondere l'elemento di input e l'etichetta extension_ArkoseSessionToken , corrispondente all'attributo ArkoseSessionToken personalizzato.

  • Quando un utente completa la sfida Arkose Labs, la risposta dell'utente viene verificata e viene generato un token. Il callback arkoseCallback in JavaScript personalizzato imposta il valore di extension_ArkoseSessionToken sul valore del token generato. Questo valore viene inviato all'endpoint dell'API.

    Nota

    Passare a developer.arkoselabs.com per istruzioni sul lato client. Seguire la procedura per usare il codice HTML e JavaScript personalizzato per il flusso utente.

  1. In Azure-Samples modificare selfAsserted.html file in modo <ARKOSE_PUBLIC_KEY> che corrisponda al valore generato per la convalida lato client.

  2. Ospitare la pagina HTML in un endpoint Web abilitato per la condivisione delle risorse tra origini (CORS).

  3. Creare un account di archiviazione.

  4. Supporto CORS per Archiviazione di Azure.

    Nota

    Se si dispone di CODICE HTML personalizzato, copiare e incollare gli <script> elementi nella pagina HTML.

  5. Nella portale di Azure passare ad Azure AD B2C.

  6. Passare a Flussi utente.

  7. Selezionare il flusso utente.

  8. Selezionare Layout pagina.

  9. Selezionare Layout pagina di iscrizione dell'account locale.

  10. Per Usare il contenuto della pagina personalizzata, selezionare .

  11. In Usa contenuto di pagina personalizzato incollare l'URI HTML personalizzato.

  12. (Facoltativo) Se si usano i provider di identità social, ripetere i passaggi per la pagina di iscrizione all'account social.

    Screenshot delle opzioni del nome layout e delle opzioni di iscrizione dell'account social, in Layout di pagina.

  13. Dal flusso utente passare a Proprietà.

  14. Selezionare Abilita JavaScript.

Altre informazioni: Abilitare versioni javaScript e layout di pagina in Azure Active Directory B2C

Creare e distribuire l'API

Questa sezione presuppone l'uso di Visual Studio Code per distribuire Funzioni di Azure. È possibile usare il portale di Azure, il terminale o il prompt dei comandi per la distribuzione.

Passare a Visual Studio Marketplace per installare Funzioni di Azure per Visual Studio Code.

Eseguire l'API in locale

  1. Nel codice di Visual Studio passare all'estensione di Azure nella navigazione a sinistra.
  2. Selezionare la cartella Progetto locale per la funzione di Azure locale.
  3. Premere F5 o selezionare DebugAvvia debug>. Questo comando usa la funzione di configurazione di Debug creata da Azure.
  4. La funzione di Azure genera file per lo sviluppo locale, installa le dipendenze e gli strumenti Function Core, se necessario.
  5. Nel pannello Terminale di Visual Studio Code viene visualizzato l'output dello strumento Function Core.
  6. All'avvio dell'host, selezionare ALT+clic sull'URL locale nell'output.
  7. Il browser apre ed esegue la funzione.
  8. Nell'Funzioni di Azure Explorer fare clic con il pulsante destro del mouse sulla funzione per visualizzare l'URL della funzione ospitata in locale.

Aggiungere variabili di ambiente

L'esempio in questa sezione protegge l'endpoint api Web quando si usa l'autenticazione HTTP Basic. Per altre informazioni, vedere la pagina RFC 7617 di Internet Engineering Task Force: Autenticazione di base.

Il nome utente e la password vengono archiviati come variabili di ambiente, non parte del repository. Altre informazioni su Codice e test Funzioni di Azure file di impostazioni locali.

  1. Nella cartella radice creare un file local.settings.json.
  2. Copiare e incollare il codice seguente nel file:
{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "BASIC_AUTH_USERNAME": "<USERNAME>",
    "BASIC_AUTH_PASSWORD": "<PASSWORD>",
    "ARKOSE_PRIVATE_KEY": "<ARKOSE_PRIVATE_KEY>",
    "B2C_EXTENSIONS_APP_ID": "<B2C_EXTENSIONS_APP_ID>"
  }
}
  1. Il BASIC_AUTH_USERNAME e BASIC_AUTH_PASSWORD sono le credenziali per autenticare la chiamata API alla funzione di Azure. Selezionare i valori.
  • < > ARKOSE_PRIVATE_KEY è il segreto lato server generato nella piattaforma Arkose Labs.
    • Chiama l'API di convalida lato server Arkose Labs per convalidare il valore dell'oggetto ArkoseSessionToken generato dal front-end.
    • Vedere Istruzioni sul lato server.
  • < > B2C_EXTENSIONS_APP_ID è l'ID applicazione usato da Azure AD B2C per archiviare attributi personalizzati nella directory.
  1. Passare a Registrazioni app.

  2. Cercare b2c-extensions-app.

  3. Nel riquadro Panoramica copiare l'ID applicazione (client).

  4. Rimuovere i - caratteri.

    Screenshot del nome visualizzato, dell'ID applicazione e della data di creazione in Registrazioni app.

Distribuire l'applicazione nel Web

  1. Distribuire la funzione di Azure nel cloud. Altre informazioni con la documentazione di Funzioni di Azure.

  2. Copiare l'URL Web dell'endpoint della funzione di Azure.

  3. Dopo la distribuzione selezionare l'opzione Carica impostazioni .

  4. Le variabili di ambiente vengono caricate nelle impostazioni dell'applicazione del servizio app. Altre informazioni sulle impostazioni dell'applicazione in Azure.

    Nota

    È possibile gestire l'app per le funzioni. Vedere anche Distribuire file di progetto per informazioni sullo sviluppo di Visual Studio Code per Funzioni di Azure.

Configurare e abilitare il connettore API

  1. Creare un connettore API. Vedere Aggiungere un connettore API a un flusso utente di iscrizione.

  2. Abilitarlo per il flusso utente.

    Screenshot del nome visualizzato, dell'URL dell'endpoint, del nome utente e della password in Configurare e un connettore API.

  • URL dell'endpoint - URL della funzione copiato durante la distribuzione della funzione di Azure
  • Nome utente - Nome utente definito
  • Password : password definita
  1. Nelle impostazioni del connettore API per il flusso utente selezionare il connettore API da richiamare in Prima di creare l'utente.

  2. L'API convalida il ArkoseSessionToken valore.

    Screenshot della voce per Prima di creare l'utente, in Connettori API.

Testare il flusso utente

  1. Aprire il tenant di Azure AD B2C.
  2. In Criteri selezionare Flussi utente.
  3. Selezionare il flusso utente creato.
  4. Selezionare Esegui il flusso utente.
  5. Per Applicazione selezionare l'app registrata (l'esempio è JWT).
  6. Per URL di risposta selezionare l'URL di reindirizzamento.
  7. Selezionare Esegui il flusso utente.
  8. Eseguire il flusso di iscrizione.
  9. Creare un account.
  10. Uscire,
  11. Eseguire il flusso di accesso.
  12. Selezionare Continua.
  13. Viene visualizzato un puzzle Arkose Labs.

Risorse