ソーシャルIDログイン

SNSのIDを利用してユーザーのログイン方法を管理する方法をこちらに記載します。

はじめに

各SNSによってログインの認証方法が異なります。

SNS	認証方法
Facebook	OAuth
twitter	OAuth

OAuth

OAuth認証の仕組みについてはこちら

Facebook

@ITのOAuth認証
Facebook開発者向けドキュメントの日本語訳とTips

• 必要なもの
  • Facebookの App ID
    Facebookのアカウントを取得し、そのアカウントにサイトのURLを登録すると与えられます。
    App ID は固有のIDでユーザとサイト間の適切なレベルの安全性を保証するもの
  • JavaScript SDK

■手順：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トークンとサイトの会員情報を紐付け管理すれば完了です。

←ポチッ！とブログランキング！