ソーシャルIDログイン
SNSのIDを利用してユーザーのログイン方法を管理する方法をこちらに記載します。
はじめに
各SNSによってログインの認証方法が異なります。
SNS | 認証方法 |
---|---|
OAuth | |
OAuth |
OAuth認証の仕組みについてはこちら
@ITのOAuth認証
Facebook開発者向けドキュメントの日本語訳とTips
- 必要なもの
- Facebookの App ID
Facebookのアカウントを取得し、そのアカウントにサイトのURLを登録すると与えられます。
App ID は固有のIDでユーザとサイト間の適切なレベルの安全性を保証するもの - JavaScript SDK
- Facebookの App ID
■手順:JavaScript SDKをロードする
FacebookのIDでログインしたいサイトの App ID で JavaScript SDK をロードします。
ロード方法は以下の通りです。
<html> <head> <title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); </script> </body> </html>
■手順:ログインボタンをサイトのページに配置します。
以下のタグを配置するとログインボタンが表示されます。
<fb:login-button>Login with Facebook</fb:login-button>
配置例としては以下のようになります。
<html> <head> <title>My Facebook Login Page </head> <body> <div id="fb-root"> <script src="http://connect.facebook.net/en_US/all.js"> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); </script> <!-- 以下のようにログインボタンを追加する --> <fb:login-button>Login with Facebook </body> </html>
これで完了です。
但し、このログインボタンを押下するとユーザーにサイトへの認証許可ダイアログが開かれます。
許可が押下された場合に、デフォルトで提供される情報は、FacebookのUserオブジェクトの全体に公開のものだけのようです。
その他の情報(例えばメールアドレス)が取得したい場合は、情報を取得する為のパーミッション設定が必要となります。
パーミッションの種類
<html> <head> <title>My Facebook Login Page</title> </head> <body> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"> </script> <script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true }); </script> <!-- 以下のように perms を追加する --> <fb:login-button perms="email,user_checkins"> Login with Facebook </fb:login-button> </body> </html>
■手順:ログイン成功後のサイト会員情報との紐付け
Facebookではログインに成功すると、OAuthトークンが発行されます。
こちらのOAuthトークンとサイトの会員情報を紐付け管理すれば完了です。
コメント