Descrizione del flusso

Sebbene sia l'attuale standard di settore per le SPA, il gruppo di lavoro OAuth non raccomanda più l'uso del flusso implicito a causa di diversi problemi di sicurezza. In base ai loro consigli, App ID è configurato per utilizzare il flusso Authorization Code con PKCE.

{: caption="di autorizzazioni SPAIl flusso di autorizzazioni delle " caption-side="bottom"} a pagina singola

1. Un utente tenta di accedere alla tua SPA (single-page application).
2. L'SDK App ID crea un verificatore del codice per la richiesta di autorizzazione, ossia la versione in testo semplice della verifica del codice. Insieme alla richiesta di autorizzazione, il client invia la verifica del codice e il metodo di verifica utilizzato per codificare la verifica.
3. Il flusso di autenticazione viene avviato da App ID in una nuova finestra.
4. L'utente sceglie un provider di identità per l'autenticazione e completa il processo di accesso.
5. L'SDK App ID sull'applicazione riceve il codice di concessione
6. L'SDK effettua una richiesta XHR all'endpoint del token App ID insieme al codice di concessione e al verificatore del codice per ottenere i token di accesso e identità.

Stai utilizzando SSO per Cloud Directory? È possibile utilizzare l'SDK del client App ID per ottenere automaticamente una nuova coppia di token senza richiedere all'utente di effettuare l'accesso esplicito. Per ulteriori informazioni, vedi Accesso invisibile.

Prima di cominciare

Prima di iniziare, assicurati di avere i seguenti prerequisiti.

• Un'istanza del servizio App ID.
• I tuoi URI di reindirizzamento impostati nel dashboard del servizio App ID.
• Una SPA (single-page application). Se non ne hai una e vuoi provare il flusso, prova a scaricare l'applicazione di esempio dalla pagina della panoramica del dashboard App ID.

Configurazione dell'SDK JavaScript

Per installare l'SDK nella tua applicazione, utilizza la seguente procedura come guida.

1. Utilizzando il prompt di comandi, passa alla directory che contiene la tua applicazione.

2. Installa il servizio App ID utilizzando NPM o collegando la CDN nel tuo file HTML principale.

   • Per utilizzare NPM, immetti il seguente comando.

     npm install ibmcloud-appid-js
     

   • Per aggiungere la CDN, aggiungi il seguente link al tuo file HTML principale.

     <script src="https://cdn.appid.cloud.ibm.com/appid-0.3.0.min.js"></script>
     

3. Aggiungi il tuo ID client e l'endpoint di rilevamento alla tua applicazione per inizializzare l'SDK.

   const appID = new AppID();
   await appID.init({
      clientId: '<spaClientID>',
      discoveryEndpoint: '<wellKnownEndpoint>'
   });
   

4. Nel tuo codice dell'applicazione, dopo la configurazione del tuo pulsante di accesso, aggiungi una chiamata per l'accesso (signin). Si apre una finestra a comparsa in cui a un utente viene chiesto di immettere le proprie credenziali. Dopo una corretta autenticazione, la schermata si chiude e gli utenti sono autenticati.

   const tokens = await appID.signin();
   

Configurazione dell'accesso invisibile

Quando SSO per Cloud Directory è abilitato, puoi automaticamente ottenere dei nuovi token per un utente senza che debba riautenticarsi utilizzando l'accesso invisibile. Per abilitare l'accesso invisibile, utilizza la seguente procedura come guida.

I token di aggiornamento non vengono restituiti nel flusso SPA.

1. Nel dashboard App ID, passa a Cloud Directory > Single Sign-on.

2. Modifica Enable single sign-on su Enabled.

3. Fare clic su Salva.

4. Aggiungi il seguente codice alla tua applicazione. Assicurati di configurare la tua applicazione in modo da mostrare il pulsante di accesso se l'accesso invisibile ha esito negativo.

   const tokens = await appID.silentSignin();
   if (!tokens) {
      document.getElementById('login').addEventListener('click', async () => {
      const tokens = await appID.signin();
      });
   }