Utilizzo del widget di accesso

Con IBM Cloud® App ID puoi utilizzare un'IU predefinita, denominata widget di accesso, per consentire agli utenti di scegliete il provider di identità con cui vogliono accedere. Se si utilizza Cloud Directory, il Widget di accesso fornisce anche ulteriori interfacce utente per funzionalità come l'iscrizione, la password dimenticata, l'autenticazione a più fattori e altro ancora.

Descrizione del widget di accesso

Una delle parti migliori del widget di accesso è che puoi iniziare ad utilizzare App ID prima di implementare una qualsiasi delle tue IU di autenticazione - il che rende l'esperienza di onboarding degli sviluppatori molto più semplice.

Qual è il comportamento predefinito del widget di accesso?

Per impostazione predefinita, il widget di accesso può utilizzare Facebook, Google e Cloud Directory. Puoi modificare il comportamento in qualsiasi momento scegliendo quali provider di identità vuoi configurare come opzione di scelta. Quando viene abilitato più di un provider di identità, il widget di accesso visualizza una schermata in cui l'utente può selezionare il proprio provider di identità. Tuttavia, se si dispone di un unico provider abilitato, gli utenti non vedono la schermata di selezione precedentemente menzionata. I clienti vengono portati direttamente al fornitore di identità per iniziare il processo di accesso.

Ad esempio, se stai utilizzando i valori predefiniti - Facebook, Google e Cloud Directory - gli utenti visualizzano la schermata. Se hai abilitato solo Facebook, gli utenti vengono indirizzati direttamente a Facebook per l'autenticazione.

Quali schermate possono essere visualizzate per ogni provider?

Quando utilizzi Cloud Directory, App ID può fornirti una funzionalità estesa della gestione utenti. La funzionalità estesa si applica anche alle capacità del Widget di accesso. Gli utenti che vengono archiviati in Cloud Directory possono avvalersi di funzionalità come registrazione e reimpostazione della propria password direttamente nel widget di accesso. Consulta la seguente tabella per vedere quali schermate puoi visualizzare per ciascun tipo di provider di identità.

Le schermate del Widget di accesso che ciascun fornitore di identità può visualizzare
Schermata del widget di accesso Provider di identità sociale Provider di identità aziendale Cloud Directory
Accedi Icona segno di spunta Icona segno di spunta Icona segno di spunta
Registrati Icona segno di spunta
Password dimenticata Icona segno di spunta
Modifica password Icona segno di spunta
Dettagli account Icona segno di spunta

Personalizzazione di un flusso di accesso SSO

Dopo un'autenticazione eseguita con esito positivo, App ID crea un cookie di sessione con l'accesso crittografato e dei token di identità che le tue applicazioni possono utilizzare per l'autenticazione. Un altro modo per personalizzare il flusso è quello di inviare un token di accesso al tuo browser in modo che qualsiasi applicazione browser possa utilizzare il token nella sua richiesta AJAX.

Personalizzazione del widget di accesso

Il widget di accesso è dinamico. È possibile personalizzare l'aspetto e la configurazione del provider di identità e le modifiche vengono applicate immediatamente. Non devi aggiornare il tuo codice applicazione o ridistribuire la tua applicazione in alcun modo.

Ti serve una maggiore personalizzazione rispetto a quella fornita dal widget di accesso? Puoi implementare la tua IU completamente personalizzabile per la registrazione, l'accesso, il ripristino della password o altri flussi dell'utente per creare un'esperienza unica per la tua applicazione. Per iniziare, consulta personalizzazione della tua applicazione.

