JSFiddle - React, Tailwind, and code Playground

by Mike Kotsur

HTML

<!doctype html>
<html ng-app="HomePageModule" >
<head>
    <title>Facebook test</title>
    <script src="http://code.angularjs.org/1.0.0rc2/angular-1.0.0rc2.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    </head>
    <body>
        <div id="fb-root"></div>

<script type="text/javascript">
    window.fbAsyncInit = function() {
        FB.init({
            appId: '383186668368577'
        });
    };

    // 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));
        </script>
        <div ng-controller="ConnectCtrl">
            <h1>{{user.name}}</h1>
            <br/>
            <h1>{{error}}</h1>
            <button ng-click="registerWithFacebook()">Find myself on facebook</button>
        </div>
    </body>
</html>

JavaScript

angular.module('HomePageModule', []).factory('facebookConnect', function() {
    return new function() {
        this.askFacebookForAuthentication = function(fail, success) {
            FB.login(function(response) {
                if (response.authResponse) {
                    FB.api('/me', success);
                } else {
                    fail('User cancelled login or did not fully authorize.');
                }
            });
        }
    }
});

function ConnectCtrl(facebookConnect, $scope, $resource) {

    $scope.user = {}
    $scope.error = null;

    $scope.registerWithFacebook = function() {
        facebookConnect.askFacebookForAuthentication(
        function(reason) { // fail
            $scope.error = reason;
        }, function(user) { // success
            $scope.user = user
            $scope.$digest() // Manual scope evaluation
        });
    }
}

ConnectCtrl.$inject = ['facebookConnect', '$scope', '$resource'];