Création d'un formulaire de connexion HTML personnalisé pour la sécurité utilisateur

Vous pouvez créer des formulaires HTML personnalisés pour assurer la sécurité utilisateur lors de la phase d'extraction d'identité dans OAuth.

Avant de commencer

La configuration du fournisseur OAuth natif inclut l'extraction d'identité lors de l'utilisation des types d'accès Implicite, Code d'accès ou Mot de passe du propriétaire de la ressource. Vous pouvez sélectionner la façon dont vous souhaitez extraire les données d'identification utilisateur, en choisissant par exemple Formulaire HTML personnalisé. Pour plus d'informations, voir Configuration d'un fournisseur OAuth natif lors de l'utilisation d' API Manager ou Configuration d'un fournisseur OAuth natif lors de l'utilisation de Cloud Manager. Pour plus d'informations, voir Configuration d'un fournisseur OAuth natif. Cette rubrique décrit comment créer le formulaire HTML personnalisé pour l'extraction d'identité.

A propos de cette tâche

Durant les définitions OAuth à trois acteurs (flux Implicite, flux Mot de passe du propriétaire de la ressource et flux Code d'accès (Autorisation)), il est proposé à l'utilisateur un formulaire via lequel il peut se connecter au service fourni par l'API. Vous pouvez présenter un formulaire personnalisé ou par défaut. Votre formulaire personnalisé doit respecter certaines exigences.

Important: Les zones utilisées par IBM® API Connect pour injecter des informations dans votre formulaire comportent des noms de zone sensibles à la casse.

Procédure

Pour créer un formulaire de connexion personnalisé pour votre fournisseur OAuth natif, procédez comme suit :

API Connect analyse un document XHTML bien formé pour injecter des champs cachés.
Pour votre formulaire XHTML, définissez la méthode sur POST, le type de codage sur application/x-www-form-urlencodedet l'action sur authorize. Ajoutez les paramètres supplémentaires dont vous avez besoin.
Exemple :
```
<form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
```
Créez une zone de saisie de texte nommée username et créez une zone de saisie de mot de passe nommée password.
Ajoutez la ligne <EI-INJECT-HIDDEN-INPUT-FIELDS>. Ce troisième élément est une marque de réservation que API Connect remplace par des zones d'entrée pour compléter les données soumises par l'utilisateur.

Créez un bouton pour initier le processus de connexion.

Exemple :

<button id="login_button" type="submit" name="login" value="true">Log in</button>

Facultatif: ajoutez du texte qui s'affiche la première fois que l'utilisateur visite la page de connexion. Utilisez la balise <EI-LOGINFIRSTTIME> pour le texte que vous souhaitez afficher.
Facultatif: ajoutez le texte qui apparaît lorsque l'utilisateur est renvoyé à la page de connexion en cas d'échec de l'authentification. Utilisez la balise <EI-LOGINFAILED> pour le texte que vous souhaitez afficher.
Facultatif: Un message d'erreur s'affiche lorsqu'une erreur dans le formulaire personnalisé empêche l'utilisateur de l'afficher correctement. Utilisez la balise <EI-INTERNAL-CUSTOM-FORM-ERROR/> ; le texte du message est généré automatiquement. Vous devez détecter ces erreurs lors des tests afin d'éviter que ce message d'erreur ne s'affiche à l'intention de l'utilisateur.
Facultatif: Vous pouvez ajouter des éléments qui sont chargés à partir de sources externes, telles que des images ou JavaScript.

Insérer les espacements et les fonctions supplémentaires dont vous avez besoin. Les étapes 1 à 8 permettent d'obtenir un formulaire similaire à l'exemple suivant :

<html lang="en" xml:lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/></head>
  <body>
    <form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
      <h1>Please sign in</h1>
      <p>Username </p>
      <p style="text-indent: 0em;"><input type="text" name="username" required="required" /> </p>
      <p>Password </p>
      <p style="text-indent: 0em;"><input type="password" name="password" required="required" /> </p>
      <EI-INJECT-HIDDEN-INPUT-FIELDS/>
      <p style="text-indent: 2em;"> <button id="login_button" type="submit" name="login" value="true">Log in</button> </p>

      <EI-LOGINFIRSTTIME>
        <p>If you have forgotten your user name or password, contact your system administrator.</p>
      </EI-LOGINFIRSTTIME>

      <EI-LOGINFAILED>
        <p style="color: red">At least one of your entries does not match our records. 
          If you have forgotten your user name or password, contact your system administrator.</p>
      </EI-LOGINFAILED>

      <EI-INTERNAL-CUSTOM-FORM-ERROR/>

    </form>
  </body>
</html>

Rendez votre formulaire disponible à l'adresse URL de votre choix.
Si vous ne l'avez pas encore fait, configurez votre fournisseur OAuth natif afin qu'il utilise un formulaire HTML personnalisé pour l'extraction d'identité et fournissez l'URL à laquelle ce formulaire est disponible. Pour plus d'informations, voir Configuration d'un fournisseur OAuth natif lors de l'utilisation d' API Manager ou Configuration d'un fournisseur OAuth natif lors de l'utilisation de Cloud Manager.