概要

3種類の認証フロー

Mobage JavaScript SDK を利用した Mobage Connect へログインは、以下のように3種類のフローがあります。

Mobage JavaScript SDK を利用いただくのであれば、Proxy Server モデルでは実現できなかった 画面遷移せずにログインするフロー( Hybrid フロー) を採用いただくのが良いと思われますが、ゲームの提供状況に応じて上記のフローを組み合わせて利用することも出来ます。
それぞれのフローの特徴を以下にまとめます。

  • ログインタイミングの設定と実装にあたっての注意はこちらをご確認ください。
  • ログインのタイミングごとのメリット・デメリットについてはこちらをご確認ください。
  • ログインタイミングをずらす場合には、必ず Mobage 非会員向け開発の注意点 もご確認ください。
  • ログイン時には NBPF SPWeb、NBPF Shell App ともに「かんたん会員」が流入してきます。「かんたん会員」については、こちら をご確認ください。

画面遷移せずにログインする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(デベロッパーサイト)にて、アプリケーションの登録と設定を行います。

詳しくは、以下を確認して実行してください。

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-jssdk-sample-login/config.php

Mobage Developers Japan(デベロッパーサイト) で発行されたClient ID, Client Secretを記載します。

mobage-jssdk-sample-login/config.php
Client Secretの値は、外部に漏洩しないように厳重に管理する必要があります。
万が一外部に漏洩した可能性がある場合には、Mobage Developers Japan(デベロッパーサイト) のお問い合わせ窓口からお問い合わせください。

 

Developers Siteであらかじめ登録したClient URI, Redirect URIを記載します。
(ここではHybridフローで利用するRedirectURI, Authentication Code Grant フローで利用するRedirect URIの2つを登録、記載します)
なお、デフォルトディレクトリ以外にサンプルをおいた場合、こちらは適宜変更しましょう。

mobage-jssdk-sample-login/config.php

 
 

変更履歴

  • 2015/12/14
    • Mobage 非会員向け開発の注意点 へのリンクを追加

PREVIOUS

ログイン

NEXT

画面遷移せずにログイン(Hybridフロー)