angularjsでfacebook loginしてみる(ng-facebook)

概要

angularjsのモジュールを用いて、facebook loginをしてみる。

ng-facebookを使ってみる。Facebook SDKをラップしてくれてる。readmeそのまま。
https://github.com/GoDisco/ngFacebook
MITだしそれなりにメンテナンスされてるので多分大丈夫。
※promiseベースなのでpromise嫌いな方は別の何かを

事前準備

facebookデベロッパーに登録した後にappを登録。
https://developers.facebook.com/apps
※ webサイトとApp Domainsを登録しておかないと蹴られるので注意
※ oauth2なのでhttpsの体制を

packageとfacebookSDK読み込み

bower install ng-facebook --save

vim app/index.html

-----
//追加
<script src="app/bower_components/ng-facebook/ngFacebook.js"></script>
-----

vim app/scripts/app.js

-----
// moduleの依存に追加
angular.module('facebookTestApp',[
  'ngFacebook'
])
.config( function( $facebookProvider ) {
    // もろもろ設定
  $facebookProvider.setAppId('xxxxxxxxxxxxxx');
  $facebookProvider.setCustomInit({
    version : 'v2.0'
  });
})
.run( function( $rootScope ){
  // facebookのjs読み込みのサンプルをコピペ
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
});

クライアントサイドでログイン＆情報取得

  $scope.isLoggedIn = false;
  $scope.login = function() {
    $facebook.login().then( refresh );
  }
  $scope.logout = function() {
    $facebook.logout().then( refresh );
  }

  function refresh() {
    $facebook.api("/me").then( 
      function(response) {
        $scope.welcomeMsg = "Welcome " + response.name;
        $scope.isLoggedIn = true;
      },  
      function(err) {
        $scope.welcomeMsg = "Please log in";
        $scope.isLoggedIn = false;
      }   
    );  
    $facebook.getLoginStatus().then(
      function(response){
        console.log(response);
      },
      function(er){
      }
    );
  }

• getLoginStatus
  • https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.1#checklogin
• GraphAPI : /me
  • https://developers.facebook.com/docs/graph-api/reference/v2.1/user#fields

サーバサイドで使ってみる（おまけ）

サーバサイドへAccessToken投げてみる

    $facebook.getLoginStatus().then(
      function(response){
        if ( response.status === 'connected' ) { 
          CSRF.get(function(token){ // ※CSRF対策のtokenを取得するサービス
            var data = { 
              _csrf: token,
              FBToken: response.authResponse.accessToken
            }
            $http.post('/api/hoge', data)
            .success(function(response){
              console.log(response);
            }); 
          }); 
        }
      }
    );

サーバサイドでトークン使う

fbgraph使ってみた
https://github.com/criso/fbgraph

var graph = require('fbgraph');
module.exports = { 
  hoge: function(req, res ) { 
    graph.setAccessToken(req.body.FBToken);
    graph.get('me', function(error, result){
      console.log(result.name);
      // 名前とれるはず。正しく取得できれば正当なtokenと判断でいいのだろうか。
      res.json(result);
    }); 
  }
};

まとめ

• モジュール気持ちい
• 簡単に取得できすぎて、これでいいのか不安
• 間違えてたらごめんなさい。突っ込んで下さい。