Facebookのゲームをするためのログイン

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

Facebook.comでプレイするゲームをビルドする際には、Facebook.com上のiframeコンテナ内部で動作するウェブアプリをビルドすることになります。Facebookはログインしたプレイヤーにしかゲームを動作させないため、認証の対象となるのはFacebookにログインしたユーザーであることが保証されます。

それで、ゲームの進行を同期したり維持したりするのに一貫したIDを利用するため、また、ゲーマーたちがプレイするゲームに期待するソーシャル機能を実装するため、常にFacebookログインのサポートをゲームの中に構築するようにしてください。ゲームが複数のプラットフォーム上に存在する場合、その同じIDを使うことによって、プレイヤーそれぞれが使う複数のデバイスでゲーム状態を同期させることができます。

このドキュメントでは、Facebookログインを使うためのさまざまなアプローチと、ゲームでどのようにうまく活用できるかについておおまかな説明を行います。

認証判断のための情報源

プレイヤーの初回認証にはいくつかの方法があります。また、初回認証の後に本人確認する手法もいくつかあります。

アプリセンター認証

プレイヤーがアプリセンターの[今すぐプレイ]ボタンによりゲームを起動すると、アプリダッシュボードの[アプリ詳細]タブで設定されているアクセス許可の特定のセットをそのアプリに対して承認することになります。

アプリセンターの[今すぐプレイ]ボタン

アプリセンター経由のプレイヤーの割合が高い場合、これが認証パスとして一般的です。アプリセンターからスムーズにログインできるようにするため、アプリセンターで付与されるアクセス許可セットが、Facebook.comとモバイル機器上のゲームが与えられると期待しているアクセス許可と一致するように設定してください。

詳しくは、アプリセンターガイドをご覧ください。

別のプラットフォームでの認証

モバイルプラットフォーム上に存在するゲームの場合、モバイルバージョンでFacebookログインがサポートされているなら、Facebook.comでそのゲームをプレイしに来た時点で一部のプレイヤーはすでに認証されている可能性があります。Facebook.com上のゲームバージョンで与えられることを期待するアクセス許可を、モバイルゲームと同じにすることは重要です。

ログインステータスの検出

上記のとおり、プレイヤーは、過去にそのゲームを(過去にFacebook上で、またはアプリセンター経由で、またはそのゲームのモバイルバージョンによりプレイすることによって)認証したことがあるかどうかに応じて、ログイン状態か、またはログインしていない状態でゲームにやって来ます。

プレイヤーが過去にゲームにログインしたことがあるかどうかを検出するには、次の2つの方法があります。

クライアントサイド、JS SDKのFB.getLoginStatus()メソッドを使用する
サーバーサイド、signed_requestをデコードする

JavaScript用Facebook SDKの使用

ドキュメントの読み込み時にFB.getLoginStatus()を呼び出すことにより、プレイヤーがゲームを読み込んだ時点ですぐにログインできるようにすることができす。その場合、FB.api()を使って、プレイヤーのユーザーIDを指定してプレイヤーのゲーム状態にアクセスしたり、プレイヤーの名前、プロフィール写真、友達リストなど、パーソナライゼーション用の情報を取得したりすることができます。

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // the user is logged in and has authenticated your
    // app, and response.authResponse supplies
    // the user's ID, a valid access token, a signed
    // request, and the time the access token 
    // and signed request each expire
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    // but has not authenticated your app
  } else {
    // the user isn't logged in to Facebook.
  }
 });

プレイヤーがログインしていない場合は、FB.login(...)を呼び出して、ゲームの初期画面の上に、ログインダイアログのモーダル版を表示できます。このダイアログのコールバックは、FB.getLoginStatusの呼び出しで使うのと同じメソッド呼び出しでなければなりません

署名付きリクエストの使用

ゲームがFacebook.comに読み込まれると、指定されたFacebookウェブゲームURLに対してHTTP POSTリクエストが行われます。このPOSTリクエストにはいくつかのパラメーターが含まれています。その中には、認証のためのsigned_requestパラメーターがあります。

