Facebook Javascript SDK implementation

index.html

@@ -9,7 +9,6 @@
   <!-- content section -->
   <section id="content"></section>
 
-  <!-- Initialize SPA -->
   <script type="text/javascript" src="build/build.js"></script>
 </body>
 </html>

src/components/Login.js

@@ -24,6 +24,7 @@ export default class Login extends React.Component {
   render() {
     return (
       <div className="login jumbotron center-block">
+      {/*
         <h1>Login</h1>
         <form role="form">
         <div className="form-group">
@@ -36,9 +37,65 @@ export default class Login extends React.Component {
         </div>
         <button type="submit" className="btn btn-default" onClick={this.login.bind(this)}>Submit</button>
       </form>
+      */}
+      <a href="#" className="fb-login-button" data-max-rows="1" data-size="large" onClick={this.handleClickFb.bind(this)}>FB Login</a>
     </div>
     );
   }
+
+  componentDidMount() {
+      window.fbAsyncInit = function() {
+          FB.init({
+              appId      : '147935535403714',
+              xfbml      : true,
+              version    : 'v2.5'
+          });
+          FB.getLoginStatus(function(response) {
+              this.statusChangeCallback(response);
+          }.bind(this))
+      }.bind(this)
+  }
+
+  componentWillMount() {
+      (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'));
+  }
+
+  statusChangeCallback(response) {
+    if (response.status === 'connected') {
+      var access_token = response.authResponse.accessToken;
+      Auth.socialLogin('facebook', access_token);
+      // console.log(access_token);
+      // FB.api('/me', { locale: 'en_US', fields: 'first_name, email, picture' },
+      //   function(response) {
+      //     console.log(response);
+      //     Auth.socialLogin('facebook', access_token, response.email, response.first_name);
+      //   }
+      // );
+    } else if (response.status === 'not_authorized') {
+      console.log('not not_authorized');
+    } else {
+      console.log('not logged into facebook');
+    }
+  }
+
+  checkLoginState() {
+      FB.getLoginStatus((response) => {
+          this.statusChangeCallback(response);
+      }.bind(this))
+  }
+
+  handleClickFb() {
+    FB.login((response) => {
+      this.statusChangeCallback(response);
+    }, {scope: 'email', return_scopes: true});
+  }
+
 }
 
 ReactMixin(Login.prototype, React.addons.LinkedStateMixin);

src/constants/LoginConstants.js

@@ -2,7 +2,8 @@ var BASE_URL = 'http://rocket.dev/';
 export default {
   BASE_URL: BASE_URL,
   LOGIN_URL: BASE_URL + 'api-token-auth/',
-  SIGNUP_URL: BASE_URL + 'users',
+  SOCIAL_LOGIN_URL: BASE_URL + 'rest-auth/',
+  SIGNUP_URL: BASE_URL + 'user/',
   LOGIN_USER: 'LOGIN_USER',
   LOGOUT_USER: 'LOGOUT_USER'
 }

src/services/AuthService.js

@@ -1,6 +1,6 @@
 import request from 'reqwest';
 import when from 'when';
-import {LOGIN_URL, SIGNUP_URL} from '../constants/LoginConstants';
+import {LOGIN_URL, SIGNUP_URL, SOCIAL_LOGIN_URL} from '../constants/LoginConstants';
 import LoginActions from '../actions/LoginActions';
 
 class AuthService {
@@ -17,6 +17,17 @@ class AuthService {
     })));
   }
 
+  socialLogin(provider, token) {
+    return this.handleAuth(when(request({
+      url: SOCIAL_LOGIN_URL + provider + "/",
+      method: 'POST',
+      crossOrigin: true,
+      data: {
+        access_token: token
+      }
+    })));
+  }
+
   logout() {
     LoginActions.logoutUser();
   }