Implementation On Websites \ Social Login

In this part you will discover how to integrate Social Login in order to easily let new users sign up for an account on your website by using their existing accounts from over thirty different social networks such as Facebook, Google, Twitter, Yahoo, Instagram and LinkedIn amongst others.

Start by including our JavaScript library

Our JavaScript library contains the functions required by our services. The library is loaded asynchronously (in the background) and does not increase the loading time of your website.

It is compatible with pages served using both HTTP or HTTPS. The // before the path to the library is a protocol-independent absolute path, which detects whether your site uses HTTP or HTTPS. No modification of the code on secure pages is required.

Our recommendation is to paste this code snippet into your website template page so that it appears before the closing </head> tag.

<script type="text/javascript">

		/* Replace #your_subdomain# by the subdomain of a Site in your OneAll account */		 
		var oneall_subdomain = '#your_subdomain#';

		/* The library is loaded asynchronously */ 
		var oa = document.createElement('script');
		oa.type = 'text/javascript'; oa.async = true;
		oa.src = '//' + oneall_subdomain + '.api.oneall.com/socialize/library.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(oa, s);
		    
	</script>

Add Social Login to your registration page

Update your registration page and insert the following code at the place where you would like the social networks to be displayed. Make sure to replace #your_callback_uri# by the full url to the script created during the website setup.

<div id="oa_social_login_container"></div>

	<script type="text/javascript">	

		/* Replace #your_callback_uri# with the url to your own callback script */
	  var your_callback_script = '#your_callback_uri#';
	  
	  /* Embeds the buttons into the container oa_social_login_container */
		var _oneall = _oneall || [];
		_oneall.push(['social_login', 'set_providers', ['facebook', 'google', 'twitter']]);
		_oneall.push(['social_login', 'set_callback_uri', your_callback_script]);
		_oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']);
		
	</script>

This code snippets displays the Social Login widget on your website and handles the login with social network accounts. Please have a look at our Signup Page to get an idea on how it could look like.

The UI goal should be that users can easily identify that they can signup with their social network account, but that users without a social network account can continue to register normally without being confused.

Test your setup

If you have finished setting up your registration page, do a first test by clicking on one of the social network providers. You should be prompted to login with your social network account, then be redirected to the callback_uri and see a message like Connection token received: 7a559a39-51a5-4f21-92aa-cc880da2233f.

Add Social Login to your login page

Update your login page and add the same code once again.

<div id="oa_social_login_container"></div>

	<script type="text/javascript">	

		/* Replace #your_callback_uri# with the url to your own callback script */
	  var your_callback_script = '#your_callback_uri#';
	  
	  /* Embeds the buttons into the container oa_social_login_container */
		var _oneall = _oneall || [];
		_oneall.push(['social_login', 'set_providers', ['facebook', 'google', 'twitter']]);
		_oneall.push(['social_login', 'set_callback_uri', your_callback_script]);
		_oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']);
		
	</script>

This will work both for existing users of your site that have linked a social network to their account and for new users, who will be able to register using their social network account (using the same flow as above).

In addition to your main login page, you may also have a login user interface in your home page or elsewhere. You should ideally provide an option to login with a social network in every place you provide a traditional login option.

Please have a look at our Signin Page to get an idea on how it could look like.

The UI goal should be that users can easily identify that they can signin with their social network account, but that users without a social network account can continue to signin normally without being confused.

Improve the callback script

After having clicked on a social network icon the user is forwarded to the login page of that social network. Upon successful authentication the user is then redirected back to the callback_uri that you have specified before.

The callback_uri is a link to a script hosted your server. The purpose of that script is to read the POST (or GET if you use Direct Connect) value connection_token and to fetch the user's social network profile data by sending a HTTP request with that token to the OneAll API.

Callback Script Handler

In the first part of the guide, we created a basic callback script to test the integration of the plugins.

	<?php

	// Check if we have received a connection_token
	if ( ! empty ($_POST['connection_token']))
	{
	  echo "Connection token received: ".$_POST['connection_token'];
	}
	else
	{
	  echo "No connection token received";
	}

	?>

