Creación de un formulario de autorización HTML personalizado para la seguridad de usuario

Se pueden crear formularios HTML personalizados para la seguridad del usuario durante la etapa de autorización en OAuth.

Antes de empezar

La configuración del proveedor OAuth nativo incluye la autorización de usuario cuando se utilizan los tipos de otorgamiento de contraseña Implícito, Código de acceso o Propietario de recurso. Puede seleccionar cómo autorizar a los usuarios de la aplicación y una de las opciones es Formulario HTML personalizado. Para obtener más información, consulte Configuración de un proveedor OAuth nativo cuando se utiliza API Manager o Configuración de un proveedor OAuth nativo cuando se utiliza Cloud Manager. Este tema describe cómo crear el formulario HTML personalizado para la autorización.

Acerca de esta tarea

En las definiciones OAuth de tres fases (flujo implícito, flujo de contraseña del propietario del recurso y flujo de código de acceso (autorización), el usuario concede permiso a una aplicación para acceder a sus datos a través de un formulario de autorización. Puede presentar un formulario personalizado o un formulario predeterminado. El formulario personalizado debe cumplir determinados requisitos.

Importante: Los campos utilizados por IBM® API Connect para inyectar información en el formulario tienen nombres de campo sensibles a mayúsculas y minúsculas.

Procedimiento

Para crear un formulario de autorización personalizado para el proveedor de OAuth nativo, realice los pasos siguientes:

Cree un documento XHTML bien formado. Esto es analizado por API Connect para inyectar campos ocultos.
Para el formulario XHTML, establezca el método como POST, el tipo de codificación como application/x-www-form-urlencodedy la acción como authorize. Añada cualquier otro parámetro que necesite.
Por ejemplo:
```
<form method="POST" enctype="application/x-www-form-urlencoded" action="authorize">
```
Añada la línea <AZ-INJECT-HIDDEN-INPUT-FIELDS/>. Esta línea es un marcador de posición que API Connect sustituye por los campos de entrada necesarios para completar el proceso OAuth.

Cree dos botones con el código siguiente para que el usuario pueda otorgar o denegar el permiso. Edite el texto para que se ajuste a sus preferencias.

<button class="cancel" type="submit" name="approve" value="false">No Thanks</button>
<button class="submit" type="submit" name="approve" value="true">Allow Access</button>

Opcional: Muestra un mensaje de error cuando un error en el formulario personalizado impide que se muestre al usuario correctamente. Utilice la etiqueta <AZ-INTERNAL-CUSTOM-FORM-ERROR/>; el texto del mensaje se genera automáticamente. Debe detectar estos errores durante las pruebas para evitar que se muestre este mensaje de error al usuario.
Opcional: Puede añadir al formulario elementos HTML que carguen características de fuentes externas, como imágenes o JavaScript.
Por ejemplo: <script src="http://www.example.com/example.js" />

Inserte el espaciado y los elementos adicionales que necesite. Completando los pasos del 1 al 6 se obtiene un formulario similar al del siguiente ejemplo:

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

Ponga su formulario a disposición en un e URL o de su elección.
Si aún no lo ha hecho, configure su proveedor de OAuth nativo para utilizar un formulario HTML personalizado para la autorización de la seguridad del usuario. Proporcione URL como el punto final en el que su formulario está disponible. Para obtener más información, consulte Configuración de un proveedor OAuth nativo cuando se utiliza API Manager o Configuración de un proveedor OAuth nativo cuando se utiliza Cloud Manager.