[18.0.0.1 以及更新版本]

Liberty 配置自訂社群媒體選擇表單

您可以配置自己的社群媒體選擇表單,而不配置 Liberty 提供的預設社群媒體選擇表單。如果您配置了多個社群媒體提供者來保護要求,可選擇這個選項。

關於這項作業

社群媒體選擇表單可讓使用者從可用的社群登入提供者中挑選,以針對受保護的資源要求鑑別其本身。藉由 Liberty,如果您不想使用 Liberty 提供的預設頁面,可指定自己之選擇頁面的位置。

任何的自訂選擇頁面都需要接收 HTTP 要求參數,並使用那些值來建構有效的網頁。您可以瞭解傳送給自訂選擇頁面的特定參數、參數值,以及自訂選擇頁面應如何使用參數值。

程序

  1. 配置 socialLoginWebapp 元素。 socialLoginWebapp 元素由 socialLogin-1.0 特性提供,是伺服器配置中的一個最上層元素。如需 socialLoginWebapp 元素的相關資訊,請參閱 socialLoginWebapp - 社群登入 Web 應用程式
  2. 配置 socialLoginWebapp 元素的 socialMediaSelectionPageUrl 屬性。將屬性值設為您自訂選擇頁面的 URL。

    對於 URL 的屬性,請考量下列準則:

    • 值可以是相對或絕對 URL。
    • 如果您選擇絕對 URL,架構需要是 httphttps
    • 根據 RFC 3986 的定義,URL 只能包含有效的 URI 路徑字元,不能包含查詢字串或片段。
  3. 建立自訂選擇頁面。您可以實作你選擇的自訂選擇頁面,但是自訂選擇頁面需要使用傳送給它的要求參數,以確保顯示的選項適當。

    接受並使用下列的要求參數:

    request_url
    原始受保護資源要求的 URL,包括要求參數(若有的話)。自訂選擇頁面應會將使用者選取的社群媒體提供者,提交回給這個 URL。例如,如果自訂選擇頁面使用 HTML 表單來顯示社群媒體選項,則表單的 action 屬性應設為這個 URL。此外,要求參數應以隱藏輸入形式包含在表單中。
    request_method
    原始受保護資源要求的 HTTP 要求方法。自訂選擇頁面應使用相同的 HTTP 要求方法,將使用者選取的社群媒體提供者提交回給原始要求 URL。
    submit_param_name
    參數或標頭需使用的名稱,該參數或標頭用來指定使用者所選的社群媒體提供者 ID。當自訂選擇頁面將使用者選取的社群媒體提供者,提交回給原始要求 URL 時,具有此名稱的參數或標頭需要指定社群媒體提供者的配置 ID。
    例如,請考量下列變數:
    • URL 是 https://www.example.com/protected/resource
    • 使用者選取的社群媒體提供者 ID 是 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:這個社群媒體提供者的配置 ID。如果使用者選擇這個社群媒體提供者,這是必須提交的值。
    • display-name:應顯示給使用者以代表這個社群媒體提供者的值。此值通常是社群媒體提供者的公開名稱,例如 Google 或 Facebook,不過您可以在伺服器配置中,修改任何社群媒體提供者的這個值。
    • website(選用):與社群媒體提供者相關聯的網站。不見得每一個社群媒體提供者都有配置網站,因此此值可省略。
    請考量下列的配置 Snippet:
    <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