signed_requestはbase64urlでエンコードされており、OAuth 2.0の仕様に基づいてapp secretのHMACバージョンで署名されます。

つまり、アプリにPOSTリクエストされた場合、そのパラメーターを使う前に解析して検証する必要があるということです。これは、次の3つのステップで実行します。

署名付きリクエストを「.」文字で2つの部分に区切ります(例: 238fsdfsd.oijdoifjsidf899)
最初の部分(エンコードされた署名)をbase64urlからデコードします
2つ目の部分(ペイロード)をbase64urlからデコードし、生成されるJSONオブジェクトをデコードします

これらの手順は、最新のどのプログラミング言語でも可能です。以下はPHPの例です。

function parse_signed_request($signed_request) {
  list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

  $secret = "appsecret"; // Use your app secret here

  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  // confirm the signature
  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }

  return $data;
}

function base64_url_decode($input) {
  return base64_decode(strtr($input, '-_', '+/'));
}

これにより、次のようなJSONオブジェクトが生成されます。

{
   "oauth_token": "{user-access-token}",
   "algorithm": "HMAC-SHA256",
   "expires": 1291840400,
   "issued_at": 1291836800,
   "user_id": "218471"
}

signed_requestパラメーターを解析することにより、現在のプレイヤーが該当ゲームをすでに認証しているかどうかを検出できます。認証済みの場合、signed_requestにプレイヤーのユーザーIDが含まれており、それを使うことによって、パーソナライゼーション情報やゲーム状態を取得できます。このsigned_requestをアクセストークンと交換し、それを使うことによって、グラフAPIにアクセスしてより深いパーソナライゼーションを行えます。

初回認証

プレイヤーが初めてゲームに参加した場合、ログインダイアログを表示して、認証を行うよう促してください。Javascript SDKによるクライアントサイドログインは、認証のためのおすすめのログインフローです。開発者はログインダイアログの起動前、またダイアログキャンセル後に、シンプルなゲームグラフィックを表示することができます。

ログイン時にカスタム背景を使うHappy Acres

JS SDK経由のクライアントサイドログイン

Facebook上のゲームに固有のこととして、ログインダイアログのJavaScriptバージョンは、iframe内でasyncモードでトリガーされます。したがってそれは、別個のポップアップブラウザーウィンドウではなく、残りのゲームコンテンツの上にモーダルポップアップとして表示されるということです。

これは重要な点です。この場合、ダイアログはUIイベントの一部ではなくコードから直接呼び出すことができるので、ブラウザーのポップアップ防止検出手段によってブロックされることがないからです。

その結果、FB.getLoginStatus()を使って現在のプレイヤーが以前にそのゲームを認証していたかどうかを確認し、未認証なら、ログインボタンを表示せずに、FB.login()を呼び出してゲームコンテンツの上にログインダイアログをすぐに表示できます。

以下に例を示します。

// Place following code after FB.init call.

function onLogin(response) {
  if (response.status == 'connected') {
    FB.api('/me?fields=first_name', function(data) {
      var welcomeBlock = document.getElementById('fb-welcome');
      welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
    });
  }
}

FB.getLoginStatus(function(response) {
  // Check login status on load, and if the user is
  // already logged in, go directly to the welcome message.
  if (response.status == 'connected') {
    onLogin(response);
  } else {
    // Otherwise, show Login dialog first.
    FB.login(function(response) {
      onLogin(response);
    }, {scope: 'email'});
  }
});

次のステップ

どんな方法でログインするとしても、ゲーム内で実際に身分確認を実施することにより、ゲームのプレイ情報の保持や配信に役立つ優れたソーシャル機能を構築できます。

ログインはそのような機能の多くを実現するための第一歩であり、それは以下の製品を使って構築することができます。

ゲームでFacebookログインを効果的に活用するためのヒントについては。Facebook上のゲームについてのベストプラクティスをご覧ください。