like life lives

技術以外のことに興味が寄りすぎな技術ブログ

facebookアカウントでのログイン実装その1:ログイン画面へのリンク

自分で運営しているログイン制のサイトで、facebookのアカウントでのログインを実装しています。

フィード型質問サイト - pukkyu

 

ブログの最初の記事としてはもってこいだと思うので今回はこの部分の解説をします。
 
まずは起点となるOAuthのリンクから。
 

1.facebookの認証ページにリンクを張る

ブラウザで表示させたページからfacebookのログイン処理をする場合、専用のURLを踏ませます。
 
 * 参考,というか正解
 
 
pukkyuでは下画像の赤枠内、imgタグにリンクを含ませています。
 
 

f:id:sugar_affordance:20130221235739p:plain

 
 
リンクには以下のパラメータを含めます。
 
・client_id
 facebook developersのサイトに登録して取得したAppIDです。
 pukkyuのAppIDは257523117693448なのでこれを指定します。
 
・redirect_uri
 認証後にリダイレクトさせる自サイトのアドレスです。次回解説(予定)
 
・scope
 取得したいアクセストークンのスコープを指定します。
 ここでは自分の情報を取得するuser_about_meと、facebookでの質問を取得できるuser_questionsを指定しています。
 *user_questions、指定してはいるんですが、実際には使ってません。質問サイトなので使うことあるかもと思って入れといたんですが…削除しないといけませんね(^_^;)
 
 
以上のパラメータを含ませるとURLは
 
 
となります。このURLを踏むとユーザーはFacebookの認証ページへと飛びます。
実際に上のリンクをブラウザに入力するとpukkyuにログインできるのでやってみてください(誘導)
サイトの実際のURLにはtestというパラメータがおまけでついてますが、これはご愛嬌。
 
次回はメールアドレスとパスワードを入力して認証を実行したあとのフローを解説します。