デバイス用Facebookログイン

Facebook Portalについてヘルプが必要な場合は、Portalヘルプセンターをご覧ください。

ログインのためのデバイス用FacebookコードをスマートTV、カメラ、プリンタなどのデバイスに入力する場合は、デバイス用Facebookのページをご覧ください。

デバイス用Facebookログインを実装することにより、利用者が自分のFacebookアカウントでアプリやサービスにログインできるようにしてください。この機能により利用者は、スマートTV、デジタルフォトフレーム、IoT(Internet of Things)機器など、入力機能や表示機能が限られているデバイスにログインできるようになります。

デバイスログインでは、デバイスに英数字のコードが表示され、デスクトップPCやスマートフォンのウェブページでそのコードを入力するように求められます。アプリやサービスの利用者はそこでアクセス許可を付与できます。アプリがアクセス許可を取得すると、機器がアクセストークンを受け取ります。アプリはこのアクセストークンを使用してグラフAPIリクエストを実行し、利用者を特定したり、機器でのエクスペリエンスをカスタマイズするための情報を取得したりします。

Apple TV、Android TV、Fire TV用のTVアプリを開発している方は、tvOS用Facebook SDKまたはAndroid用Facebook SDKを使用してください。

このガイドでは、上記のSDKを使用せずにデバイスログインを手動で統合する方法について説明します。

ユーザーエクスペリエンス
デバイス用Facebookログインの実装
トラブルシューティング

操作性

このセクションでは、さまざまなデバイスやサービス向けに、わかりやすくて安全かつ一貫性のあるログイン操作の設計方法を説明します。

1.コールトゥアクション

最初に、サービスの利用者に対して、どのタイミングでFacebookでのログインや接続をリクエストするのかを検討します。開始直後にリクエストした方がよいデバイスもあれば、後の操作時にリクエストする方がよいデバイスもあります。

最適な操作性、一貫性、信頼性を確保するために、できるだけ公式のFacebookログインボタンに似たデザインのボタンを使用します。

ビジュアルデザインの観点では、次の設定が必要になります。

