Gigya Job Openings

Gigya within Canvas Application on Facebook

Skip to end of metadata
Go to start of metadata

 

In order to Integrate Gigya Social Login within your canvas application on Facebook, please follow these steps:

In order for this integration to function properly you must have your domain listed in the Valid OAuth redirect URIs section of the Facebook Login section of the Product Settings tab (i.e., https://mysite.com), in addition to the URI that is https://<site>/GS/GSLogin.aspx.



If you would like the user to be logged in in order to see your application:

  1. Navigate to the Providers Configurations page of your Gigya Console.



  2.  Open the Facebook configurations dialog by clicking the corresponding icon.



  3.  In the dialog, insert the Application ID and Secret Key that correspond to your Canvas app (as defined within Facebook App Management).
    1. Be sure that the Facebook External application canvas page (your content) is using SSL, e.g., it must be https://.



  4. When a user without an active session with your application loads the page, call Facebook's getLoginStatus. This will return a Facebook accessToken.
    1. When initially setting up your canvas app within Facebook, there is a detailed walk-through of the code required to use this method. You can locate this walk-through by entering the following URL into your browser and following the instructions:
      1. https://developers.facebook.com/quickstarts/<YOUR-FB-APP-ID>/?platform=canvas
        (Where <YOUR-FB-APP-ID> is the ID of the particular canvas app you are setting up).
    2. You should then see some screens that look similar to the following:

  5.  Call Gigya's notifyLogin method on the client-side. This will allow you to log in the user to Gigya via Facebook's accessToken.

    (There are a number of ways to do this, one of them is shown below (including working Facebook code as of August 25th, 2015).

    <html>
    <head>
    <title></title>
    <!-- gigya.js script should only be included once -->
    <script type="text/javascript" src="https://cdns.gigya.com/js/gigya.js?apiKey=<Your-API-Key>"> // Note: we must use the https version of Gigya's Web SDK
    { //This is the GlobalConf object
    	siteName: '<As Defined In Your Gigya Account>'
    	,enabledProviders: 'facebook,twitter,googleplus,linkedin,yahoo,microsoft,aol,foursquare,instagram,vkontakte,renren,QQ,Sina'
    }
    </script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script>
    </head>
    <body>
    <noscript>[You must have JavaScript enabled to use this app.]</noscript>
    <input type="hidden" id="fbuid" name="fbuid" value="" />
    <input type="hidden" id="thisToken" name="thisToken" value="" />
    <script>
    function gigyaOnConnect(response) {  // callback for gigyaConnect
    	if (response.errorCode == 0) {
    	// Do step 6 here
    
    	user = response['user']; // gets the User object
    	var divTop = '<div style="border: 1px solid skyblue; padding: 20px; margin: 20px; height: auto; width: 600px;">';
    	var divBot = '</div>';
    	displayInfo = 'User name: ' + user['nickname'] + '<br />UID: ' + user['UID'] + '<br />Email: ' + user['email'];
    	document.getElementById('responseDiv1').innerHTML += divTop + displayInfo + divBot;
    	}
    	else {
    		alert('An error has occurred!' + '\n' + 'Error details: ' + response.errorMessage + '\n' + 'In method: ' + response.operation);
    	}
    }
    function gigyaConnect()	{  
    	permToken = document.getElementById('thisToken').value;
            var params = {
                    "providerSessions": {
    			"facebook": {
    	                        "authToken": thisToken
    			}
                        },
                    "callback":gigyaOnConnect
                };
    		gigya.socialize.notifyLogin(params);
            }
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '<Your FB App ID>',
          xfbml      : true,
          version    : 'v2.4'
        });
        // ADD ADDITIONAL FACEBOOK CODE HERE
    // Place following code after FB.init call.
    function onLogin(response) { 
      if (response.status == 'connected') {
        FB.api('/me?fields=first_name,id', function(data) {
          var welcomeBlock = document.getElementById('fb-welcome');
          welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
            var facebookUserId = data.id;
    	$('#fbuid').val(data.id); //jquery
    	gigyaConnect();
        });
      }
    }
    FB.getLoginStatus(function(response) {  
      // Check login status on load, and if the user is
      // already logged in, go directly to the welcome message.
      if (response.status == 'connected') {
        thisToken = response.authResponse.accessToken;
    	$('#thisToken').val(thisToken); //jquery
        onLogin(response);
    
      } else {
        // Otherwise, show Login dialog first.
        FB.login(function(response) {
          onLogin(response);
        }, {scope: 'user_friends, email'});
    	}
    	});
      };
      (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'));
    </script>
    <h1 id="fb-welcome"></h1>
    <div class="responseDiv1" id="responseDiv1" name="responseDiv1">
    &nbsp;
    </div>
    </body>
    </html>


    Notes:

    In order to make the above code work in your environment, please note:

    • The API key in the sample will only work on http://localhost/...
    • To load the page from your domain, modify the value of the "APIKey" field in the code to your own Gigya API Key. A Gigya API Key can be obtained from the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API Key.
    • If you are using https, be sure to further adjust the JS API url to: https://cdns.gigya.com/js/gigya.js?apikey=<Your_API_Key>.

     

  6. When notifyLogin's callback is fired, you will also receive the User object.  You can then gather any necessary information from the User object that you require to proceed with your app.

 

That's it.  Your app will now automatically log in your user via Gigya when they log into your app on Facebook.

 

Gigya Demo Canvas App

Follow this link to view the Gigya Canvas Demo: https://apps.facebook.com/928899720482854/