雑記まみむメモ

雑記、メモ、技法、話題の騒動などを紹介します。

Facebook OAuth認証について

参考資料

Facebookログイン機能をWEBサイトにSDK等使わないで実装の流れ

facebookのoauthを使ってみる(emailも取得)

FacebookとSNS連携!SDKを使わずにOAuth2でアクセストークン取得する/PHP

Facebookにてサイト情報などの設定

facebookアプリの登録

  • まずfacebookアカウントを作成します。
  • Facebook for developersを開く。
    • 右上の[My Apps]を選び、[Add a New App]を選択。
    • ウェブサイトを選択
    • アプリの名前を入力。日本語でもOK。
    • テストバージョン、連絡先メールアドレス、カテゴリを指定する。
  • アプリのトップページから「Facebookログイン」の設定を選択
  • プラットフォームをウェブで選択
  • サイトのURLを入力→[save]→[次へ]
  • 左メニューより「設定」を押下
  • 有効なOAuthリダイレクトURIを設定にコールバック用のURLを設定
  • client_id = アプリID
  • client_secret = app secret
    • アプリ設定→ベーシック→app secret表示

OAuth認証

リクエストパラメータ

GET https://www.facebook.com/dialog/oauth
param key value
client_id [クライアントID]
state [CSRF攻撃対策用の値]
response_type code
redirect_uri [コールバックURL]
scope ads_read,ads_management,business_management

CSRF攻撃対策用の値について

セッションIDをHashした値を使用するなど。ここらへんを参考。 OAuth 2.0のstateとredirect_uriとOpenID ConnectのnonceとID Tokenについて 大抵CSRF対策のトークンを作る仕組みはプログラムやライブラリに用意されているのでそれを使うのが良いか。

リクエストサンプル

# ブラウザで開く
https://www.facebook.com/dialog/oauth?client_id=2301467433495594&state=463b3841278b9bad69890d7f22ca246e&response_type=code&redirect_uri=https://hogehoge.com/oauth/facebook/callback.php&scope=ads_read,ads_management,business_management

OAuth認証 callback

GET https://hogehoge.com/oauth/facebook/callback.php?code=AQD6vr3EZ4NC169LwiPb7tydPdEyhCj6pJbFw_TwS3JH8Qnt9vvOhQGmKP5Ji2uzpUyeUjx9sbN5_rm5I8YQHyZPqsNdqpS0D4nYU-5qjgBcAc2Pj6I7rKknKiVPGT9hCGTOhu0noTIdgUYmyf21OrR7oGdJyBUHy4iOvwPx1QIOzESuekzZ0iGKjhGvRJJWruyCnjLxYDSOLK36kXJ40B83uXR8jhzEdafeMPpLZp1z8bNDBxi5sXzyRwalqFAC1Kyzct8eoNEfbalK70xRfJp9dQ0qvqBWUDXbJrqM2RjNwNRCS3kmM8k5PK7OOljcnonpKFAJkC-sb_q9-lPQtzxK&state=463b3841278b9bad69890d7f22ca246e#=

レスポンスボディ

param key value
code [Authorization Code]
state [CSRF攻撃対策用の値]

レスポンスサンプル

ユーザによるアクセス許可

{
    "code": "AQD6vr3EZ4NC169LwiPb7tydPdEyhCj6pJbFw_TwS3JH8Qnt9vvOhQGmKP5Ji2uzpUyeUjx9sbN5_rm5I8YQHyZPqsNdqpS0D4nYU-5qjgBcAc2Pj6I7rKknKiVPGT9hCGTOhu0noTIdgUYmyf21OrR7oGdJyBUHy4iOvwPx1QIOzESuekzZ0iGKjhGvRJJWruyCnjLxYDSOLK36kXJ40B83uXR8jhzEdafeMPpLZp1z8bNDBxi5sXzyRwalqFAC1Kyzct8eoNEfbalK70xRfJp9dQ0qvqBWUDXbJrqM2RjNwNRCS3kmM8k5PK7OOljcnonpKFAJkC-sb_q9-lPQtzxK",
    "state": "463b3841278b9bad69890d7f22ca246e"
}

