Erstellen eines angepassten HTML-Berechtigungsformulars für die Benutzersicherheit

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

Vorbereitende Schritte

Die native OAuth-Provider-Konfiguration schließt die Benutzerberechtigung ein, wenn die Erteilungstypen "Implizit", "Zugriffscode" oder "Kennwort für Ressourceneigner" verwendet werden. Sie haben die Möglichkeit, auszuwählen, wie Anwendungsbenutzer berechtigt werden sollen. 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. In diesem Thema wird beschrieben, wie das angepasste HTML-Formular für die Berechtigung erstellt wird.

Informationen zu dieser Task

Während der dreiteiligen OAuth-Definition (impliziter Ablauf, Ressourceneigner- und Berechtigungscodeablauf) wird dem Benutzer ein Formular angezeigt, über das er einer Anwendung die Berechtigung zum Zugriff auf seine Daten für ihn über die API gewähren kann. 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 Berechtigungsformular für Ihren nativen OAuth-Provider zu erstellen:

  1. Erstellen Sie ein ordnungsgemäß formatiertes XHTML-Dokument. Dies wird von API Connect analysiert und transformiert, um verdeckte 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. Fügen Sie die Zeile hinzu. <AZ-INJECT-HIDDEN-INPUT-FIELDS/>. Diese Zeile ist ein Platzhalterzeichen, das API Connect durch Eingabefelder ersetzt, die für den Abschluss des OAuth-Prozesses erforderlich sind.
  4. Erstellen Sie zwei Schaltflächen mit dem folgenden Code, damit der Benutzer die Berechtigung gewähren oder verweigern kann. Bearbeiten Sie den Text nach Ihren Vorgaben.
    <button class="cancel" type="submit" name="approve" value="false">No Thanks</button>
    <button class="submit" type="submit" name="approve" value="true">Allow Access</button>
  5. Optional: Zeigen Sie eine Fehlernachricht an, wenn ein Fehler im benutzerdefinierten Formular verhindert, dass es dem Benutzer korrekt angezeigt wird. Verwenden Sie den Tag <AZ-INTERNAL-CUSTOM-FORM-ERROR/>; der Nachrichtentext wird automatisch generiert. Sie sollten diese Fehler während des Tests erkennen, um zu vermeiden, dass diese Fehlernachricht dem Endbenutzer angezeigt wird.
  6. Optional: Sie können dem Formular HTML-Elemente hinzufügen, die Features aus externen Quellen laden, wie z. B. Bilder oder JavaScript.
    Beispiel:<script src="http://www.example.com/example.js" />
  7. Fügen Sie nach Bedarf Abstände und zusätzliche Elemente ein. Die Ausführung der Schritte 1 bis zu 6 führt zu einem Formular ähnlich dem folgenden Beispiel:
    <html lang="en" xml:lang="en">
      <head><title>Request for permission</title></head>
      <body class="customconsent">
        <div>
          <div>
            <form method="post" enctype="application/x-www-form-urlencoded" action="authorize">
              <AZ-INJECT-HIDDEN-INPUT-FIELDS/>
              <p>Greeting..</p><DISPLAY-RESOURCE-OWNER/>
              <p>This app </p><OAUTH-APPLICATION-NAME/><p> would like to access your data.</p>
              <div>
                <button class="cancel" type="submit" name="approve" value="false">No Thanks</button>
                <button class="submit" type="submit" name="approve" value="true">Allow Access</button>
              </div>
            </form>
          </div>
          <AZ-INTERNAL-CUSTOM-FORM-ERROR/>
        </div>
      </body>
    </html>
  8. Machen Sie Ihr Formular unter einer URL Ihrer Wahl verfügbar.
  9. Wenn Sie dies noch nicht getan haben, konfigurieren Sie Ihren nativen OAuth-Provider so, dass ein angepasstes HTML-Formular zur Berechtigung für die Benutzersicherheit verwendet wird. Geben Sie die URL als Endpunkt an, an dem 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.