Implementation On Websites \ Social Link

In this part we will explain you how to deploy Social Link so that your users can link one or more social network accounts to their existing account. After having linked a social network account, these users will also be able to login using the Social Login service that you have added in the previous step.

Add Social Link to the account settings page of your users

Update your users' account settings 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.

The UI goal should be that users can easily identify that they can link their social network accounts. Please have a look at your Profile Page to get an idea on how it could look like.

<div id="oa_social_link_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#'; 

	/* Dynamically add the user_token of the currently logged in user. */ 
	/* Leave the field blank in case the user has no user_token yet. */
	var user_token = '';
	  
	/* Embeds the buttons into the oa_social_link_container */
	var _oneall = _oneall || [];
	_oneall.push(['social_link', 'set_providers', ['facebook', 'google', 'twitter']]);
	_oneall.push(['social_link', 'set_callback_uri', your_callback_script]);
	_oneall.push(['social_link', 'set_user_token', user_token]);
	_oneall.push(['social_link', 'do_render_ui', 'oa_social_link_container']);
		
</script>

A user_token is a unique identifier that you receive from our API whenever a user connects with Social Login or links an account with Social Link. The user_token uniquely identifies the user that has connected with his social network account.

If a user has never logged in with his social entwork account then you will not have a user_token for this user. In this case just leave the user_token empty to have our API create a new one.

After having received a user_token from your API you have to store it in your database and include it each time that you display Social Link to the same user.

Social Link User Token

Test your setup

If you have finished setting up your account settings page then 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.

Further improve your callback script

When the user clicks on the icon of a social network (i.e. Facebook), he will be asked to sign in with his account. If the user successfully authenticates he will be redirected to the callback_uri that you have specified in the plugin parameters.

The callback_uri is an URL to a script on your server. This script contains a few lines of code that extract the POST parameter connection_token and fetch the user profile data by sending a request to the OneAll API.

Callback Script Handler

In the Social Login Setup we already created a callback script handle the logins to your website. We will now enhance this script to also handle the account linking.

One and the same user can link multiple social network accounts (i.e. Facebook & Twitter) to one single user account. For the same user, our API will always return the same user_token. The API will return a different identity_token for each of the linked social network accounts (identities).

	<?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 Resource
		//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)
		{
			//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 plugin
			if ($data->plugin->key == 'social_login')
			{
				//http://docs.oneall.com/plugins/guide/social-login/
			}
			elseif ($data->plugin->key == 'social_link')
			{
				//Operation successful
				if ($data->plugin->data->status == 'success')
				{
					//Identity linked
					if ($data->plugin->data->action == 'link_identity')
					{
						//The identity <identity_token> has been linked to the user <user_token>
						$user_token = $data->user->user_token;
						$identity_token = $data->user->identity->identity_token;

						//Next Step:
						// 1] Get _your_ $userid from _your_ SESSION DATA
						// 2] Check if the $userid is linked to this user_token: GetUserIdForUserToken($user_token)
						// 2.1] If not linked, tie the <user_token> to this userid : LinkUserTokenToUserId($user_token, $user_id)
						// 3] Redirect the user to the account linking page
					}
					//Identity Unlinked
					elseif ($data->plugin->data->action == 'unlink_identity')
					{
						//The identity <identity_token> has been unlinked from the user <user_token>
						$user_token = $data->user->user_token;
						$identity_token = $data->user->identity->identity_token;

						//Next Step:
						// 1] At your convenience
						// 2] Redirect the user to the account linking page
					}
				}
			}
		}
	}
	?>
	

Optionally add Single Sign On

After having finished this step, you should be able to link your account to one or more social network accounts. The callback script should detect that you are either want to link a social network account (and store this link in the database) or unlink a social network account. In both cases you should be redirected to the user account settings page.

If you have multiple websites then you might now continue with the Single Sign On implementation.

User Contributed Notes