외부 웹 사이트 자동 로그인

외부 웹 사이트에서 자동 로그인 은 유저가 게임 외부의 웹 사이트에 로그인했을 때 크로스플레이 런처로 PC 게임을 실행하면 별도의 로그인 단계를 거치지 않아도 게임에 자동으로 로그인할 수 있는 기능입니다.

기본 동작 플로우 및 구현 방법¶

외부 웹 사이트에서 크로스플레이 런처를 통해 게임에 자동 로그인하기까지 기본 동작 플로우는 아래의 순서와 같습니다.

하이브 커뮤니티와 같은 '게임 외부에서 자동 로그인'을 지원하는 웹 사이트에 로그인
로그인 완료 후, 외부 웹 사이트 자동 로그인을 위한 토큰 발급 API를 사용하여 토큰 발급
로그인 한 웹 사이트에서 게임 실행 을 클릭하여 크로스플레이 런처로 PC 게임 실행
해당 PC에서 실행 중인 크로스플레이 런처를 통해 2.에서 발급 받은 토큰을 게임에 전달
게임 내에서 자동 로그인 수행

위 동작 플로우를 바탕으로 게임 개발사에서는 크게 아래의 두 단계를 거쳐 외부 웹 사이트에서 자동 로그인 을 구현할 수 있습니다.

웹 로그인 API를 사용하여 토큰 발급
크로스플레이 런처를 통해 게임에 토큰 전달

사전 준비 사항¶

외부 웹 사이트에서 크로스플레이 런처를 통한 자동 로그인 을 구현하기에 앞서 아래의 사항을 준비해야 합니다.

웹 로그인 API를 사용할 수 있는 통신 환경
크로스플레이 런처를 적용한 게임 서비스 환경
SDK v4 Windows.24.4.0 이상 적용
- 외부 웹 사이트에서 자동 로그인 기능은 SDK Windows v4.24.0.0 이상 버전이 적용된 게임에서만 동작합니다.

Note

만약 웹 사이트에 로그인 하지 않았다면, 게임 실행 시 자동 로그인을 위한 토큰(web_idp_token)을 전달하지 않으며 이 경우 자동 로그인은 수행되지 않습니다.
자세한 사항은 아래 크로스플레이 런처 실행 시 자동 로그인을 위한 토큰 전달에서 확인 가능합니다.

1. 웹 로그인 API를 사용하여 토큰 발급¶

유저가 외부 웹 사이트에 로그인을 완료하면, 개발사에서는 유저가 로그인한 웹 사이트에서 게임에 자동 로그인하는 데 필요한 토큰을 발급 받도록 구현합니다.

웹 로그인 API에서 제공하는 세 가지 API를 아래 순서대로 요청하여 web_idp_token 토큰을 응답으로 받습니다.

로그인 페이지 호출 API 요청
- 요청 후 응답으로 state 값을 획득합니다.
로그인 검증 및 유저 정보 조회 API 요청
- 요청 후 응답으로 enc_idp 값을 획득합니다.
Warning
- enc_idp는 고유한 값이기 때문에 보안상 외부에 노출되지 않도록 유의하세요. (API 호출 시, 서버 to 서버 통신을 필수로 적용하세요.)
외부 웹 사이트에서 자동 로그인을 위한 토큰 발급 API 요청
- 요청 후 응답으로 web_idp_token 토큰을 발급받습니다.
Note
- web_idp_token 토큰은 이후 크로스플레이 런처를 통해 게임에 전달됩니다.
- web_idp_token 토큰은 일회성 값으로, 게임 실행 시마다 새로 발급 받아야 합니다.

2. 크로스플레이 런처를 통해 게임에 토큰 전달¶

유저가 로그인한 외부 웹 사이트에서 크로스플레이 런처로 PC 게임을 실행 시, 개발사에서는 앞 단계에서 발급 받은 토큰 web_idp_token을 인코딩 및 게임에 전달하여 자동 로그인이 수행되도록 구현합니다.

