![[18.0.0.1 and later]](../ng_v18001plus.gif)
Liberty를 위한 사용자 정의 소셜 미디어 선택 양식 구성
Liberty에서 제공하는 기본 소셜 미디어 선택 양식을 구성하는 대신 사용자 자신의 소셜 미디어 선택 양식을 구성할 수 있습니다. 다중 소셜 미디어 제공자가 요청을 보호하도록 구성된 경우 이 옵션을 선택할 수 있습니다.
이 태스크 정보
소셜 미디어 선택 양식에서 사용자는 보호된 자원 요청에 대해 자신을 인증하기 위해 사용 가능한 소셜 로그인 제공자들 중에서 선택할 수 있습니다. Liberty에서 사용자는 Liberty가 제공하는 기본 페이지를 사용하지 않을 경우 자신이 선택한 페이지의 위치를 지정할 수 있습니다.
사용자 정의 선택 페이지는 HTTP 요청 매개변수를 수신하고 이 값을 사용하여 올바른 웹 페이지를 구성해야 합니다. 사용자 정의 선택 페이지에 전송된 특정 매개변수, 매개변수 값 및 사용자 정의 선택 페이지에서 매개변수 값을 사용하는 방법에 대해 학습할 수 있습니다.
프로시저
- socialLoginWebapp 요소를 구성하십시오. socialLoginWebapp 요소는 socialLogin-1.0 기능에서 제공하며 서버 구성에서 최상위 레벨 요소입니다.socialLoginWebapp 요소에 대한 자세한 정보는 socialLoginWebapp - 소셜 로그인 웹 애플리케이션의 내용을 참조하십시오.
- socialLoginWebapp 요소의 socialMediaSelectionPageUrl 속성을 구성하십시오. 속성 값을 사용자 정의 선택 페이지의 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 (선택적): 이 소셜 미디어 제공자와 연관된 웹 사이트입니다. 웹 사이트는 모든 소셜 미디어 제공자에 대해 구성되지 않을 수도 있으므로 이 값이 생략될 수 있습니다.
<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