Utilisation du widget de connexion

Avec IBM Cloud® App ID, vous pouvez utiliser une interface utilisateur par défaut, appelée un widget de connexion, pour permettre aux utilisateurs de l'application de choisir le fournisseur d'identité avec lequel ils souhaitent se connecter. Si vous utilisez Cloud Directory, le Login Widget fournit également des interfaces utilisateur supplémentaires pour des fonctionnalités telles que l'inscription, l'oubli du mot de passe, l'authentification multifactorielle, etc.

Comprendre le widget de connexion

L'un des aspects les plus intéressants du widget de connexion réside dans le fait que vous pouvez commencer à utiliser App ID avant d'implémenter vos propres interfaces d'authentification - ce qui rend le processus d'intégration beaucoup plus facile pour les développeurs.

Quel est le comportement par défaut du widget de connexion ?

Par défaut, le widget de connexion est activé pour utiliser Facebook, Google et Cloud Directory. Vous pouvez modifier le comportement à tout moment en choisissant les fournisseurs d'identité que vous souhaitez configurer en tant qu'option. Lorsque plusieurs fournisseurs d'identité sont activés, le widget de connexion présente un écran dans lequel l'utilisateur peut choisir son fournisseur d'identité. Mais si vous n'avez qu'un seul fournisseur activé, les utilisateurs ne voient pas l'écran de sélection mentionné précédemment. Ils sont pris directement au fournisseur d'identité pour commencer le processus de signature.

Par exemple, si vous utilisez la configuration par défaut (Facebook, Google et Cloud Directory), les utilisateurs voient l'écran. Si vous activez Facebook uniquement, les utilisateurs sont directement dirigés vers Facebook pour l'authentification.

Quels écrans peuvent être affichés pour chaque fournisseur ?

Lorsque vous utilisez Cloud Directory, App ID est en mesure de vous fournir la fonctionnalité étendue de la gestion des utilisateurs. La fonctionnalité étendue s'applique également aux fonctionnalités du widget de connexion. Les utilisateurs qui sont stockés dans Cloud Directory peuvent profiter des fonctionnalités telles que l'inscription ou la réinitialisation de leur mot de passe directement dans le widget de connexion. Consultez le tableau suivant pour voir les écrans que vous pouvez afficher pour chaque type de fournisseur d'identité.

Les écrans du widget de connexion que chaque fournisseur d'identité peut afficher
Ecran du widget de connexion Fournisseur d'identité de réseau social Fournisseur d'identité d'entreprise Cloud Directory
Connexion Icône de coche Icône de coche Icône de coche
S'inscrire Icône de coche
Mot de passe oublié Icône de coche
Changement du mot de passe Icône de coche
Détails du compte Icône de coche

Personnalisation d'un flux de connexion SSO

Après une authentification réussie, App ID crée un cookie de session avec des jetons d'accès et d'identité chiffrés que vos applications peuvent utiliser pour l'authentification. Un autre moyen de personnaliser le flux consiste à envoyer un jeton d'accès à votre navigateur de sorte que toute application de navigateur puisse utiliser ce jeton dans sa demande AJAX.

Personnalisation du widget de connexion

Le widget de connexion est dynamique. Vous pouvez personnaliser la configuration de l'apparence ou du fournisseur d'identité, et les changements sont appliqués immédiatement. Vous n'avez pas besoin de mettre à jour votre code d'application ou de redéployer votre application de quelque façon que ce soit !

Vous avez besoin de plus de personnalisation que ce que le widget de connexion vous offre ? Vous pouvez implémenter votre propre interface utilisateur entièrement personnalisée pour vous connecter, vous inscrire, réinitialiser le mot de passe et d'autres flux pour créer une expérience unique à votre application. Pour commencer, consultez Association d'une marque à votre application.

Pour personnaliser l'écran :

  1. Ouvrez le tableau de bord du service App ID.
  2. Sélectionnez la section Personnalisation de la connexion. Vous pouvez modifier l'apparence du widget de connexion pour l'adapter à la marque de votre entreprise.
  3. Téléchargez le logo de votre entreprise en sélectionnant un fichier PNG ou JPG sur votre système local. La taille recommandée pour l'image est de 320 x 320 pixels. La taille maximale du fichier est 100 Ko.
  4. Sélectionnez une couleur d'en-tête pour le widget dans la palette de couleurs ou entrez le code hexadécimal d'une autre couleur.
  5. Examinez le panneau de prévisualisation, puis cliquez sur Sauvegarder les modifications lorsque vous êtes satisfait de vos personnalisations. Un message de confirmation apparaît.
  6. Dans votre navigateur, actualisez votre page de connexion afin de vérifier vos modifications.

Affichage du widget de connexion avec le logiciel Android

Vous pouvez appeler des écrans préconfigurés avec le SDK client Android.

Placez la commande suivante dans votre code.

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

