JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<section ng-app='myApp'>
    
    <button class='btn' ng-click="Facebook.login()">Connect with Facebook</button>
    

    <div ng-show="Facebook.token">
        <h4>Access Token:</h4>
        <p ng-bind="Facebook.token.accessToken"></p>
        <button class='btn btn-small' ng-click="Facebook.logout()">Logout</button>
    </div>

    <div id='fb-root'></div>
    
</section>

CSS

section {padding:40px;}
div {margin-top:40px}

JavaScript

var app = angular.module('myApp', []);



app.run(function($rootScope, Facebook) {

  $rootScope.Facebook = Facebook;

})


app.factory('Facebook', function($rootScope, $q) {

    return {
      login: function() {

        var resp = $q.defer();

        FB.login(function(response) {
          setTimeout(function() {
            $rootScope.$apply(function() {
              resp.resolve(response.authResponse);
            });
          },1);
        });

        $rootScope.Facebook.token = resp.promise;


      },
      logout: function() {

        var resp = $q.defer();

        FB.logout(function(response) {
          setTimeout(function() {
            $rootScope.$apply(function() {
              resp.resolve(response.authResponse);
            });
          },1);
        });

        $rootScope.Facebook.token = null;   

      }
    }
  })

































window.fbAsyncInit = function() {
  FB.init({
    appId: '467875209900414'
  });
};

// Load the SDK Asynchronously
(function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));