Facebook OAuth認証 (認証あり)

だいたいにして(認証あり)という表現がおかしい。おかしいのだけど文脈上こうならざる得ないのです。これらがおかしいと思った方はこちらをどうぞ。文脈がわかると思います。

FBアプリを作成する

https://developers.facebook.com/apps
最初はこのアプリをつくるという意味がものすごく意味がわからなかったけど、サーバーの管理画面みたいなものだと思って半分ぐらいは正解で半分ぐらいは間違っている感じです。ですが、アプリといってもただの登録画面みたいなもので実際問題としてここでアプリが作れるわけでもないということです。にもかかわらず、仕方がないのでアプリという言葉を使い続けます。とにかくアプリを1つ作っておきます。

fb_apps_infoアプリを作成すると、そのアプリには、App IDとApp Secletというkeyが発行されます。IDがアプリをアイデンティファイする固有の名前、Secletはパスワードみたいな働きをします。これらはアプリ制作で使うので、どっかにメモしておくといいです。(紙じゃなくて、メモ帳とかエディタにですよ。) 今回サンプルで作るアプリでは、Website with Facebook Loginを使います。ここら辺りもややこしいのですが、FBアプリもいろいろあって、外部のサイト(自分のサイト)にFB機能を盛り込んでしまうというものを今回は作成しています。Website with Facebook Loginは外部のサイトにFBのログイン機能を組み込むというものです。Website with Facebook Loginをクリックして、ログイン画面を置くWebページのURLを設定します。

apps-settingtestこれでアプリの設定が完了したので、保存して終了です。

OAuth認証の基本的なコード

OAuthの基本的な接続は、以下のようにURLを直(じか)叩きしてOAuth認証することができます。
http://www.facebook.com/dialog/oauth/?client_id=173649622773521&%20redirect_uri=http://labo.omnioo.com/develop/facebook/graph_02/&response_type=token

Facebookにログインしていない時にはFBの認証画面が、すでにログイン中であるならば、アクセストークン付きのURLで指定の自分のWEBアプリページへ、またOAuth認証をキャンセルした時には、認証前の状態で指定したリダイレクト先に移動します。
指定するパラメーターは3つです。

  • client_id=173649622773521 [APP IDのこと]
  • redirect_uri=http://labo.omnioo.com/develop/facebook/graph_02/ [リダイレクト先のURL]
  • response_type=token [アクセスした際に帰ってくる情報を指定]

となります。もっといろいろあるんですが、最初はこの3つで十分であり且つこの3つを基本にしておけばよいというわけです。
つまり、
<a href="http://www.facebook.com/dialog/oauth/?client_id=173649622773521&amp;%20redirect_uri=http://labo.omnioo.com/develop/facebook/graph_02/&amp;response_type=token">Facebook OAuth Button</a>

みたいな感じで大丈夫です。FB OAuthでログインする
FBのAPIがすごい(あるいは、しょぼいの)は、直叩きしたURLから返り値を得るという方式です。もうちょっとエレガントなAPIにしようよといいたくなるような軽やかさ。

関連する内容はこちら