Gigya Job Openings

Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejavascript
linenumberstrue
<html>
<head>
	<script type="text/javascript" lang="javascript" 
	   src="https://cdn.gigya.com/JSjs/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W">
	</script>	
</head>
<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 300px; display: block; height: 200px;">
<p>Please sign in using one of the following providers:</p>
	<div id="loginDiv"></div>
	<script type="text/javascript">
		gigya.socialize.showLoginUI({containerID: "loginDiv", cid:'', width:220, height:60,
				redirectURL: "/display/GD/Basic+Social+Login+Demo+-+Success+Page",
				showTermsLink:false // remove 'Terms' link
				});
	</script>
</div>
</body>
</html>

...

Step 2 - Handle Login Response

Upon a successful authentication of the user, Gigya will return the User object from the Social Network.  You can pull various data from this object, such as the User ID and other fields, depending upon your permissions with the social network, available within the User object, as well as the UID. Use the UID to sign-in or register the user in your database.

The following code shows how we implement this on the Success page you will redirect to by using the above example.

Code Block
languagejs
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 400px; display: block; height: auto;">
	<script type="text/javascript">
        
         
        window.onload = function(){
		var parse = function(data){
            user = data.user;
             
            // Inject the user's nickname to the "divUserName" div 
            document.getElementById('nickname').innerHTML = user.nickname;
      
            // Inject the user's photo to the image "src" attribute. 
            document.getElementById('imgUserPhoto').src = user.photoURL;
             
            // Display the Login social network name and the social network user ID and UID
            document.getElementById('SocIDs').innerHTML = '<h3>Your ' + user.loginProvider + ' ID is: ' + user.loginProviderUID + '</br>UID: ' + user.UID + '</h3><br />';
        };
		var user = gigya.socialize.getUserInfo({callback: parse});
        }
    </script>
	
	<h2>Post Sign-In Page</h2> 
	<h3>
	Welcome back, <span id="nickname"></span></h3> 
	<img id="imgUserPhoto"/> 
	<br/> 
	<div id="SocIDs"></div>
	</br>
	<a href="/display/GD/Basic+Social+Login+Demo">Back to Sign-In Page</a> 
</div>
Panel
borderColor#81C0FC
bgColor#F4F7FC
borderWidth1
borderStylesolid

Note: An alternative option is to be notified with an onLogin event. To learn more about how to handle events generated by the Gigya service, please refer to the Events page.


When implementing the Login response page, please do the following:

  • To avoid fraud, we recommend verifying the authenticity of the signature received from Gigya. 
  • Check whether the user is new to your site. To do that, retrieve the UID parameter from the URL (see the URL string above) and look up the UID in your database.
    • If the UID already exists in your user management system, identify the user and complete her sign-in process.
    • If the UID is new, you should register the new user. From the URL parameters that you receive from Gigya, you can use the information that is relevant to your site in your registration process and store the new user in your database.

That's it!

We have reviewed the basic steps needed to implement Gigya's social login.

Learn More

We recommend that you also take a look at the various features we offer for social login, like account linking and connection with multiple providers.

To learn how to implement the social login best practice, please read the Best Practice Implementation page.