![[18.0.0.1 and later]](../ng_v18001plus.gif)
Liberty のカスタム・ソーシャル・メディア選択フォームの構成
Liberty が提供するデフォルトのソーシャル・メディア選択フォームを構成する代わりに、独自のソーシャル・メディア選択フォームを構成できます。要求を保護するように構成されたソーシャル・メディア・プロバイダーが複数ある場合、このオプションを選択できます。
このタスクについて
ソーシャル・メディア選択フォームを使用すると、ユーザーは、使用可能なソーシャル・ログイン・プロバイダーの中から選択を行って、保護リソース要求に対してユーザー自身を認証することができます。Liberty では、Liberty が提供するデフォルト・ページを使用したくない場合、独自の選択ページの場所を指定できます。
カスタム選択ページは、HTTP 要求パラメーターを受け取り、それらの値を使用して有効な Web ページを作成する必要があります。カスタム選択ページに送信される具体的なパラメーター、パラメーター値、および、カスタム選択ページでパラメーター値がどのように使用される必要があるのかについて、以下に説明します。
手順
- socialLoginWebapp エレメントを構成します。socialLoginWebapp エレメントは、socialLogin-1.0 フィーチャーによって提供され、サーバー構成内の最上位エレメントです。socialLoginWebapp エレメントについて詳しくは、socialLoginWebapp - ソーシャル・ログイン Web アプリケーションを参照してください。
- socialLoginWebapp エレメントの socialMediaSelectionPageUrl 属性を構成します。この属性の値として、カスタム選択ページの URL を設定します。
この属性に URL を設定する際、以下のガイドラインを考慮してください。
- 値は相対 URL でも絶対 URL でもかまいません。
- 絶対 URL を選択する場合、スキームは http または https のいずれかである必要があります。
- RFC 3986 で定義されているとおり、URL は、有効な URI パス文字のみを含んでいる必要があり、照会ストリングまたはフラグメントを含むことはできません。
- カスタム選択ページを作成します。任意のカスタム選択ページを実装できますが、適切なオプションが確実に表示されるためには、カスタム選択ページに要求パラメーター・データが送信される必要があります。
以下の要求パラメーターを受け入れ、使用します。
- request_url
- 元の保護リソース要求 URL であり、要求パラメーターがある場合はそれらも含みます。 カスタム選択ページは、ユーザーが選択するソーシャル・メディア・プロバイダーをこの URL に返送する必要があります。例えば、カスタム選択ページで、ソーシャル・メディア・オプションを表示するために HTML フォームを使用する場合、そのフォームの action 属性をこの URL に設定する必要があります。 さらに、要求パラメーターが非表示入力としてフォーム内に組み込まれる必要があります。
- request_method
- 元の保護リソース要求の HTTP 要求メソッド。カスタム選択ページは、ユーザーが選択するソーシャル・メディア・プロバイダーを元の要求 URL に返送するのに、同じ HTTP 要求メソッドを使用する必要があります。
- 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 (オプション): このソーシャル・メディア・プロバイダーと関連付けられた 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 に返送される要求に確実に組み込まれるようにしてください。
![[17.0.0.2 and later]](../ng_v17002plus.gif)

ファイル名: twlp_cust_social_form.html