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 können auswählen, wie die Benutzer der Anwendung autorisiert werden sollen, und eine der Möglichkeiten ist das benutzerdefinierte 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

In den dreistufigen OAuth-Definitionen (Impliziter Fluss, Passwortfluss des Ressourcenbesitzers und Codefluss für den Zugriff (Autorisierung)) erteilt der Benutzer einer Anwendung über ein Autorisierungsformular die Erlaubnis, auf seine Daten zuzugreifen. 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. Diese wird von API Connect geparst, um versteckte Felder einzubauen.
  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 Platzhalter, den 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 solche Fehler beim Testen erkennen, um zu verhindern, dass dem Benutzer diese Fehlermeldung angezeigt wird.
  6. Optional: Sie können dem Formular HTML-Elemente hinzufügen, die Funktionen aus externen Quellen laden, 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. Wenn Sie die Schritte 1 bis 6 ausführen, erhalten Sie ein 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.