Creación de un formulario de inicio de sesión HTML personalizado para la seguridad del usuario

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

Antes de empezar

La configuración del proveedor OAuth nativo incluye la extracción de identidad cuando se utilizan los tipos de otorgamiento de contraseña Implícito, Código de acceso o Propietario de recurso. Tiene la opción de seleccionar cómo extraer la credencial de usuario 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. Para obtener más información, consulte Configuración de un proveedor OAuth nativo. En este tema se describe cómo crear el formulario HTML personalizado para la extracción de identidades.

Acerca de esta tarea

Durante las definiciones OAuth de tres patas (flujo implícito, flujo de contraseña de propietario de recurso y flujo de código de acceso (autorización), al usuario se le presenta un formulario para iniciar sesión en el servicio proporcionado por la API. 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 inicio de sesión personalizado para el proveedor de OAuth nativo, realice los pasos siguientes:

API Connect analiza un documento XHTML bien formado 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">
```
Cree un campo de entrada de texto denominado username y cree un campo de entrada de contraseña denominado password.
Añada la línea <EI-INJECT-HIDDEN-INPUT-FIELDS>. Este tercer elemento es un marcador que API Connect sustituye por campos de entrada para complementar los datos enviados por el usuario.

Cree un botón para iniciar el proceso de inicio de sesión.

Por ejemplo:

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

Opcional: añada el texto que se visualiza la primera vez que el usuario visita la página de inicio de sesión. Utilice la etiqueta <EI-LOGINFIRSTTIME> para el texto que desea visualizar.
Opcional: añada el texto que aparece cuando el usuario vuelve a la página de inicio de sesión si no se puede autenticar. Utilice la etiqueta <EI-LOGINFAILED> para el texto que desea visualizar.
Opcional: Haga que se visualice un mensaje de error cuando un error en el formulario personalizado impida que se visualice al usuario correctamente. Utilice la etiqueta <EI-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 elementos que se cargan desde orígenes externos, como imágenes o JavaScript.

Inserte el espaciado y otras características según sea necesario. Completando los pasos del 1 al 8 se obtiene un formulario similar al del siguiente ejemplo:

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

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 nativo de OAuth para que utilice un formulario HTML personalizado para la extracción de identidad y proporcione la dirección URL en la 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.