[18.0.0.1 and later]

Configuración de un formulario de selección de medios de comunicación sociales personalizado para Liberty

Puede configurar su propio formulario de selección de medios de comunicación sociales en lugar de configurar el formulario de selección de medios de comunicación sociales predeterminado que Liberty proporciona. Puede elegir esta opción si se han configurado varios proveedores de medios de comunicación sociales para proteger una solicitud.

Acerca de esta tarea

El formulario de selección de medios de comunicación sociales permite a los usuarios elegir entre los proveedores de inicio de sesión social disponibles para autenticarse para una solicitud de recurso protegido. Con Liberty, puede especificar la ubicación de su propia página de selección si no desea utilizar la página predeterminada que Liberty proporciona.

Cualquier página de selección personalizada necesita recibir parámetros de solicitud HTTP y utilizar esos valores para construir una página web válida. Puede obtener información sobre parámetros específicos que se envían a la página de selección personalizada, los valores de parámetro y cómo debe utilizar los valores de parámetro la página de selección personalizada.

Procedimiento

  1. Configure el elemento socialLoginWebapp. El elemento socialLoginWebapp lo proporciona la característica socialLogin-1.0 y es un elemento de nivel superior en la configuración del servidor. Para obtener más información sobre el elemento socialLoginWebapp, consulte socialLoginWebapp - Aplicación web de inicio de sesión social.
  2. Configure el atributo socialMediaSelectionPageUrl del elemento socialLoginWebapp. Establezca el valor del atributo en el URL de la página de selección personalizada.

    Tenga en cuenta las siguientes directrices para el atributo en el URL:

    • El valor puede ser un URL relativo o absoluto.
    • Si elige un URL absoluto, el esquema debe ser http o https.
    • El URL debe contener sólo caracteres de vía de acceso de URI válidos y no puede contener una serie de consulta o fragmento, tal como define la RFC 3986.
  3. Cree la página de selección personalizada. Puede implementar la página de selección personalizada como desee, pero la página de selección personalizada necesita los datos de parámetro de solicitud que se le envían para asegurarse de que se visualizan las opciones adecuadas.

    Acepte y utilice los parámetros de solicitud siguiente:

    request_url
    El URL de solicitud de recurso protegido original, incluidos los parámetros de solicitud si están presentes. La página de selección personalizada debe devolver el proveedor de medios de comunicación sociales que el usuario selecciona a este URL. Por ejemplo, si la página de selección personalizada utiliza un formulario HTML para visualizar las opciones de medios de comunicación sociales, se debe establecer el atributo action del formulario en este URL. Además, los parámetros de solicitud deben incluirse como entradas ocultas en el formulario.
    request_method
    El método de solicitud HTTP de la solicitud de recurso protegido original. La página de selección personalizado debe utilizar el mismo método de solicitud HTTP para devolver el proveedor de medios de comunicación sociales que el usuario selecciona al URL de solicitud original.
    submit_param_name
    El nombre que debe utilizarse para el parámetro o la cabecera que especifica el ID de proveedor de medios de comunicación sociales seleccionado por el usuario. Cuando la página de selección personalizada devuelve el proveedor de medios de comunicación sociales que el usuario selecciona al URL de solicitud original, es necesario que un parámetro o una cabecera con este nombre especifique el ID de configuración del proveedor de medios de comunicación sociales.
    Por ejemplo, tenga en cuenta las variables siguientes:
    • El URL es https://www.example.com/protected/resource.
    • El ID de proveedor de medios de comunicación sociales que el usuario selecciona es 123456.
    • El valor submit_param_name es social_login_hint.

    La página de selección personalizada debe enviar la selección como un parámetro, por ejemplo https://www.example.com/protected/resource?social_login_hint=123456, o como una cabecera de solicitud. El nombre de cabecera de solicitud debe ser social_login_hint y el valor de cabecera debe ser 123456 cuando se devuelve al URL de solicitud original.

    La página de selección personalizada también debe incluir los parámetros que se han incluido en la solicitud original cuando se devuelve la selección de usuario al URL de solicitud original.

    configuration
    Un objeto JSON que contiene información sobre cada uno de los proveedores de medios de comunicación sociales que están configurados para autenticar la solicitud original.
    social-media
    La clave de nivel superior que se correlaciona con una matriz JSON de las configuraciones de medios de comunicación sociales. Cada configuración de medios de comunicación sociales es un objeto JSON con las entradas siguientes:
    • id: El ID de configuración de este proveedor de medios de comunicación sociales. Este es el valor que debe enviarse si el usuario elige este proveedor de medios de comunicación sociales.
    • nombre-visualización: El valor que debe mostrarse al usuario para representar este proveedor de medios de comunicación sociales. Este valor suele ser el nombre público del proveedor de medios de comunicación sociales, como Google o Facebook, aunque el valor puede modificarse para cualquier proveedor de medios de comunicación sociales en la configuración de servidor.
    • sitio web (opcional): El sitio web que está asociado con este proveedor de medios de comunicación sociales. Es posible que no se haya configurado un sitio web para cada proveedor de medios de comunicación sociales, por lo que puede que se omita este valor.
    Examine el fragmento de código de configuración siguiente:
    <socialLoginWebapp socialMediaSelectionPageUrl="/myApp/customSelection" />
    
    <twitterLogin consumerKey="..." consumerSecret="..." />
    <googleLogin clientId="..." clientSecret="..." />
    <oauth2Login id="customOAuthProvider" clientId="..." clientSecret="..." />

    Considere una solicitud de recurso protegido que se dirige a https://myhost.com/acme?product_id=123&product_name=anvil y utiliza el método de solicitud HTTP GET. Cuando se recibe esta solicitud, el servidor determina que varios proveedores protejan la solicitud y que se configure una página de selección personalizada. La solicitud se redirige a la página de selección personalizada similar al ejemplo siguiente:

    HTTP/1.1 302 Found
    Location: https://myhost.com/myApp/customSelection?
        request_url=https%3A%2F%2Fmyhost.com%2Facme%3Fproduct_id%3D123%26product_name%3Danvil
        &request_method=GET
        &submit_param_name=social_login_hint
        &configuration=%7B%22social-media%22%3A%5B%7B%22id%22%3A%2213579%22%2C%22display-name%22%3A%22Twitter%22%2C%22website%22%3A%22https%3A%2F%2Fwww.twitter.com%22%7D%2C%7B%22id%22%3A%2224680%22%2C%22display-name%22%3A%22Google%22%2C%22website%22%3A%22https%3A%2F%2Fwww.google.com%22%7D%2C%7B%22id%22%3A%22-123456%22%2C%22display-name%22%3A%22An%20OAuth%20Provider%22%7D%5D%7D

    Nota: En el ejemplo siguiente se visualiza el atributo configuration decodificado:

    {"social-media":
        [
            {"id":"13579","display-name":"Twitter","website":"https:\/\/www.twitter.com"},
            {"id":"24680","display-name":"Google","website":"https:\/\/www.google.com"},
            {"id":"-123456","display-name":"An OAuth Provider"}
        ]
    }

    Si la página de selección personalizada utiliza un formulario HTML para visualizar las opciones de medios de comunicación sociales, es posible que se implemente el formulario tal como está en el ejemplo siguiente:

    <form action="https://myhost.com/acme" method="GET">
    <button type="submit" name="social_login_hint" value="13579">Twitter</button>
    <button type="submit" name="social_login_hint" value="24680">Google</button>
    <button type="submit" name="social_login_hint" value="-123456">An OAuth Provider</button>
    <input type="hidden" name="product_id" value="123" />
    <input type="hidden" name="product_name" value="anvil" />
    </form>
    Nota: En el ejemplo anterior, los parámetros de solicitud que se incluían en la solicitud original se especificaban como entradas ocultas en el formulario para asegurarse de que se incluyen cuando se envía el formulario. Cuando implemente la página de selección personalizada, asegúrese de que los parámetros de la solicitud original están debidamente justificados e incluidos en la solicitud que se devuelve al URL de solicitud original cuando el usuario elige un proveedor de medios de comunicación sociales.

Icono que indica el tipo de tema Tema de tarea

Nombre de archivo: twlp_cust_social_form.html