The most straightforward way to add third party login to your site is to place the Gigya Login plugin alongside your current registration/sign-in UI. Our plugin simply presents the social networks' logos. When a user clicks on one of the logos, we then prompt that person to sign in to that provider and approve the connection with your site.

Description

Gigya provides a variety of integration options for adding third party login to your site. To get you started quickly, we have described the easiest option below.

How it Works

The most straightforward way to add third party login to your site is to place Gigya's Login plugin alongside your current registration/sign-in UI. Our plugin simply presents the social networks' logos. When a user clicks on one of the logos, we then prompt that person to sign in to that provider and approve the connection with your site. Once the user connects, you can retrieve the social network user ID. You can use the ID as an identifier to either create a new account in your database or, if the user connects again and the ID exists in your database, sign the user into your site.

Run the Example:

<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, hideGigyaLink:true // remove 'Terms' and 'Gigya' links
				});
	</script>
</div>

The Example Code: 

<html>
<head>
	<script type="text/javascript" lang="javascript" 
	   src="https://cdn.gigya.com/js/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>

Implementation Steps

Step 1 - Add the Gigya Login Plugin to Your Sign-up and Sign-in Pages

The code example above demonstrates the two essential pieces of code that you should add to your sign-up and sign-in pages.

Add lines 3-5 to the section of your web-page

This code includes loading Gigya's Web SDK with an API key.

Note: The API key in the sample will only work on http: //localhost/ (this is for development and testing purposes). To load this page from your domain, please obtain a Gigya API key from the Site Dashboard page.

Add lines 8-14 to the <body> section of your web-page

This code defines a <div> section and presents the Gigya Login plugin in it.

Set the redirectURL parameter in the code above (line 13) to the URL on your website that will handle the login response.

Note: We strongly advise providing a secure https URL.

 

To customize the plugin's design, please use our Login Plugin Wizard

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.

<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>

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:

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.