Backendless · Valodya · Feb 8, 2018 · Feb 2, 2018 · Feb 2, 2018 · Feb 8, 2018
diff --git a/backendless.d.ts b/backendless.d.ts
@@ -924,21 +924,29 @@ declare module __Backendless {
         update(user: Backendless.User): Promise<Backendless.User>;
         update<T>(user: T): Promise<T>;
 
+        /**@deprecated */
         loginWithFacebookSync(fields?: Object, permissions?: Object, stayLoggedIn?: boolean): void;
 
+        /**@deprecated */
         loginWithFacebook(fields?: Object, permissions?: Object, stayLoggedIn?: boolean): Promise<void>;
 
+        /**@deprecated */
         loginWithGooglePlusSync(fields?: Object, permissions?: Object, container?: HTMLElement, stayLoggedIn?: boolean): void;
 
+        /**@deprecated */
         loginWithGooglePlus(fields?: Object, permissions?: Object, container?: HTMLElement, stayLoggedIn?: boolean): Promise<void>;
 
         loginWithTwitterSync(fields?: Object, stayLoggedIn?: boolean): void;
 
         loginWithTwitter(fields?: Object, stayLoggedIn?: boolean): Promise<void>;
 
+        /**@deprecated */
         loginWithFacebookSdk(fields?: Object, stayLoggedIn?: boolean): Promise<void>;
+        loginWithFacebookSdk(accessToken: String, fields: Object, stayLoggedIn?: boolean): Promise<void>;
 
+        /**@deprecated */
         loginWithGooglePlusSdk(fields?: Object, stayLoggedIn?: boolean): Promise<void>;
+        loginWithGooglePlusSdk(accessToken: String, fields?: Object, stayLoggedIn?: boolean): Promise<void>;
 
         isValidLoginSync(): boolean;
 

diff --git a/examples/user-service/UserLogin.iml b/examples/user-service/UserLogin.iml
diff --git a/examples/user-service/css/bootstrap.css → ...e/simple-register-login/css/bootstrap.css b/examples/user-service/css/bootstrap.css → ...e/simple-register-login/css/bootstrap.css
diff --git a/examples/user-service/css/userLogin.css → ...e/simple-register-login/css/userLogin.css b/examples/user-service/css/userLogin.css → ...e/simple-register-login/css/userLogin.css
diff --git a/examples/user-service/index.html → ...-service/simple-register-login/index.html b/examples/user-service/index.html → ...-service/simple-register-login/index.html
diff --git a/examples/user-service/js/bootstrap.js → ...ice/simple-register-login/js/bootstrap.js b/examples/user-service/js/bootstrap.js → ...ice/simple-register-login/js/bootstrap.js
diff --git a/examples/user-service/js/jquery.js → ...ervice/simple-register-login/js/jquery.js b/examples/user-service/js/jquery.js → ...ervice/simple-register-login/js/jquery.js
diff --git a/examples/user-service/js/user-example.js → .../simple-register-login/js/user-example.js b/examples/user-service/js/user-example.js → .../simple-register-login/js/user-example.js
diff --git a/examples/user-service/social-login/css/main.css b/examples/user-service/social-login/css/main.css
@@ -0,0 +1,31 @@
+body {
+    background: #161a24;
+    font: 12px Arial, Helvetica, sans-serif;
+}
+
+.form {
+    text-align: center;
+    background: #fff;
+    margin: 150px 0 0 -125px;
+    width: 250px;
+    position: relative;
+    left: 50%;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.login,
+.logout {
+    display: none
+}
+
+.social-login-buttons {
+    width: 210px;
+    margin: 0 auto;
+}
+
+.social-login-btn {
+    display: block;
+    width: 100%;
+    margin: 5px 0 0 0;
+}
diff --git a/examples/user-service/social-login/index.html b/examples/user-service/social-login/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Backendless Social Login</title>
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+<div class="container">
+    <div class="form preloader">
+        <h4>Loading...</h4>
+    </div>
+    <div class="form login">
+        <div>
+            <h4>Backendless Social Login</h4>
+            <div class="social-login-buttons">
+                <button id="google-plus-login" class="btn btn-danger social-login-btn">
+                    Login With Google+
+                </button>
+                <button id="facebook-login" class="btn btn-primary social-login-btn">
+                    Login With Facebook
+                </button>
+                <button id="twitter-login" class="btn btn-info social-login-btn">
+                    Login With Twitter
+                </button>
+            </div>
+
+        </div>
+    </div>
+    <div class="form logout">
+        <div>
+            <h4>Backendless Social Login</h4>
+            <div class="block" style="margin:5px 0">
+                You are logged in now
+            </div>
+            <div class="block" style="margin:0 0 5px 0">
+                <button id="logout" class="btn btn-info">Log Out</button>
+            </div>
+        </div>
+    </div>
+
+</div>
+<script src="//unpkg.com/zepto@1.2.0"></script>
+<script src="//api.backendless.com/sdk/js/latest/backendless.min.js"></script>
+
+
+<!-- It is needed only for login with Google+ SDK -->
+<script src="//apis.google.com/js/platform.js"></script>
+<script src="//apis.google.com/js/auth.js"></script>
+
+<!-- It is needed only for login with Facebook SDK -->
+<script src="//connect.facebook.net/en_US/sdk.js"></script>
+
+<script src="js/main.js"></script>
+</body>
+</html>
diff --git a/examples/user-service/social-login/js/main.js b/examples/user-service/social-login/js/main.js
@@ -0,0 +1,232 @@
+(function($, Backendless) {
+  var SERVER_URL = "https://api.backendless.com";
+  var APPLICATION_ID = '';
+  var API_KEY = '';
+  var GOOGLE_CLIENT_ID = '';
+  var FACEBOOK_APP_ID = '';
+
+  var app = {
+    ui: {
+      preloader       : '.preloader',
+      loginForm       : '.form.login',
+      logoutForm      : '.form.logout',
+      googleLoginBtn  : '#google-plus-login',
+      facebookLoginBtn: '#facebook-login',
+      twitterLoginBtn : '#twitter-login',
+      logoutBtn       : '#logout'
+    },
+
+    toBind: [
+      'onLogoutClick',
+      'onGoogleLoginClick',
+      'onFacebookLoginClick',
+      'onTwitterLoginClick',
+      'onLoggedIn'
+    ],
+
+    init: function() {
+      this.initBackendless();
+
+      this.bindMethods();
+      this.collectUiElements();
+      this.initEventHandlers();
+
+      this.setInitialState();
+    },
+
+    initBackendless: function() {
+      Backendless.serverURL = SERVER_URL;
+      Backendless.initApp(APPLICATION_ID, API_KEY);
+
+      if (!APPLICATION_ID || !API_KEY) {
+        alert(
+          'Missing application ID or api key arguments. ' +
+          'Login to Backendless Console, select your app and get the ID and key from the Manage > App Settings screen. ' +
+          'Copy/paste the values into the Backendless.initApp call located in js/main.js'
+        )
+      }
+    },
+
+    setInitialState: function() {
+      var app = this;
+      var cache = Backendless.LocalCache.getAll();
+
+      if (cache.stayLoggedIn) {
+        Backendless.UserService.isValidLogin().then(function(isLoginValid) {
+          if (isLoginValid) {
+            app.showLogoutForm();
+          } else {
+            Backendless.LocalCache.clear();
+            app.showLoginForm();
+          }
+        }, this.onError);
+
+        return;
+      }
+
+      this.showLoginForm();
+    },
+
+    collectUiElements: function() {
+      for (var key in this.ui) {
+        this.ui[key] = $(this.ui[key])
+      }
+    },
+
+    bindMethods: function() {
+      var app = this;
+
+      this.toBind.forEach(function(methodName) {
+        app[methodName] = app[methodName].bind(app)
+      })
+    },
+
+    initEventHandlers: function() {
+      this.ui.googleLoginBtn.on('click', this.onGoogleLoginClick);
+      this.ui.facebookLoginBtn.on('click', this.onFacebookLoginClick);
+      this.ui.twitterLoginBtn.on('click', this.onTwitterLoginClick);
+      this.ui.logoutBtn.on('click', this.onLogoutClick)
+    },
+
+    showLoginForm: function() {
+      this.ui.preloader.hide();
+      this.ui.logoutForm.hide();
+      this.ui.loginForm.show();
+    },
+
+    showLogoutForm: function() {
+      this.ui.preloader.hide();
+      this.ui.loginForm.hide();
+      this.ui.logoutForm.show();
+
+      console.log(Backendless.UserService.getUserRolesSync());
+    },
+
+    onGoogleLoginClick: function() {
+      if (!gapi) {
+        return alert("Google+ SDK not found");
+      }
+
+      if (!GOOGLE_CLIENT_ID) {
+        return alert(
+          'Missing Google client ID. ' +
+          'Select client ID from your account on https://console.developers.google.com'
+        );
+      }
+
+      var app = this;
+
+      gapi.auth.authorize({
+        client_id: GOOGLE_CLIENT_ID,
+        scope    : "https://www.googleapis.com/auth/plus.login"
+      }, function(response) {
+        var accessToken = response && response.access_token;
+
+        app.backendlessLoginWithGooglePlusSDK(accessToken);
+      });
+    },
+
+    onFacebookLoginClick: function() {
+      if (!FB) {
+        return alert("Facebook SDK not found");
+      }
+
+      if (!FACEBOOK_APP_ID) {
+        return alert("Facebook App Id cannot be empty");
+      }
+
+      // description of options parameter: https://developers.facebook.com/docs/reference/javascript/FB.login/v2.9
+      var fbLoginOptions = {};
+      var app = this;
+
+      FB.init({
+        appId  : FACEBOOK_APP_ID,
+        cookie : true,
+        xfbml  : true,
+        version: 'v2.12'
+      });
+
+      FB.getLoginStatus(function(response) {
+        if (response.status === 'connected') {
+          app.backendlessLoginWithFacebookSDK(response);
+        } else {
+          FB.login(function(response) {
+            app.backendlessLoginWithFacebookSDK(response);
+          }, fbLoginOptions);
+        }
+      });
+    },
+
+    onTwitterLoginClick: function() {
+      Backendless.UserService.loginWithTwitter().then(this.onLoggedIn, this.onError);
+    },
+
+    /*
+     * Backendless Login with Facebook SDK
+     *
+     * @param {Object} Facebook login status
+     */
+    backendlessLoginWithFacebookSDK: function(loginStatus) {
+      var accessToken = loginStatus && loginStatus.authResponse && loginStatus.authResponse.accessToken;
+      var fieldsMapping = { 'email': 'email', 'first_name': 'first_name' };
+      var stayLoggedIn = false;
+
+      Backendless.UserService.loginWithFacebookSdk(accessToken, fieldsMapping, stayLoggedIn)
+        .then(this.onLoggedIn, this.onError);
+    },
+
+    /*
+     * Backendless Login with Google+ SDK
+     *
+     * @param {accessToken} Google+ access token
+     */
+    backendlessLoginWithGooglePlusSDK: function(accessToken) {
+      var fieldsMapping = {};
+      var stayLoggedIn = true;
+
+      Backendless.UserService.loginWithGooglePlusSdk(accessToken, fieldsMapping, stayLoggedIn)
+        .then(this.onLoggedIn, this.onError);
+    },
+
+    /*
+     * Login with Twitter
+     */
+    onTwitterLoginClick: function() {
+      Backendless.UserService.loginWithTwitter().then(this.onLoggedIn, this.onError);
+    },
+
+    /*
+     * Logout
+     */
+    onLogoutClick: function() {
+      Backendless.UserService.logout().then(this.onLoggedOut, this.onError);
+    },
+
+    onLoggedIn: function(user) {
+      this.showLogoutForm();
+
+      console.log(user);
+    },
+
+    onLoggedOut: function() {
+      location.reload();
+    },
+
+    onError: function(err) {
+      err = err || {};
+
+      console.log(err)
+
+      console.error("error message - " + err.message);
+
+      if (err.statusCode) {
+        console.error("error statusCode - " + err.statusCode);
+      }
+    }
+  };
+
+  app.init();
+
+})($, Backendless);
+
+