Per personalizzare la schermata:

  1. Apri il dashboard del servizio App ID.
  2. Seleziona la sezione Login Customization. Puoi modificare l'aspetto del widget di accesso per allinearlo al marchio della tua azienda.
  3. Carica il tuo logo aziendale selezionando un file PNG o JPG dal tuo sistema locale. La dimensione dell'immagine raccomandata è 320 x 320 pixel. La dimensione del file massima è 100 Kb.
  4. Seleziona un colore di intestazione per il widget dal selezionatore del colore o immetti il codice esadecimale per un altro colore.
  5. Controlla il pannello dell'anteprima e fai clic su Save Changes quando sei soddisfatto delle tue personalizzazioni. Viene visualizzato un messaggio di conferma.
  6. Nel tuo browser, aggiorna la pagina di accesso per verificare le tue modifiche.

Visualizzazione del widget di accesso con l'SDK Android

È possibile richiamare schermate preconfigurate con l'SDK del client Android.

Inserisci il seguente comando nel tuo codice.

LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launch(this, new AuthorizationListener() {
      @Override
      public void onAuthorizationFailure (AuthorizationException exception) {
      //Exception occurred
      }

      @Override
      public void onAuthorizationCanceled () {
      //Authentication canceled by the user
      }

      @Override
      public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, refreshToken: RefreshToken) {
      //User authenticated
      }
   });

Registrati

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Aggiungi il seguente codice alla tua applicazione. Quando un utente si iscrive alla vostra applicazione dalla schermata personalizzata, viene avviato il flusso di iscrizione. La seguente chiamata non solo registra l'utente, ma può anche inviare un'email di verifica per completare la registrazione, a seconda delle tue configurazioni Cloud Directory.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchSignUp(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         //Sign up canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         if (accessToken != null && identityToken != null) {
            //User authenticated
         } else {
            //email verification is required
         }
   }
});

Password dimenticata

  1. Configurare le impostazioni di Cloud Directory nella console. Allow users to manage their account from your app deve essere impostato su On.

  2. Nella scheda Reset Password del dashboard del servizio, assicurati che Forgot password email sia impostato su On.

  3. Aggiungi il seguente codice alla tua applicazione. Quando un utente fa clic su "forgot password" nella tua applicazione, l'SDK richiama l'API forgot_password per inviare un'email all'utente per consentirgli di ripristinare la propria password.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchForgotPassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         //Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Forogt password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // Forgot password finished, in this case accessToken and identityToken will be null.
   }
});

Dettagli della modifica

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Nella scheda Password changed del dashboard del servizio, imposta Password changed email su

  3. Richiama il widget di accesso per avviare il flusso di modifica dei dettagli.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangeDetails(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Changed details canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Modifica password

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Inserisci il seguente codice nella tua applicazione per avviare il flusso di modifica della password.

    LoginWidget loginWidget = AppID.getInstance().getLoginWidget();
loginWidget.launchChangePassword(this, new AuthorizationListener() {
   @Override
   public void onAuthorizationFailure (AuthorizationException exception) {
         // Exception occurred
   }

   @Override
   public void onAuthorizationCanceled () {
         // Change password canceled by the user
   }

   @Override
   public void onAuthorizationSuccess (AccessToken accessToken, IdentityToken identityToken, RefreshToken refreshToken) {
         // User authenticated, and fresh tokens received
   }
});

Visualizzazione del widget di accesso con l'SDK iOS Swift

È possibile richiamare le schermate preconfigurate con l'SDK del client iOS Swift.

Inserisci il seguente comando nel tuo codice.

import IBMCloudAppID
class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken, identityToken: IdentityToken, refreshToken: RefreshToken?) {
         //User authenticated
   }

   public func onAuthorizationCanceled() {
         //Authentication canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launch(delegate: delegate())

Registrati

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Inserisci il seguente codice nella tua applicazione. Quando un utente tenta di iscriversi alla vostra applicazione, il widget di login viene richiamato e visualizza la vostra pagina di iscrizione personalizzata.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      if accessToken == nil && identityToken == nil {
      //email verification is required
      return
      }
   //User authenticated
   }

   public func onAuthorizationCanceled() {
      //Sign up canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchSignUp(delegate: delegate())

Password dimenticata

  1. Configurare le impostazioni di Cloud Directory nella console. Allow users to manage their account from your app deve essere impostato su On.

  2. Nella scheda Reset Password del dashboard del servizio, assicurati che Forgot password email sia impostato su On.

  3. Inserisci il seguente codice nella tua applicazione. Quando uno degli utenti dell'applicazione richiede che la sua password venga aggiornata, viene richiamato il widget di accesso e si avvia il processo.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //forgot password finished, in this case accessToken and identityToken will be null.
   }

   public func onAuthorizationCanceled() {
      //forgot password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
      //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchForgotPassword(delegate: delegate())

Dettagli della modifica

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Nella scheda Password changed del dashboard del servizio, imposta Password changed email su

  3. Richiama il widget di accesso per avviare il flusso di modifica dei dettagli.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
      //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //changed details canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangeDetails(delegate: delegate())

Modifica password

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Inserisci il seguente codice nella tua applicazione per avviare il flusso di modifica della password.

    class delegate : AuthorizationDelegate {
   public func onAuthorizationSuccess(accessToken: AccessToken?, identityToken: IdentityToken?, refreshToken: RefreshToken?, response:Response?) {
         //User authenticated, and fresh tokens received
   }

   public func onAuthorizationCanceled() {
         //change password canceled by the user
   }

   public func onAuthorizationFailure(error: AuthorizationError) {
         //Exception occurred
   }
}

AppID.sharedInstance.loginWidget?.launchChangePassword(delegate: delegate())

Visualizzazione del widget di accesso con l'SDK Node.js

È possibile richiamare schermate preconfigurate con l'SDK del server Node.js.

Aggiungi una rotta post alla tua applicazione che può essere richiamata con i parametri password e nome utente e accedi utilizzando la password del proprietario della risorsa.

app.post("/form/submit", bodyParser.urlencoded({extended: false}), passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
failureRedirect: ROP_LOGIN_PAGE_URL,
failureFlash : true // allow flash messages
}));