ユーザによるアクセス拒否

{
    "error": "access_denied",
    "error_code": "200",
    "error_description": "Permissions error",
    "error_reason": "user_denied"
}

access_token

リクエストパラメータ

GET https://graph.facebook.com/oauth/access_token
param key value
client_id [クライアントID]
client_secret [クライアントシークレット]
redirect_uri [コールバックURL]
code [Authorization Code]

リクエストサンプル

curl \
--data-urlencode "client_id=2301467425495594" \
--data-urlencode "redirect_uri=https://hogehoge.com/oauth/facebook/callback.php" \
--data-urlencode "client_secret=ebb67f4t66f28dc3f9049161f70e3c37" \
--data-urlencode "code=AQAw1Ma4uzQTtw_L7L2xKOOk2bky2sI_vxE1j4wu1Vu0ldX7At7PLS7ga9Y2V3hVRdHWEYIbmxnHCktSf0E1F3Kx7FAYtxOnfKxXONY44QkkIFEk5dYypjeaqbEAmwr3jZOJGgaTc59gFC8ArjXibNmuep5eWZGmPwmANMzHeHLz_jkHYWkrf8pSTpThsHmPSCnY-RK0P3U0RtNi0qILTqxqRU173Iih2TSCtmATYmybOZmbZS0cMFUCIuDE1KtCYciO5y5sBRLWBbZ7JE53iho5nZMn7EQgEA7dFYBjQy-2Mm2opi9YF82zyCZ9DE0TA1TwQ44Ua4tSqSCvSjTqAhVc" \
https://graph.facebook.com/oauth/access_token


https://graph.facebook.com/oauth/access_token?client_id=2301467425495594&redirect_uri=https://hogehoge.com/oauth/facebook/callback.php&client_secret=ebb67f4366f58dc3f9049161f70e3c37&code=AQBdEGmgcolanpr31aLfvUvOKR8xggDLUZVSVpAN1BrVWpkLMc-KLmgCUfoPQaeRCuwHxL9So6emDtFu32drGt6EplaDPwgcqshoevHaTIVCh0aSDliUoYEniEWZsoERLm4KWzyEb1Dr1KdapAIr4Q4jnsfY1Xs_cXacpeu8e7PukkJoRdPuV-48vpUukhUx9fI4xlrmqJ0j5rD-b777BwY-oSM4mqZy95ReHp67pXNFKih-RdU4E4K6-QDvOEeFIsWFDNTw8evPauQOZC3uIZrnigxStF1qmGFf1BTmV90I8pzrC5YGUAJFdrHlJaQ2wS52tKCWqTAsTqoz69kI8zL9

レスポンスボディ

param key value
access_token [アクセストークン]
token_type Bearer
expires_in [有効期限(秒)]

レスポンスサンプル

{
    "access_token": "EAAgtLCTV7CoBANdX54CkTDrDn3m4ruvMCWhXDS9Pyt4q0765azeSZBwKcXmCDDdanBIVactyiZATUN6PlepXviYIFgiq90PPYof4E5S4GaBblRZBbLJt3UFHep5AEM02stWytWBo7vIMRQ1YCV4PuiEtoeifba7gxNF4HlH7QZDZD",
    "token_type": "bearer",
    "expires_in": 5180931
}

ユーザ情報取得

リクエストパラメータ

GET https://graph.facebook.com/me
param key value
access_token [アクセストークン]

リクエストサンプル

curl https://graph.facebook.com/me?access_token=EAAgtLCTV7CoBADVK2EjjLX9kFJeVe4o24Sa0XwFlBdXecClHUQWZCqwG8v747S08ZCTfLPy2IIIz4OVJEEbvZBmLM2nyNC1TorFZBxkWgZBRpF1HMCARm5YDfR78PxL1VZCkkprMoPYZCXl2vIrwigtSymuenZBjvAtexKzRnJ7SkwZDZD

レスポンスボディ

param key value
id ユーザID
name ユーザ名

レスポンスサンプル

{
    "id": "1208052052731056"
    "name": "田中 太郎",
}