Erstellen eines angepassten HTML-Anmeldeformulars für die Benutzersicherheit

Angepasste HTML-Formulare können für die Benutzersicherheit während der Phase zur Identitätsextraktion in OAuth erstellt werden.

Vorbereitende Schritte

Die native OAuth-Provider-Konfiguration schließt die Identitätsextraktion ein, wenn die Erteilungstypen "Implizit", "Zugriffscode" oder "Kennwort für Ressourceneigner" verwendet werden. Sie haben die Möglichkeit, auszuwählen, wie der Benutzerberechtigungsnachweis extrahiert werden soll. Eine der Optionen ist Angepasstes HTML-Formular. Weitere Informationen finden Sie unter Native OAuth-Provider konfigurieren bei Verwendung von API Manager oder unter Native OAuth-Provider konfigurieren bei Verwendung von Cloud Manager. Weitere Informationen finden Sie unter Native OAuth-Provider konfigurieren. In diesem Thema wird beschrieben, die das angepasste HTML-Formular für die Identitätsextraktion erstellt wird.

Informationen zu dieser Task

Während der dreiteiligen OAuth-Definition (impliziter Ablauf, Ressourceneigner- und Berechtigungscodeablauf) wird dem Benutzer ein Formular zum Anmelden beim Service über die API angezeigt. Sie können ein angepasstes Formular oder ein Standardformular präsentieren. Das angepasste Formular muss bestimmte Anforderungen erfüllen.

Wichtig: Die von IBM® API Connect zum Einfügen von Informationen in Ihr Formular verwendeten Felder weisen Feldnamen auf, bei denen die Groß-/Kleinschreibung beachtet werden muss.

Vorgehensweise

Führen Sie die folgenden Schritte aus, um ein angepasstes Anmeldeformular für Ihren nativen OAuth-Provider zu erstellen:

API Connect parst ein wohlgeformtes XHTML-Dokument, um versteckte Felder einzubauen.
Legen Sie für Ihr XHTML-Formular die Methode als POST, den Codierungstyp als application/x-www-form-urlencodedund die Aktion als authorizefest. Fügen Sie weitere Parameter hinzu, die für Sie erforderlich sind.
Beispiel:
```
<form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
```
Erstellen Sie ein Texteingabefeld namens username und ein Kennworteingabefeld namens password.
Fügen Sie die Zeile hinzu. <EI-INJECT-HIDDEN-INPUT-FIELDS>. Dieses dritte Element ist ein Platzhalter, der API Connect durch Eingabefelder ersetzt wird, um die vom Benutzer übergebenen Daten zu ergänzen.

Erstellen Sie eine Schaltfläche zum Einleiten des Anmeldeprozesses.

Beispiel:

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

Optional: Fügen Sie Text hinzu, der angezeigt wird, wenn der Benutzer die Anmeldeseite zum ersten Mal besucht. Verwenden Sie den Tag <EI-LOGINFIRSTTIME> für den Text, der angezeigt werden soll.
Optional: Fügen Sie Text hinzu, der angezeigt wird, wenn der Benutzer zur Anmeldeseite zurückkehrt, wenn die Authentifizierung fehlschlägt. Verwenden Sie den Tag <EI-LOGINFAILED> für den Text, der angezeigt werden soll.
Optional: Es wird eine Fehlernachricht angezeigt, wenn ein Fehler im benutzerdefinierten Formular verhindert, dass es dem Benutzer ordnungsgemäß angezeigt wird. Verwenden Sie den Tag <EI-INTERNAL-CUSTOM-FORM-ERROR/>; der Nachrichtentext wird automatisch generiert. Sie sollten solche Fehler beim Testen erkennen, um zu verhindern, dass dem Benutzer diese Fehlermeldung angezeigt wird.
Optional: Sie können Elemente hinzufügen, die aus externen Quellen wie Bildern oder JavaScriptgeladen wurden.

Fügen Sie nach Bedarf Abstände und andere Funktionen ein. Wenn Sie die Schritte 1 bis 8 ausführen, erhalten Sie ein Formular ähnlich dem folgenden Beispiel:

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

Machen Sie Ihr Formular unter einer URL Ihrer Wahl verfügbar.
Wenn Sie dies noch nicht getan haben, konfigurieren Sie Ihren nativen OAuth-Provider so, dass ein angepasstes HTML-Formular für die Identitätsextraktion verwendet wird, und geben Sie die URL an, unter der Ihr Formular verfügbar ist. Weitere Informationen finden Sie unter Nativen OAuth-Provider konfigurieren bei Verwendung von API Manager oder unter Nativen OAuth-Provider konfigurieren bei Verwendung von Cloud Manager.