S'inscrire

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Ajoutez le code suivant à votre application. Lorsqu'un utilisateur s'affiche pour votre application à partir de votre écran personnalisé, le flux de connexion est démarré. L'appel suivant enregistre non seulement l'utilisateur, mais peut également envoyer un courrier électronique de vérification pour terminer l'enregistrement, en fonction de vos configurations de 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
         }
   }
});

Mot de passe oublié

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de gérer leur compte à partir de votre application doit être défini sur Activé.

  2. Dans l'onglet Réinitialiser le mot de passe du tableau de bord du service, vérifiez que Courrier électronique d'oubli de mot de passe est défini sur Activé.

  3. Ajoutez le code suivant à votre application. Lorsqu'un utilisateur clique sur "Mot de passe oublié" dans votre application, le logiciel SDK appelle l'API forgot_password pour lui envoyer un courrier électronique lui permettant de réinitialiser son mot de passe.

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

Changement des détails

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Dans l'onglet Mot de passe modifié du tableau de bord du service, définissez Courrier électronique de changement de mot de passe sur

  3. Appelez le widget de connexion pour démarrer le flux de changement des détails.

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

Changement du mot de passe

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Placez le code suivant dans votre application pour démarrer le flux de changement de mot de passe.

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

Affichage du widget de connexion avec le logiciel SDK Swift iOS

Vous pouvez appeler des écrans préconfigurés avec le SDK client iOS Swift.

Placez la commande suivante dans votre code.

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())

S'inscrire

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Ajoutez le code suivant dans votre application. Lorsqu'un utilisateur tente de s'inscrire pour votre application, le widget de connexion est appelé et affiche votre page d'inscription personnalisée.

    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())

Mot de passe oublié

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de gérer leur compte à partir de votre application doit être défini sur Activé.

  2. Dans l'onglet Réinitialiser le mot de passe du tableau de bord du service, vérifiez que Courrier électronique d'oubli de mot de passe est défini sur Activé.

  3. Ajoutez le code suivant dans votre application. Lorsqu'un utilisateur de votre application demande que son mot de passe soit mis à jour, le widget de connexion est appelé et le processus démarre.

    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())

Changement des détails

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Dans l'onglet Mot de passe modifié du tableau de bord du service, définissez Courrier électronique de changement de mot de passe sur

  3. Appelez le widget de connexion pour démarrer le flux de changement des détails.

    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())

Changement du mot de passe

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Placez le code suivant dans votre application pour démarrer le flux de changement de mot de passe.

    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())

Affichage du widget de connexion avec le logiciel SDK Node.js

Vous pouvez appeler des écrans préconfigurés avec le SDK du serveur Node.js.

Ajoutez à votre application une route 'post' qui sera appelée avec le nom d'utilisateur et le mot de passe en paramètres et connectez-vous à l'aide du mot de passe du propriétaire de la ressource.

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 permet aux utilisateurs de se connecter à vos applications Web avec un nom d'utilisateur et un mot de passe. Une fois la connexion établie, le jeton d'accès d'un utilisateur est stocké dans la session HTTP et reste disponible pendant la session. Lorsque la session HTTP a été détruite ou est arrivée à expiration, le jeton n'est plus valide.

S'inscrire

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Ajoutez le code suivant dans votre application. Lorsqu'un utilisateur tente de s'inscrire pour votre application, le widget de connexion est appelé et affiche votre page d'inscription personnalisée.

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

Mot de passe oublié

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de gérer leur compte à partir de votre application doit être défini sur Activé.

  2. Dans l'onglet Réinitialiser le mot de passe du tableau de bord du service, vérifiez que Courrier électronique d'oubli de mot de passe est défini sur Activé.

  3. Placez le code suivant dans votre application pour transmettre la propriété show à WebAppStrategy.FORGOT_PASSWORD. Lorsqu'un utilisateur demande que son mot de passe pour votre application soit mis à jour, le widget de connexion est appelé et le processus démarre.

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

Changement des détails

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Dans l'onglet Mot de passe modifié du tableau de bord du service, définissez Courrier électronique de changement de mot de passe sur

  3. Placez le code suivant dans votre application pour transmettre la propriété show à WebAppStrategy.FORGOT_PASSWORD afin de lancer le formulaire de changement de détails.

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

Changement du mot de passe

  1. Configurez vos paramètres de Cloud Directory dans la console. Permettre aux utilisateurs de s'inscrire à votre application et Permettre aux utilisateurs de gérer leur compte à partir de votre application doivent être définis sur Activé.

  2. Dans l'onglet Mot de passe modifié du tableau de bord du service, définissez Courrier électronique de changement de mot de passe sur

  3. Placez le code suivant dans votre application pour transmettre la propriété show à WebAppStrategy.FORGOT_PASSWORD afin de lancer le formulaire de changement de détails.

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