facebook connectのモバイル対応

今作ってる投稿系サービスを投稿と同時にfacebookにも投稿するようにとの指示を受けたので
その時のことをまとめてみようと思う。


まず、今作ってるサイトなんだけどガラケーサイトなんだよね。
つーワケでjavascriptなんて使えないし、いろいろ不便なわけ。

んで、何が出来たら上の任務を遂行出来るかっていうと

  • アプリケーション登録
  • ユーザにアプリケーションを認証させる
  • そのユーザの認証キー?を取得する

とまぁこんな感じかな。


  1. 取り敢えずアプリケーション登録

XFBMLを使うためには、Facebookへのアプリケーション登録が必要です。アプリケーション登録はここからできます。面倒な手続きは一切なく、URLさえあれば30秒で登録が完了します。

Facebook】Social Plugin 説明:プロジェクトマネジメント10.0:ITmedia オルタナティブ・ブログ
http://blogs.itmedia.co.jp/naoto/2010/04/facebooksocial-.html

ってわけで上見たらアプリケーション登録はすんなり出来る。

  1. 続いて認証

ユーザーを "https://graph.facebook.com/oauth/authorize" へリダイレクトします。その際にパラメータとして前述の client_id と redirect_uri を渡してください。redirect_uri はあなたのアプリケーションと連携をするために必要です。例えば、あなたのアプリケーションのURLが http://www.example.com であれば、あなたのリダイレクトURLはhttp://www.example.com/oauth_redirect のようにすることができます。

https://graph.facebook.com/oauth/authorize?
client_id=...&
redirect_uri=http://www.example.com/oauth_redirect

Facebook】Graph API の説明:プロジェクトマネジメント10.0:ITmedia オルタナティブ・ブログ
http://blogs.itmedia.co.jp/naoto/2010/04/facebookgraph-a.html

って書いてある。
まぁパソコンならこれでいいんだろうけどガラケーなんで多分表示されない端末とかも出てくるんだよね。
という訳でこのやり方は却下。


で、本家のマニュアル読んでると

By default, the user is asked to authorize the app to access basic information that is available publicly or by default on Facebook. If your app needs more than this basic information to function, you must request specific permissions from the user. This is accomplished by adding a scope parameter to the OAuth Dialog request followed by comma separated list of the required permissions. The following example shows how to ask for access to user's email address and their news feed:

Authentication - Facebook開発者
http://developers.facebook.com/docs/authentication/


     ____
   /      \ 
  /   _ノ ヽ、_.\
/    (●)  (●) \

       (__人__)       なるほどなるほど。。。

/     ∩ノ ⊃  /
(  \ / _ノ |  |
.\ “  /__|  |
  \ /___ /

ユーザー認証と装置認可は、同時に、私たちのOAuth Dialogにユーザを向け直すことによって、扱われます。 この対話を呼び出すとき、あなたは、あなたが私たちのDeveloper App(クライアント_イドパラメタ)のアプリケーションを作成して、ユーザのブラウザがかつての装置認可に向け直して戻されるというURLが完成するとき発生する装置イド(再直接の_uriパラメタ)で通らなければなりません。 あなたがDeveloper Appのウェブサイトタブで指定するSite URLと同じドメインの中に再直接の_uriがあるに違いありません:



       ヽ(`Д´)ノ
         (  )
         / ヽ






取り敢えず良く解らんけど

https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream

ここにリダイレクトしたらいいんだってさ。
けどなんかこのまま行くとPCデザインで出ちゃうんだよね。

これがガラケーには問題。

んでまぁいろいろ読めもしない英語を眺めてたら

The display mode in which to render the dialog. The default is page on the www subdomain and wap on the m subdomain. This is automatically specified by most SDKs.

OAuth Dialog - Facebook開発者
http://developers.facebook.com/docs/reference/dialogs/oauth

だってさ!!
display=wap
ってパラメータ付けたらええ感じにするでわし!みたいな話なのかな。


という訳で付けて再度アクセスしてみる。



いけない。
docomo->302エラー
au->502エラー
softbank->確認することすらしてない。

僕の長年のウェブプログラミング経験がこれはリダイレクトに問題があると言っている。

という訳で今度はファイヤーフォックスUA誤魔化してアクセスしてみる!!

http://m.facebook.com/login.php?app_id=YOUR_APP_ID&cancel....

みたいなページに最終的にリダイレクトされてた。
で、最終的なページをQRで読み込んでアクセスしてみたら
携帯のデザインで認証ページが出てきた!!


という訳でファイヤーフォックスでlogin.phpを表示してそのURLをそのまま
認証用のURLに使えばオッケーだよ!って話。


なんという無理やり感。
正しいやり方がわからないのでだれか知ってたら教えて下さいorz