[18.0.0.1 and later]

Liberty 配置定制社交媒体选择表单

您可以配置自己的社交媒体选择表单,而不是配置 Liberty 提供的缺省社交媒体选择表单。如果已配置多个社交媒体提供者来保护请求,那么可以选择此选项。

关于此任务

社交媒体选择表单允许用户在可用的社交登录提供者之间进行选择,以针对受保护的资源请求认证自己。借助 Liberty,您可以在不想使用 Liberty 提供的缺省选择页面时指定自己的页面的位置。

任何定制选择页面都需要接收 HTTP 请求参数,并使用这些值来构造有效的网页。您可以了解发送至定制选择页面的特定参数、这些参数的值以及定制选择页面应如何使用这些参数值。

过程

  1. 配置 socialLoginWebapp 元素。socialLoginWebapp 元素由 socialLogin-1.0 功能部件提供,它是服务器配置中的顶级元素。有关 socialLoginWebapp 元素的更多信息,请参阅 socialLoginWebapp - 社交登录 Web 应用程序
  2. 配置 socialLoginWebapp 元素的 socialMediaSelectionPageUrl 属性。请将此属性的值设置为定制选择页面的 URL。

    将此属性设置为 URL 时,请考虑下列准则:

    • 值可以是相对或绝对 URL。
    • 如果您选择绝对 URL,那么方案必须为 httphttps
    • 此 URL 必须仅包含有效的 URI 路径字符,不得包含查询字符串或片段,因为这是由 RFC 3986 定义的。
  3. 创建定制选择页面。您可以自行选择实现定制选择页面,但定制选择页面需要发送至它的请求参数数据,以确保显示相应的选项。

    接受并使用下列请求参数:

    request_url
    这是原始受保护资源请求 URL,其中包括请求参数(如果存在)。定制选择页面应将用户选择的社交媒体提供者提交回此 URL。例如,如果定制选择页面使用 HTML 表单来显示社交媒体选项,那么该表单的 action 属性应设置为此 URL。此外,请求参数应作为隐藏输入包括在表单中。
    request_method
    这是原始受保护资源请求的 HTTP 请求方法。定制选择页面应使用相同的 HTTP 请求方法将用户选择的社交媒体提供者提交回原始请求 URL。
    submit_param_name
    这是需要用于指定用户所选择的社交媒体提供者标识的参数或头的名称。当定制选择页面将用户选择的社交媒体提供者提交回原始请求 URL 时,需要由具有此名称的参数或头指定社交媒体提供者的配置标识。
    例如,请考虑下列变量:
    • URL 为 https://www.example.com/protected/resource
    • 用户选择的社交媒体提供者标识为 123456
    • submit_param_name 值为 social_login_hint

    定制选择页面必须将选择内容作为参数(例如 https://www.example.com/protected/resource?social_login_hint=123456)或作为请求头提交。当您提交回原始请求 URL 时,请求头名称必须为 social_login_hint,头值必须为 123456

    当您将用户选择提交回原始请求 URL 时,定制选择页面还应包括原始请求中包含的所有参数。

    configuration
    这是一个 JSON 对象,它包含已配置为认证原始请求的每个社交媒体提供者的相关信息。
    social-media
    这是映射到社交媒体配置的 JSON 数组的顶级键。每个社交媒体配置都是一个具有下列条目的 JSON 对象:
    • id:此社交媒体提供者的配置标识。这是在用户选择此社交媒体提供者时必须提交的值。
    • display-name:应该向用户显示的值,用于表示此社交媒体提供者。此值通常是社交媒体提供者的公用名称(例如 Google 或 Facebook),然而可在服务器配置中针对任何社交媒体提供者修改此值。
    • website(可选):与此社交媒体提供者相关联的 Web 站点。可能没有为每个社交媒体提供者配置 Web 站点,因此可省略此值。
    请考虑以下配置片段:
    <socialLoginWebapp socialMediaSelectionPageUrl="/myApp/customSelection" />
    
    <twitterLogin consumerKey="..." consumerSecret="..." />
    <googleLogin clientId="..." clientSecret="..." />
    <oauth2Login id="customOAuthProvider" clientId="..." clientSecret="..." />

    请考虑这样一个受保护的资源请求:它被定向至 https://myhost.com/acme?product_id=123&product_name=anvil 并使用 GET HTTP 请求方法。接收到此请求时,服务器确定多个提供者保护此请求,并确定配置了定制选择页面。此请求被重定向至类似于以下示例的定制选择页面:

    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

    注意:以下示例中显示已解码的 configuration 属性:

    {"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"}
        ]
    }

    如果定制选择页面使用 HTML 表单来显示社交媒体选项,那么可能会像以下示例中那样实现该表单:

    <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>
    注: 在上一个示例中,将原始请求中包含的请求参数作为隐藏输入指定在表单中,以确保在提交表单时包括这些参数。当您实现定制选择页面时,请确保正确解释来自原始请求的请求参数,并将它们包括在用户选择社交媒体提供者时提交回原始请求 URL 的请求中。

用于指示主题类型的图标 任务主题

文件名:twlp_cust_social_form.html