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 „Konfigurieren eines nativen Anbieters für die „ OAuth “. 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 Feldnamen, die von IBM® API Connect zum Einfügen von Informationen in Ihr Formular verwendet werden, unterscheiden zwischen Groß- und Kleinschreibung.

Vorgehensweise

Führen Sie die folgenden Schritte aus, um ein angepasstes Anmeldeformular für Ihren nativen OAuth-Provider zu erstellen:
  1. API Connect analysiert ein wohlgeformtes XHTML-Dokument, um versteckte Felder einzufügen.
  2. 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">
  3. Erstellen Sie ein Texteingabefeld namens username und ein Kennworteingabefeld namens password.
  4. 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.
  5. Erstellen Sie eine Schaltfläche zum Einleiten des Anmeldeprozesses.
    Beispiel:
    <button id="login_button" type="submit" name="login" value="true">Log in</button>
  6. Optional: Fügen Sie einen Text hinzu, der angezeigt wird, wenn der Benutzer die Anmeldeseite zum ersten Mal aufruft. Verwende das Tag <EI-LOGINFIRSTTIME> für den Text, den du anzeigen möchtest.
  7. Optional: Fügen Sie einen Text hinzu, der angezeigt wird, wenn der Benutzer nach einer fehlgeschlagenen Authentifizierung zur Anmeldeseite zurückgeleitet wird. Verwende das Tag <EI-LOGINFAILED> für den Text, den du anzeigen möchtest.
  8. Optional: Lassen Sie eine Fehlermeldung anzeigen, wenn ein Fehler im benutzerdefinierten Formular verhindert, dass dieses dem Benutzer korrekt angezeigt wird. Verwenden Sie den Tag <EI-INTERNAL-CUSTOM-FORM-ERROR/>; der Nachrichtentext wird automatisch generiert. Sie sollten solche Fehler während der Tests erkennen, um zu verhindern, dass diese Fehlermeldung dem Benutzer angezeigt wird.
  9. Optional: Sie können Elemente hinzufügen, die aus externen Quellen geladen werden, wie beispielsweise Bilder oder JavaScript.
  10. Fügen Sie nach Bedarf Abstände und andere Funktionen ein. Wenn Sie die Schritte 1 bis 8 ausführen, erhalten Sie ein Formular, das dem folgenden Beispiel ähnelt:
    <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>
  11. Machen Sie Ihr Formular unter einer URL Ihrer Wahl verfügbar.
  12. 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.