概要
3種類の認証フロー
Mobage JavaScript SDK を利用した Mobage Connect へログインは、以下のように3種類のフローがあります。
- 画面遷移せずにログインするHybrid フロー
- 【オプション】画面遷移してログインする Authorization Code Grant フロー
- 【オプション】Game Server を利用せずにログインする Client-Side フロー
Mobage JavaScript SDK を利用いただくのであれば、Proxy Server モデルでは実現できなかった 画面遷移せずにログインするフロー( Hybrid フロー) を採用いただくのが良いと思われますが、ゲームの提供状況に応じて上記のフローを組み合わせて利用することも出来ます。
それぞれのフローの特徴を以下にまとめます。
 |
|
画面遷移せずにログインするHybrid フロー
ゲーム画面からログイン認証画面に画面遷移するのではなく、ゲーム画面とは別の新しいWindowとしてログイン認証画面が開かれるフローです。基本的には Hybrid フローの採用を推奨します。
ユーザーがログイン認証画面(新しいWindow)での入力を終えて認可を受けると、ログイン認証画面のWindowが閉じることで、ユーザーは元のゲーム画面に戻ります。
【簡単なフローの解説】
① getConnectedStatus を実行し、ゲームへのログイン状態を確認します。
② Hybrid フローを実行すると、ログイン画面が別タブで開きます。
③ Mobage のログイン画面が表示されるので、ID / Password 入力、または新規会員登録を行います。
④ NBPF 認可画面が表示されます。「ゲーム開始」をタップするとゲームをインストールしたことになります。
⑤ getConnectedStatus を実行すると、ゲーム開始済みの状態になります。
【オプション】画面遷移してログインする Authorization Code Grant フロー
Game Server を利用した旧来通りの画面遷移を行うフローです。
ユーザーはゲーム画面からログイン認証画面にページ遷移し、ログイン認証画面での入力を終えて認可を受けると、元のゲーム画面へページ遷移することで戻ります。
| Authorization Code Grant フローをご利用いただく場合、Shell App SDK をご利用いただけません。 Shell App SDK をご利用いただく場合は、Hybrid フローをご利用ください。 |
【オプション】Game Server を利用せずにログインする Client-Side フロー
Game Server を利用しないカジュアルゲーム向けのフローです。
Game Server のログインセッション管理を行わないため、ユーザーデータの管理には Client-Side Storage を使います。
ログイン認証画面は、 画面遷移せずにログインするフロー と同じように、ゲーム画面とは別の新しい Window として開かれます。
ログインチュートリアルを進めるための事前準備
このチュートリアルでは、ログインサンプルコードを実装しながら、Mobage JavaScript SDKを使った処理を理解していきます。
ログインサンプルコードのダウンロード
Github からログインサンプルコードを clone します。
ログインサンプルコードのインストール先
このログインサンプルコードは PHP のファイル群から構成されていますので、PHP が実行されるディレクトリにコピーします。
このチュートリアルでは http://localhost/ にて動作確認可能なディレクトリにコピーします。
Mobage Developers Japan（デベロッパーサイト） にてアプリケーションを登録
Mobage Developers Japan（デベロッパーサイト）にて、アプリケーションの登録と設定を行います。
詳しくは、以下を確認して実行してください。
- アプリケーションを登録する
- JavaScript SDKのセットアップ
ここでは以下のように設定します。Setting
URI
Client URI
http://localhost/mobage-jssdk-sample-login Redirect URI
http://localhost/mobage-jssdk-sample-login/hybrid_flow/login_cb_post.php
http://localhost/mobage-jssdk-sample-login/authorization_code_grant_flow/login_cb_get.php
Client Origin URI
http://localhost
JSONWebTokenの検証用ライブラリの設置
公開鍵 X509 formatで以下のライブラリを利用します。
https://github.com/F21/jwt
以下のようにライブラリを配置します
SDK利用のための定数設定
Mobage JavaScript SDKをつかった全てのプログラムで必要となる各種設定について、
共通利用するようにまとめたプログラムが mobage-jssdk-sample-login/config.php です。
BASE_URIにはパスを含まない通信方式とホスト名を記載します。（"http://localhost"など）
なお、デフォルトディレクトリ以外にサンプルをおいた場合、こちらは適宜変更しましょう。
※後ほど、「BASE_URI . $_SERVER['PHP_SELF']」という表現を使いますので、その際にエラーが生じないようにします。
Mobage Developers Japan（デベロッパーサイト） で発行されたClient ID, Client Secretを記載します。
| Client Secretの値は、外部に漏洩しないように厳重に管理する必要があります。 万が一外部に漏洩した可能性がある場合には、Mobage Developers Japan（デベロッパーサイト） のお問い合わせ窓口からお問い合わせください。 |
Developers Siteであらかじめ登録したClient URI, Redirect URIを記載します。
（ここではHybridフローで利用するRedirectURI, Authentication Code Grant フローで利用するRedirect URIの2つを登録、記載します）
なお、デフォルトディレクトリ以外にサンプルをおいた場合、こちらは適宜変更しましょう。
変更履歴
- 2015/12/14
- Mobage 非会員向け開発の注意点 へのリンクを追加