WebAppStrategy consente agli utenti di accedere alle tue applicazioni web con un nome utente e una password. Dopo un accesso riuscito, il token di accesso di un utente viene memorizzato nella sessione HTTP ed è disponibile durante la sessione. Una volta eliminata o scaduta la sessione HTTP, il token non è più valido.

Registrati

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Inserisci il seguente codice nella tua applicazione. Quando un utente tenta di iscriversi alla vostra applicazione, il widget di login viene richiamato e visualizza la vostra pagina di iscrizione personalizzata.

    app.get("/sign_up", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.SIGN_UP
}));

Password dimenticata

  1. Configurare le impostazioni di Cloud Directory nella console. Allow users to manage their account from your app deve essere impostato su On.

  2. Nella scheda Reset Password del dashboard del servizio, assicurati che Forgot password email sia impostato su On.

  3. Inserisci il seguente codice nella tua applicazione per passare la proprietà show a WebAppStrategy.FORGOT_PASSWORD. Quando un utente richiede che la sua password della tua applicazione venga aggiornata, viene richiamato il widget di accesso e si avvia il processo.

    app.get("/forgot_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.FORGOT_PASSWORD
}));

Dettagli della modifica

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Nella scheda Password changed del dashboard del servizio, imposta Password changed email su

  3. Inserisci il seguente codice nella tua applicazione per passare la proprietà show a WebAppStrategy.FORGOT_PASSWORD per avviare il modulo dei dettagli della modifica.

    app.get("/change_details", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_DETAILS
}));

Modifica password

  1. Configurare le impostazioni di Cloud Directory nella console. Sia Allow users to sign up to your app che Allow users to manage their account from your app devono essere impostati su On.

  2. Nella scheda Password changed del dashboard del servizio, imposta Password changed email su

  3. Inserisci il seguente codice nella tua applicazione per passare la proprietà show a WebAppStrategy.FORGOT_PASSWORD per avviare il modulo dei dettagli della modifica.

    app.get("/change_password", passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
successRedirect: LANDING_PAGE_URL,
show: WebAppStrategy.CHANGE_PASSWORD
}));