概要

Game Server を必要としないカジュアルゲーム向けに、PHPなどのスクリプト言語は利用せず、HTMLファイルとJavaScript のみで実装できるフローが Client-Side フロー です。
 
Hybrid フローやAuthorization Code Grant フローのように、Game Server でログインセッションの管理を行わないので、ユーザーデータの管理にはClient-Side Storageを使います。
このチュートリアルでは、SessionStorageを利用して開発します。
 

作成するファイル一覧

このチュートリアルで作成するファイルは下記になります。

チュートリアルをはじめる前に

このチュートリアルは、以下のチュートリアルを終わらせている前提で進めます。
以下のチュートリアルを完了していない場合は、先にそちらを完了させましょう。

• テストアカウントの作成
• アプリケーションを登録する
• JavaScript SDKのセットアップ
• ログイン
   

開発のステップ

このチュートリアルでは、以下の3ステップで進めます。
 

• Login Session を確認して state 値を発行する
• Mobage Connect へのログイン状態とゲームのインストール状態を確認する
• ログイン/インストールボタンを表示し実行する
• Login Session を保存する

なお。Client-Side フローのシーケンス図は下記になります。

Login Session を確認して state 値を発行する

Client-Side フローでは、Client-Side Storage を利用してログインセッション管理を行います。
Client-Side Storage を確認して ログイン状態でないことがわかれば、新規に state 値を発行します。

mobage.init() を呼び出す準備

mobage.init() に渡したい設定値（Client ID, Redirect URI）をhtmlに記載しておきます。
ここでは、以下の YOUR_CLIENT_ID と YOUR_REDIRECT_URI を自身の設定値に書き換えます。

Mobage JS SDK の読み込み

Mobage JS SDKを読み込みつつ、ログイン処理ロジックが書かれたJavaScriptのプログラムを読み込みます。

mobageReady イベントの呼び出し

非同期に実行されるJavsScript SDKの読み込みが完了すると、"mobageReady"イベントが呼び出されます。

Login Session の確認

Session Storage を利用して、ログインセッションを管理する機能を開発します。
ログインセッションがあるかどうか、下記のように問い合わせます。

新規に state 値を発行

ログインセッションが無い場合、"state"値(8文字以上256文字以内の文字列)を生成します。

Mobage Connect へのログイン状態とゲームのインストール状態を確認する

Mobage JS SDK の mobage.oauth.getConnectedStatus メソッドを使って、Mobage Connect へのログイン状態 と、ゲームのインストール状態 を確認します。

この処理のシーケンス図が下記になります。
 

mobage.init() の呼び出し

Mobage Developers Japan（デベロッパーサイト）での設定値を利用してmobage.init()メソッドを呼び出し、Mobage JS SDKの初期化を行います。
このメソッドはMobage JS SDKの機能を使うために必ず呼び出す必要があります。

mobage.oauth.getConnectedStatus() メソッドの呼び出し

ログイン状態やインストール状態を確認するためにmobage.oauth.getConnectedStatusメソッドを実行します。

このメソッドを実行した際に新たなwindowが表示されることはありません。 ユーザがMobage Connectにログインしていない場合には、即座にエラーレスポンスがcallbackに渡されます。 ユーザがClientアプリをインストールしていない場合にも、即座にエラーレスポンスがcallbackに渡されます。

mobage.oauth.getConnectedStatus() メソッドのレスポンス

mobage.oauth.getConnectedStatus() メソッドのレスポンスは、ユーザーの状態によって下記のように変化します。

result レスポンスが返って来た場合

この場合には、Redirect Endpointに対してcode, state, session_stateを送信します。
また、その後の mobage.oauth.connect メソッドを呼び出さないように、ログインボタンを非表示にします。

error レスポンスが返って来た場合

この場合は、その後の mobage.oauth.connect メソッドを呼び出せるようにログインボタンを表示します。
 

ログイン/インストールボタンを表示し実行する

「Mobage Connect にログインしていない」、もしくは「ゲームをインストールしていない」のどちらかに当たる場合に、mobage.oauth.connect()メソッドを呼び出します。mobage.oauth.connect() メソッドを呼び出すと、ユーザーにログインフォーム、もしくはゲームインストールの同意画面が表示されます。ユーザーが必要な情報を入力して、Callback関数が実行されたら、Login Session を保存します。

以上の処理のシーケンス図が下記になります。
 

ログイン/インストールボタンを設定

ユーザをログイン状態かつインストール状態にするために、インストールボタンを設定します。mobageログインボタンを定義し、ボタンの'click'イベントによって mobage.oauth.connect メソッドが実行されるようにします。 mobage.oauth.connect メソッドが成功した場合、Login Sessionとして Session Storage に保存します。

このconnect() メソッドの呼び出しはクリックイベントなどのブラウザによって開始されたイベントハンドラの中で呼び出すようにしましょう。 ユーザーアクションを伴わずスクリプトによって呼び出すと（非同期処理等）、ブラウザのポップアップ抑止機能によってwindow が開かない場合があります。

Login Session を保存する

Mobage Connect へのログイン状態、ゲームのインストール状態が確認できたら、Session Storage に Login Session を保存します。
 

session_state を Login Session として保存

Session Storage の中に格納する session_state は、シングルログアウト連携の際に利用します。

動作確認

では、開発したプログラムを Game Server に配置します。

 
上記のように配置できたら、http://localhost/mobage-jssdk-sample-login/client_flow/login_client.htmlにアクセスしてください。
以下のようにログインボタンが表示されます。

 
ログインボタンを押すと、以下のようにログインフォームが新しいWindowにて表示されます。
（もしくは、ゲームへのインストール同意確認画面がオーバーレイで表示されます。）

 
必要事項を入力してMobage Connect へのログインが成功すると、People API で取得した Mobage ユーザーニックネームが表示されます

開発したコード

このチュートリアルで開発したコードは Github から clone できます。