Social Login Implementation \ Login page

7. Include our JavaScript library

The library must be present only once on each page. If you have already implemented another of our services, then you might already have added the corresponding code. In this case you can skip this point.

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 add this code snippet to your website template so that it appears before the closing </head> tag. As it is loaded asynchronously, you can however add it basically anywhere in your template.

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

8. Add Social Login to your login page.

Update the template of your login page and add the following code at the place where you would like Social Login to be displayed. Make sure to replace #callback_uri# by the full URL pointing to the script created during the setup.

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

	<script type="text/javascript">	

	  /* Replace #callback_uri# with the url to your own callback script */
	  var callback_uri = '#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', callback_uri]);
		_oneall.push(['social_login', 'do_render_ui', 'oa_social_login_container']);
		
	</script>

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

9. Setup the callback script.

The callback script that you have created for your registration page can handle the registration of new users as well as the login of existing users. You do not need to create a new callback script.

10. Make a final test.

Users should now be able to first create a new account on your website using a social network account and then login with that social network account. For your final tests you should first of all remove all entries from the oneall_user table.

Then first login with a social network account on your registration page and make sure that your system creates a new account, populates the oneall_user table and logs you in.

Then logout and login with a social network account on your login page. Make sure that your system finds a match in the oneall_user table and logs you in with the corresponding account.