토큰을 게임에 전달하여 자동 로그인을 완료하는 과정은 아래와 같습니다.

발급 받은 토큰 인코딩
인코딩한 토큰을 포함하는 자동 로그인용 URI 구성
- 게임 자동 설치 URI 혹은 게임 실행 URI에 인코딩한 토큰을 포함
자동 로그인용 URI를 포함하는 JavaScript 코드 구현
유저가 크로스플레이 런처로 PC 게임을 실행하면 JavaScript 코드에서 구성한 URI로 크로스플레이 런처 및 게임 실행, 자동 로그인 완료

Warning

외부 웹 사이트에 로그인한 상태가 아니라면 게임 실행 URI에 web_idp_token을 전달할 수 없으며, 결과적으로 자동 로그인은 수행되지 않습니다.

위 과정과 관련하여, 크로스플레이 런처로 게임을 서비스하기 위한 구현 가이드를 참고하세요.

앱 서비스를 위한 웹페이지 구성 > 크로스플레이 런처와 앱을 함께 설치
앱 서비스를 위한 웹페이지 구성 > 크로스플레이 런처 실행
크로스플레이 런처 실행을 위한 앱 서비스를 위한 웹페이지 구성 > JavaScript 코드 구현과 실행

자동 로그인용 URI 구성¶

자동 로그인을 위한 URI은 유저 PC 내 크로스플레이 런처 설치 여부에 따라 기존에 다르게 획득한 URI에 인코딩한 토큰을 포함하는 방식으로 구성합니다.

크로스플레이 런처가 미설치된 경우¶

게임 자동 설치 URI에 인코딩한 토큰을 포합합니다.

크로스플레이가 설치되지 않은 상태에서 유저가 크로스플레이 런처 설치 파일 다운로드 버튼을 클릭하면 구현한 JavaScript 코드를 통해 게임 자동 설치 URI 를 사용자 PC 클립보드에 복사 후 설치된 크로스플레이 런처가 게임 자동 설치 URI 를 탐색하여 해당 게임을 PC에 설치 및 실행합니다. 따라서 크로스플레이 런처가 미설치된 경우에는 크로스플레이 런처가 탐색할 게임 자동 설치 URI 에 인코딩한 토큰을 포함해야 합니다.

크로스플레이 런처가 미설치된 경우의 구현 방법에 대한 자세한 내용은 크로스플레이 런처 구현 가이드를 참고하세요.

인코딩한 토큰을 포함한 게임 자동 설치 URI 예시는 아래와 같습니다.

hivelauncher:?app_id={로그인한 게임의 AppID 인코딩 결과}&start_point=9&web_idp_token={web_idp_toekn 인코딩 결과} {좌측 URI 전체를 sha1 암호화한 값}

# Example
hivelauncher:?app_id=com.com2us.hivesdk.windows.microsoftstore.global.normal&start_point=9&web_idp_token=eb5605514b44d7ae07f93d3921f202d0a7810eda8c343e42877b23a8a2bb5675462ae3f44c95ec59b0bdaa2ff8b28c4a971acd9439e98ef29f1c7204c230f782 9e93d5396ce59f5eaf3c3ee24a1ccda3e008364b

크로스플레이 런처가 설치된 경우¶

게임 실행 URI에 인코딩한 토큰을 포합합니다.

크로스플레이 런처가 설치된 상태에서 유저가 게임 실행 버튼을 클릭하면 기존에 구현한 JavaScript 코드를 통해 게임 실행 URI 로 크로스플레이 런처 실행 후 크로스플레이 런처가 게임 자동으로 설치 및 실행합니다. 따라서 크로스플레이 런처가 설치된 경우에는 게임을 바로 설치 및 실행 시 필요한 게임 실행 URI 에 인코딩한 토큰을 포함해야 합니다.

크로스플레이 런처가 설치된 경우의 구현 방법에 대한 자세한 내용은 크로스플레이 런처 구현 가이드를 참고하세요.

인코딩한 토큰을 포함한 게임 실행 URI 예시는 아래와 같습니다.

