Social Login Demo

Skip to end of metadata
Go to start of metadata

 

See it in Action

 


Please sign in using one of the following providers:







Click the button below to sign out from Gigya platform:





 

Read More

Developer Guide

API Reference

Check Out the Code

The code of this example implements the framework* of the algorithm that is described in the Social Login Implementation section of the Developer's Guide.

* The missing parts in the implementation are the parts that require interaction with your site's server and database.

<html>
<head>
	<SCRIPT type="text/javascript" lang="javascript" 
		src="http://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: 400px; display: block; height: auto;">
<script>
		{
			enabledProviders: 'facebook,twitter,googleplus,linkedin,yahoo,microsoft,myspace,aol,foursquare,vkontakte,renren,QQ,Sina,kaixin'
		}
        // This method is activated when the page is loaded
        function onLoad() {
            // register for login event
            gigya.socialize.addEventHandlers({
					context: { str: 'congrats on your' }
					, onLogin: onLoginHandler 
					, onLogout: onLogoutHandler
					});
        }
        // onLogin Event handler
        function onLoginHandler(eventObj) {	
            alert(eventObj.context.str + ' ' + eventObj.eventName + ' to ' + eventObj.provider 
				+ '!\n' + eventObj.provider + ' user ID: ' +  eventObj.user.identities[eventObj.provider].providerUID);
            // verify the signature ...
            verifyTheSignature(eventObj.UID, eventObj.timestamp, eventObj.signature);
            // Check whether the user is new by searching if eventObj.UID exists in your database
            var newUser = true; // lets assume the user is new
            
            if (newUser) {
                // 1. Register user 
                // 2. Store new user in DB
                // 3. link site account to social network identity
                //   3.1 first construct the linkAccounts parameters
                var dateStr = Math.round(new Date().getTime()/1000.0); // Current time in Unix format
																	//(i.e. the number of seconds since Jan. 1st 1970)
				
                var siteUID = 'uTtCGqDTEtcZMGL08w'; // siteUID should be taken from the new user record
                                                   // you have stored in your DB in the previous step
                var yourSig = createSignature(siteUID, dateStr);
                var params = {
                    siteUID: siteUID, 
                    timestamp:dateStr,
					cid:'',
                    signature:yourSig
                };
                
                //   3.1 call linkAccounts method:
                gigya.socialize.notifyRegistration(params);
            }
			
			document.getElementById('status').style.color = "green";
			document.getElementById('status').innerHTML = "Status: You are now signed in";
        }
        // Note: the actual signature calculation implementation should be on server side
        function createSignature(UID, timestamp) {
			encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
												// On server side use decodeURIComponent() function to decode an encoded UID
            return '';
        }
		
        // Note: the actual signature calculation implementation should be on server side
        function verifyTheSignature(UID, timestamp, signature) {
			encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
												// On server side use decodeURIComponent() function to decode an encoded UID
            alert('Your UID: ' + UID + '\n timestamp: ' + timestamp + '\n signature: ' + signature + '\n Your UID encoded: ' + encodedUID);
        }
        
        // Logout from Gigya platform. This method is activated when "Logout" button is clicked 
		function logoutFromGS() {
            gigya.socialize.logout(); // logout from Gigya platform
        }
		
		// onLogout Event handler
        function onLogoutHandler(eventObj) {
			document.getElementById('status').style.color = "red";
			document.getElementById('status').innerHTML = "Status: You are now signed out";
		}
        onLoad();
    </script>

	<br />
	<h4>Please sign in using one of the following providers:</h4><br /><br />
	<div id="loginDiv"></div>
	<script type="text/javascript">
	    gigya.socialize.showLoginUI({ 
			height: 100
	        ,width: 330
			,showTermsLink:false // remove 'Terms' link
			,buttonsStyle: 'fullLogo' // Change the default buttons design to "Full Logos" design
			,showWhatsThis: true // Pop-up a hint describing the Login Plugin, when the user rolls over the Gigya link.
	        ,containerID: 'loginDiv' // The component will embed itself inside the loginDiv Div 
			,cid:''
			});
	</script>
    <br />
    <br /><br /><br />
	<h4>Click the button below to sign out from Gigya platform:</h4><br /><br />
    <input id="btnLogout" type="button" value="Sign Out" 
            onclick="logoutFromGS()"/>
    <br />
    <br />
    <div id="status"></div>
</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>.