外部ウェブサイトの自動ログイン
外部ウェブサイトの自動ログイン は、外部ウェブサイト(例えば、Hive Community)にログインしたユーザーが、Crossplay Launcherを介してPCゲームを起動し、自動的にログインできるようにします—追加のログイン手順なしで。
基本的な流れと実装¶
外部ウェブサイトからのクロスプレイランチャーを介してゲームに自動的にログインする 基本的な操作フローは以下の通りです:
- ゲームの外からの「自動ログイン」をサポートするウェブサイト(Hive Communityなど)にログインします。
- ログインを完了したら、外部ウェブサイトへの自動ログインのためのトークン発行APIを使用してトークンを発行します。
- ログインしたウェブサイトで**ゲームを実行**をクリックして、クロスプレイランチャーを使用してPCゲームを起動します。
- 2.で発行されたトークンをPC上で動作しているクロスプレイランチャー経由でゲームに転送します。
- ゲーム内で自動ログインを実行します。
上記の操作フローに基づいて、ゲーム開発者は次の2つのステップを経て**外部ウェブサイトからの自動ログイン**を実装できます。
前提条件¶
**外部ウェブサイトでのクロスプレイランチャーによる自動ログイン**を実装する前に、以下の準備をする必要があります。
- Web Login APIを使用できる通信環境
- Crossplay Launcherを適用したゲームサービス環境
- SDK v4 Windows.24.4.0以上
- 外部ウェブサイトでの自動ログイン機能は、SDK Windows v4.24.0.0以上を適用したゲームでのみ機能します。
Note
- ウェブサイトにログインしていない場合、ゲームが起動されるときに自動ログインのためのトークン(web_idp_token)が渡されず、この場合自動ログインは行われません。
-
- 詳細については、クロスプレイランチャー起動時の自動ログインのためのトークンの渡し方を参照してください。
1. ウェブログインAPIを使用してトークンを取得する¶
ユーザーが外部ウェブサイトへのログインを完了すると、開発者はユーザーがログインしたウェブサイトからゲームへの自動ログインに必要なトークン発行を実装します。
以下の順序でウェブログイン APIが提供する3つのAPIをリクエストし、レスポンスとしてweb_idp_token
トークンを受け取ります。
-
ログインページを呼び出す APIリクエスト
- リクエスト後にレスポンスとして
state
値を取得します。
- リクエスト後にレスポンスとして
-
ログインを確認し、ユーザー情報を取得する APIリクエスト
- リクエスト後に
enc_idp
値をレスポンスとして取得します。
Warning
enc_idp
はユニークな値であるため、セキュリティ上の理由から外部に公開しないよう注意してください。(APIを呼び出す際は、サーバー間通信が必須です。)
- リクエスト後に
-
外部ウェブサイトからの自動ログインのためのトークンを発行する APIリクエスト
- リクエストの後、
web_idp_token
トークンがレスポンスとして発行されます。
Note
web_idp_token
トークンは、その後、クロスプレイランチャーを通じてゲームに渡されます。web_idp_token
トークンは一回限りの値であり、ゲームを実行するたびに新たに発行を受ける必要があります。
- リクエストの後、
2. クロスプレイランチャーを通じてゲームにトークンを渡す¶
ユーザーが外部ウェブサイトからログインした状態でCrossplay Launcherを使用してPCゲームを実行すると、開発者は前のステップで発行されたトークンweb_idp_token
をエンコードしてゲームに渡し、自動ログインを有効にします。
ゲームにトークンを渡して自動ログインを完了するプロセスは次のとおりです:
- 発行されたトークンをエンコードする
- 自動ログインのためのURIを設定する エンコードされたトークンを含めて
- ゲームの自動インストールURIまたはゲーム実行URIにエンコードされたトークンを含める
- 自動ログインのためのURIを含むJavaScriptコードを実装する
- ユーザーがクロスプレイランチャーでPCゲームを実行すると、クロスプレイランチャーとゲーム実行はJavaScriptコードで設定されたURIで完了し、自動ログインが完了する
Warning
外部ウェブサイトにログインしていない場合、ゲーム実行URIにweb_idp_token
を渡すことはできず、その結果、自動ログインは行われません。
上記のプロセスについては、クロスプレイランチャーを使用したゲームのサービスに関する実装ガイドを参照してください。
- アプリサービスのウェブページを設定 > クロスプレイランチャーとアプリを一緒にインストール
- アプリサービスのウェブページを設定 > クロスプレイランチャーを実行
- アプリサービスのウェブページを設定 > クロスプレイランチャーを実行するためのJavaScriptコードを実装して実行
自動ログインのためのURIを設定する¶
自動ログインのURIは、ユーザーのPCにCrossplay Launcherがインストールされているかどうかに応じて、以前に取得したURIにエンコードされたトークンを含めることで構成されます。
クロスプレイランチャーがインストールされていない場合¶
ゲームの自動インストールURIにエンコードされたトークンを含めてください。
ユーザーがCrossplayがインストールされていない状態でCrossplay Launcherインストーラーのダウンロードボタンをクリックすると、実装されたJavaScriptコードが**ゲーム自動インストールURI**をユーザーのPCのクリップボードにコピーします。そして、インストールされたCrossplay Launcherは**ゲーム自動インストールURI**を検索して、PCでゲームをインストールおよび実行します。したがって、Crossplay Launcherがインストールされていない場合は、Crossplay Launcherが検索する**ゲーム自動インストールURI**にエンコードされたトークンを含める必要があります。
クロスプレイランチャーがインストールされていない場合の実装方法についての詳細は、クロスプレイランチャー実装ガイドを参照してください。
ここに**ゲーム自動インストールURI**のエンコードされたトークンの例があります:
hivelauncher:?app_id={AppID encoding result of the logged-in game}&start_point=9&web_idp_token={web_idp_toekn encoding result} {The entire left URI is sha1 encrypted}
# 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={Encoded AppID of the logged-in game}&start_point=9&web_idp_token={Encoded 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コード実装 の例は以下の通りです。
// Set the AppID of the logged-in game.
var appid = "로그인한 게임의 AppId 세팀함";
// When installing the launcher, set the URI for running the game.
var url_play_game = "hivelauncher:?app_id=" + encodeURIComponent(appid) + "&start_point=9";
// When not installing the launcher, set the URI to copy to the clipboard.
var url_play_clipbord = "hivelauncher:?app_id=" + encodeURIComponent(appid) + "&start_point=9";
// Implement the API call logic separately to obtain web_idp_token.
// At this time, call the internal path with ajax and call the API on the server side. (Required for security)
// Information about the API can be found in the API call under “1. Issuing tokens using the web login API” above.
// Set the web_idp_token value obtained as a result of the API call.
var web_idp_token = "API를 통해 획득 한 토큰 값 세팅함";
// Apply the web_idp_token to the URI when it is successfully obtained.
if(web_idp_token != ""){
// When the launcher is installed, add the token value for automatic login to the URI for running the game.
url_play_game += ("&web_idp_token=" + encodeURIComponent(web_idp_token));
// When the launcher is not installed, add the token value for automatic login to the URI to be copied to the clipboard.
url_play_clipbord += ("&web_idp_token=" + encodeURIComponent(web_idp_token));
// Separately implement and apply the sha1 encryption function with a space.
url_play_clipbord += (" " + sha1(url_play_clipbord));
}
// Information on this function can be found in the “Implementation Guide for Serving Games with Crossplay Launcher” above.
window.customProtocolCheck(
url_play_game, // Pass the URI for running the game set above.
function (e) {
// Add processing when Crossplay Launcher execution fails.
// ex. This is an example of necessary actions.
// Separately implement and apply the function to copy to the clipboard.
copyClipboard(url_play_clipbord);.
},
function (e) {
// Add any necessary actions when Crossplay Launcher execution succeeds.
},
2500, function (e) {
// Add processing when there is no response for more than 2500ms after Crossplay Launcher execution request.
);
Javascriptコードの実装と実行に関する詳細については、クロスプレイランチャー実装ガイドを参照してください。