hivelauncher:?app_id={로그인한 게임의 AppID 인코딩 결과}&start_point=9&web_idp_token={web_idp_toekn 인코딩 결과}

# Example
hivelauncher:?app_id=com.com2us.hivesdk.windows.microsoftstore.global.normal&start_point=9&web_idp_token=8549cd7cf3ae7d8cab788abbb3bbf4c2306e38b7d442f02214b492c98f1c05bfff7466a64ad1a3704c962d1aec0268874830eac11455c0c562aed3c0c3505a1f

크로스플레이 런처 실행 Javascript 코드 구현¶

'크로스플레이 런처 실행 Javascript 코드'에서는 앞에서 구성한 URI로 크로스플레이 런처 및 게임을 실행합니다. 이 때, 웹 로그인 API로 발급받은 web_idp_token 토큰을 게임에 전달하게 되므로 크로스플레이 런처로 실행한 게임에 자동 로그인을 완료할 수 있습니다.

크로스플레이 런처 실행 Javascript 코드 구현 예시는 아래와 같습니다.

     // 로그인한 게임의 AppID를 세팅합니다.
     var appid = "로그인한 게임의 AppId 세팀함";
     // 런처 설치 시, 게임 실행을 위한 URI를 세팅합니다. (자동 로그인 미적용)
     var url_play_game = "hivelauncher:?app_id=" + encodeURIComponent(appid) + "&start_point=9";

     // 런처 미설치 시, 클립보드에 복사할 URI를 세팅합니다. (자동 로그인 미적용, 아직 sha1 암호화 미적용)
     var url_play_clipbord = "hivelauncher:?app_id=" + encodeURIComponent(appid) + "&start_point=9";

     // web_idp_token 획득을 위해 API 호출 로직을 별도로 구현합니다.
     // 이 때 ajax로 내부 경로를 호출하고, 서버단에서 API를 호출해야합니다. (보안상 필수)
     // API에 대한 정보는 위의 “1. 웹 로그인 API를 사용하여 토큰 발급” 하위의 API 호출에서 확인 가능합니다.
     // API 호출 결과 획득한 web_idp_token 값을 세팅합니다.
     var web_idp_token = "API를 통해 획득 한 토큰 값 세팅함";

     // 실제 web_idp_token 을 성공적으로 획득했을 때 URI에 적용합니다.
     if(web_idp_token != ""){
          // 런처 설치 시, 게임 실행을 위한 URI에 자동 로그인을 위한 토큰 값을 추가합니다.
          url_play_game += ("&web_idp_token=" + encodeURIComponent(web_idp_token));

          // 런처 미설치 시, 클립보드에 복사할 URI에 자동 로그인을 위한 토큰 값을 추가합니다.
          url_play_clipbord += ("&web_idp_token=" + encodeURIComponent(web_idp_token));
          // 한 칸 띄고, sha1 암호화 함수 별도 구현 및 적용합니다.
          url_play_clipbord += (" " + sha1(url_play_clipbord));
     }

     // 해당 함수의 정보는 위의 “크로스플레이 런처로 게임을 서비스하기 위한 구현 가이드”에서 확인 가능합니다.
     window.customProtocolCheck(
          url_play_game, // 위에서 세팅한 게임 실행을 위한 URI를 전달합니다.
          function (e) {
               // 크로스플레이 런처 실행 실패 시 처리를 추가합니다.

               // ex. 필요한 동작 예시입니다.
               // 클립보드에 복사하는 함수는 별도 구현 및 적용합니다
               copyClipboard(url_play_clipbord);.
          },
          function (e) {
               // 크로스플레이 런처 실행 성공 시 필요한 동작이 있다면 추가합니다.
          },
          2500, function (e) {
               // 크로스플레이 런처 실행 요청 후 2500ms 이상 응답이 없을 때 처리를 추가합니다.
          }
     );

Javascript 코드 구현 및 실행과 관련하여 자세한 내용은 크로스플레이 런처 구현 가이드를 참고하세요.