We now replace this script with a working version.

	<?php

	// Check if we have received a connection_token
	if ( ! empty ($_POST['connection_token']))
	{
		// Get connection_token
		$token = $_POST['connection_token'];

		// Your Site Settings
		$site_subdomain = 'REPLACE WITH YOUR SITE SUBDMOAIN';
		$site_public_key = 'REPLACE WITH YOUR SITE PUBLIC KEY';
		$site_private_key = 'REPLACE WITH YOUR SITE PRIVATE KEY';

		// API Access domain
		$site_domain = $site_subdomain.'.api.oneall.com';

		// Connection Endpoint
		// http://docs.oneall.com/api/resources/connections/read-connection-details/
		$resource_uri = 'https://'.$site_domain.'/connections/'.$token .'.json';

		// Setup connection
		$curl = curl_init();
		curl_setopt($curl, CURLOPT_URL, $resource_uri);
		curl_setopt($curl, CURLOPT_HEADER, 0);
		curl_setopt($curl, CURLOPT_USERPWD, $site_public_key . ":" . $site_private_key);
		curl_setopt($curl, CURLOPT_TIMEOUT, 15);
		curl_setopt($curl, CURLOPT_VERBOSE, 0);
		curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 1);
		curl_setopt($curl, CURLOPT_FAILONERROR, 0);

		// Send request
		$result_json = curl_exec($curl);

		// Error
		if ($result_json === false)
		{
			//You may want to implement your custom error handling here
			echo 'Curl error: ' . curl_error($curl). '<br />';
			echo 'Curl info: ' . curl_getinfo($curl). '<br />';
			curl_close($curl);
		}
		// Success
		else
		{
			// Close connection
			curl_close($curl);

			// Decode
			$json = json_decode ($result_json);

			// Extract data
			$data = $json->response->result->data;
			
			// Check for service
			switch ($data->plugin->key)
			{
				// Social Login
				case 'social_login':
				
				// Single Sign On
				case 'single_sign_on':
							
					// Operation successful
					if ($data->plugin->data->status == 'success')
					{
						// The user_token uniquely identifies the user 
						// that has connected with his social network account
						$user_token = $data->user->user_token;
						
						// The identity_token uniquely identifies the social network account 
						// that the user has used to connect with
						$identity_token = $data->user->identity->identity_token;				
		
						// 1) Check if you have a userID for this token in your database
						$user_id = GetUserIdForUserToken($user_token);
		
						// 1a) If the userID is empty then this is the first time that this user 
						// has connected with a social network account on your website
						if ($user_id === null)
						{
							// 1a1) Create a new user account and store it in your database
							// Optionally display a form to collect  more data about the user.
							$user_id = {The ID of the user that you have created}
		
							// 1a2) Attach the user_token to the userID of the created account.
							LinkUserTokenToUserId ($user_token, $user_id);
						}
						// 1b) If you DO have an userID for the user_token then this user has
						// already connected before
						else
						{
							// 1b1) The account already exists
						}
		
						// 2) You have either created a new user or read the details of an existing
						// user from your database. In both cases you should now have a $user_id 
						
						// 2a) Create a Single Sign On session
						// $sso_session_token = GenerateSSOSessionToken ($user_token, $identity_token); 
						// If you would like to use Single Sign on then you should now call our API
						// to generate a new SSO Session: http://docs.oneall.com/api/resources/sso/
											
						// 2b) Login this user
						// You now need to login this user, exactly like you would login a user
						// after a traditional (username/password) login (i.e. set cookies, setup 
						// the session) and forward him to another page (i.e. his account dashboard)		
					}
				break;
			}
		}
	}?>
	

Integrate Social Link

You should now be able to create a new account on your website by using your social network account. The callback script should detect that you are either a new visitor (and create a new account for you) or a returning visitors and in both cases redirect you to the user dashboard.

Continue with the Social Link Implementation in order to allow your existing users to tie their accounts to one or more social network accounts.

User Contributed Notes