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

ご支援、宜しくお願いします!←ポチッ!とブログランキング!

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/224308/54794566

この記事へのトラックバック一覧です: ソーシャルIDログイン:

コメント

コメントを書く



(ウェブ上には掲載しません)