ボタンのラベルには「Facebookでログイン」または「Facebookアカウントとリンク」を使用する。
白色と、Facebookブランド公式の青色: #1877F2を使用する。
デバイスがグラフィック表示に対応している場合は、公式の「f」のロゴを組み込むこともできます。Facebookブランドガイドラインに従い、ロゴには白色とFacebookブルー(#1877F2)を使用します。

必要に応じて、「友達が何を視聴しているのかをチェックしよう」や「Facebookアルバムの写真を閲覧しましょう」など、ログインのメリットを説明します。

2.コードを表示する

利用者がコールトゥアクションをクリックすると、デバイスからFacebookのAPIに対して呼び出しが実行され、APIからコードが返されます。

インターフェイスに「次に、デスクトップまたはスマートフォンでfacebook.com/device (http://facebook.com/device)にアクセスし、このコードを入力してください」といったメッセージを表示して、利用者にウェブサイトにアクセスしてコードを入力する必要があることを伝えます。FacebookのDevice Login APIから返されたコード全体を表示します。コードの長さは6文字以上、12文字以下です。

[Close]ボタンまたは[Cancel]ボタンを追加しておくと、デバイスログインフローをキャンセルできるようになります。利用者がこのボタンを使用した場合は、最初のログイン画面に戻るように設定します。

画面にコードが表示されると、デバイスがデバイスログインAPIをポーリングし、利用者がアプリケーションを認証したかどうかを確認します。数分経っても利用者がコードを入力しない場合は、デバイスログインAPIからcode_expiredエラーが返されます。デバイスがこのエラーを受け取ると、ログインフローをキャンセルし、インターフェイスにコールトゥアクションを表示します。

URLに組み込まれたユーザーコードによりQRコードが生成される場合もあります。これを行うには、次のようにURLにuser_codeパラメーターを追加します。

https://www.facebook.com/device?user_code=<USER_CODE>

3.認証

デスクトップまたはモバイルブラウザでfacebook.com/deviceにアクセスすると、このフローが表示されます。最初に、コードを入力するためのテキストフィールドが表示されます。

コードを入力して[Continue]をクリックすると、アクセス許可を付与するかどうかを選択できるようになります。

ログインプロセスが正しく処理されると、次のような確認メッセージが表示されます。

4.正しくログインしたことを確認する

デバイスのインターフェイスには、確認メッセージも表示する必要があります。可能であれば、利用者の名前やFacebookプロフィール写真もあわせて表示します。

利用者が[Continue]ボタンをクリックするまで、確認メッセージをデバイスに表示しておきます。別の場所にあるコンピューターでコードを入力する場合などは、続行する前にデバイスで確認メッセージを再度見る時間が必要になるためです。

[Continue]がクリックされてから、カスタマイズされたサービスをデバイスに表示します。

5. ログアウトまたは解除

利用者にはデバイスからログアウトする機能を提供する必要があります。この場合、デバイスではFacebookとの接続が保存されないようにします。この機能を実装するには、デバイスのメニューに[Log out from Facebook]オプションや[Disconnect from Facebook]オプションを表示します。

このオプションが選択されたら、デバイスのメモリに格納されているアクセストークンを削除します。アクセストークンをデータベースやクラウドストレージに格納している場合は、そこからも削除する必要があります。アクセストークンを無効にするためのAPIを呼び出す必要はありません。

ログアウトしたら、デバイスにステップ1のコールトゥアクションを表示します。

デバイス用Facebookログインの実装

デバイス用Facebookログインは、インターネット経由で直接HTTP呼び出しを行うデバイス向けの機能です。デバイスでは次のようなAPI呼び出しや応答を利用できます。

アプリのダッシュボードを開き、[製品] > [Facebookログイン] > [設定] > [デバイスログイン]を[はい]に変更します。

2.コードを生成する

Connect to FacebookまたはLog in with Facebookのコールトゥアクションがクリックされたら、デバイスから次のようなHTTP POSTを実行します。

POST https://graph.facebook.com/v2.6/device/login
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       scope=<COMMA_SEPARATED_PERMISSION_NAMES> // e.g. public_profile,user_likes
       redirect_uri=<VALID_OAUTH_REDIRECT_URL>

scopeは任意のパラメーターで、ログインレビューでの使用が承認されたログインアクセス許可のコンマ区切りリストが含まれていなければなりません。

CLIENT_TOKENは[アプリ設定] > [詳細]で確認できます。アプリIDとパイプ|で区切って組み合わせてaccess_tokenの形式にします。

redirect_uriは任意のパラメーターです。URLを指定すると、利用者はログインした後にそのURLにリダイレクトされます。これにより、利用者はアプリのウェブサイトにログインして追加アカウントを管理できるようになります。このURLは[アプリ設定] > [詳細]で設定されている有効なOAuthリダイレクトURLである必要があります。応答は次の形式で行われます。

{
  "code": "92a2b2e351f2b0b3503b2de251132f47",
  "user_code": "A1NWZ9",
  "verification_uri": "https://www.facebook.com/device",
  "expires_in": 420,
  "interval": 5
}

応答の意味:

デバイスに「A1NWZ9」の文字列を表示します
利用者に「facebook.com/device」にアクセスしてこのコードを入力するよう指示します
コードの有効期限は420秒です。この時間が過ぎてもアクセストークンが届かない場合は、ログインフローをキャンセルします
デバイスは5秒おきにDevice Login APIをポーリングし、認証が成功したかどうかを確認します。

3.コードを表示する

デバイスにuser_codeを表示し、PCやスマートフォンからverification_uri (facebook.com/deviceなど)にアクセスするように利用者に指示します。「操作性」をご覧ください。

4.認証のポーリングを行う

デバイスでデバイスログインAPIをポーリングし、利用者がアプリを正しく認証したかどうかを確認します。ポーリングは、ステップ1の呼び出しに対する応答のintervalの間隔で実行します。この場合は5秒おきに実行されます。デバイスは次に対してポーリングします:

POST https://graph.facebook.com/v2.6/device/login_status
       access_token=<YOUR_APP_ID|CLIENT_TOKEN>
       code=<LONG_CODE_FROM_STEP_1> // e.g. "92a2b2e351f2b0b3503b2de251132f47"

このAPI呼び出しに対する応答は、利用者が認証フローのどこにいるかによって異なります。解析する特定のサブコードを含む、アクセストークンまたはエラーオブジェクトを受け取ります。

サブコードエラー	応答の例	意味
`N/A`	`{"access_token": "ABCD...", "expires_in" : 5183996 }`	利用者はデバイスを正しく認証しました。デバイスで`access_token`の値を使用して承認済みのAPI呼び出しを実行できます。
`1349174`	`{"error":{"message":"This request requires the user to take a pending action","code":31,"error_subcode":1349174,"error_user_title":"Device Login Authorization Pending","error_user_msg":"User has not yet authorized your application. Continue polling."}}`	利用者はアプリケーションをまだ認証していません。ステップ1の応答に指定した間隔で引き続きポーリングを行います。
`1349172`	`{"error":{"message":"User request limit reached","code":17,"error_subcode":1349172,"error_user_title":"OAuth Device Excessive Polling","error_user_msg":"Your device is polling too frequently. Space your requests with a minium interval of 5 seconds."}}`	デバイスのポーリング間隔が短すぎます。ポーリング間隔を広げて、最初のAPI呼び出しで指定した間隔に近づけます。
`1349152`	`{"error":{"message":"The session has expired""code":463,"error_subcode":1349152, "error_user_title":"Activation Code Expired","error_user_msg":"The code you entered has expired. Please go back to your device for a new code and try again."}}`	デバイスコードの有効期限が切れています。デバイスログインフローをキャンセルし、最初の画面に戻します。

5. 正しくログインしたことを確認する

利用者がアプリケーションを正しく認証すると、アクセストークンが送信されます。このアクセストークンはデバイス上に保持します。

利用者にログインプロセスが成功したことがわかるよう、[Continue]がクリックされるまでは、デバイスに利用者の名前と、可能な場合はプロフィール写真を表示します。利用者の名前とプロフィール写真を取得するには、デバイスで次の標準のグラフAPI呼び出しを実行してください。

GET https://graph.facebook.com/v2.3/me?
      fields=name,picture&amp;
      access_token=<USER_ACCESS_TOKEN>

応答は次の形式になります。

{
  "name": "John Doe", 
  "picture": {
    "data": {
      "is_silhouette": false, 
      "url": "https://fbcdn.akamaihd.net/hmac...ile.jpg"
    }
  }, 
  "id": "2023462875238472"
}

利用者がデバイスでContinueをクリックするまで、その利用者の名前とプロフィール写真を表示します。

6. アクセストークンを保存する

Graph APIに他のリクエストを行うには、デバイスにアクセストークンを保持する必要があります。

デバイスログインのアクセストークンの有効期間は最長60日ですが、状況に応じて無効にすることもできます。たとえば、利用者がFacebookパスワードを変更すると、アクセストークンは無効になります。

トークンが無効になったら、デバイスのメモリからトークンを削除する必要があります。デバイス利用者は、ステップ1のデバイスログインフローを再実行して、有効なトークンをあらためて取得する必要があります。

トラブルシューティング

HTTP経由でデバイスフローリクエストを行うことはできますか。
OAuth 2にはTLS/HTTPSが必要です。

GETメソッドを使用してデバイスフローリクエストを行うことはできますか。
デバイスフローリクエストはすべてPOSTリクエストで行う必要があります。

デバイスログインのアクセストークンを更新するにはどうすればよいですか。
デバイスログインのアクセストークンの有効期間は最長60日間です。

トークンが無効になったら、デバイスのメモリからトークンを削除する必要があります。デバイス利用者は、ステップ1に記載されているデバイスログインフローを再実行して、有効なトークンをあらためて取得する必要があります。

トークンの更新について詳しくは、「アクセストークン」をご覧ください。

POSTリクエストを行うと、Invalid API methodエラーとなります。どうしたらよいですか。
POSTリクエストを行い、次のようなエラーが発生する場合は、

{"error":{"message":"Invalid API method","type":"OAuthException","code":3}}

アプリでデバイスログインを有効にする必要があるかもしれません。

アプリのダッシュボードを開き、[製品] > [Facebookログイン] > [設定] > [デバイスログイン]を[はい]に設定します。

デバイスログインのアクセストークンが無効です。どうすればよいですか。
アクセストークンが無効な場合は、デバイスのメモリからトークンを削除して新しいトークンを取得してください。デバイス利用者は、ステップ1に記載されているデバイスログインフローを再実行して、有効なトークンをあらためて取得する必要があります。