Table of contents
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:
The Example Code:
<html>
<head>
<script type="text/javascript" lang="javascript"
src="http://cdn.gigya.com/JS/socialize.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N">
</script>
</head>
<body >
<br />
<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: "http://wikifiles.gigya.com/Socialize/PostLoginPage.htm",
showTermsLink:false, hideGigyaLink:true // remove 'Terms' and 'Gigya' links
});
</script>
</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 <head> section of your web-page
This code includes loading Gigya's JavaScript library with an API key.
Add lines 10-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
When the user completes the login process, he will be redirected back to your site to the URL that you have defined in the redirectURL parameter in step 1. Gigya will append the User ID as the UID parameter to the URL string. Use this ID to sign-in or register the user in your database.
Other parameters provide user information extracted from social networks. An example URL string:
http://www.YourSite.com/PostLoginPage.htm?zip=&UID=123&photoURL=&nickname=John%20Doe&profileURL=&
birthMonth=10&loginProvider=twitter&loginProviderUID=65e&country=&thumbnailURL=&lastName=Esh&
signature=pEqAFOUHRiAOjac9z%2FdoHlzNCbU%3D&firstName=John&provider=twitter&gender=&birthYear=1965&
timestamp=2009%2D12%2D08%2015%3A53%3A45&UIDSig=&state=&email=&city=&birthDay=11&proxiedEmail=
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.
Comments