Sie sind auf Seite 1von 8

Social Login Implementation guide Version 2.

0
This guide will help you in implementing Social Annex Social Login module, please follow the steps
below.
1. Add following javascript on page where you want to display the buttons
<script type=text/javascript>
(function(d){
var js, id = 'socialannex-s13', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//cdn.socialannex.com/partner/{siteid}/s13.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>

2. Displaying the Login buttons


a. Add the following div where you want the buttons to be displayed.
<div id=show_provider_small ></div> //for small buttons
<div id=show_provider ></div> //for large buttons
<div id=show_provider_connected ></div> //for connected buttons

b. Add the below javascript.


<script>
window.S13AsyncInit = function(){
SAS13Obj.init(options,callback);
};
</script>

Values for options (required)


1. siteid (required) (integer)
2. siteuid (optional) (string)
3. buttonType (optional) (array)
4. showbuttons(optional) (bool)
Values for callback (required)
1. redirect url (string)
2. callback function (function)

Options parameter information:


1. siteid (required) Social Annex will generate a site id and provide it to you, please pass that
integer.
2. siteuid (optional) user ID generated by you, after the user logs in.
3. buttonType (optional) select which type of button you want displayed.
'small' small icons
'regular' larger icons
'connected' this will work only if siteuid is provided
4. showbuttons (optional) if you wish to use your own buttons set this to false and we will not
render any buttons.
Callback parameter information:
1. redirect url after user logs in we will pass authentication code to this url where you will have
to run some server side code to get user information.
2. callback function we will return control to your callback function with user info directly. This
is unsecure because we don't ask you to authenticate your site.

Example for implemention with redirect url:


Browser side code:
<script>
window.S13AsyncInit = function(){
SAS13Obj.init(
{
siteid:142544
},
http://yourdomain.com/handlelogin.php);
};
</script>

Server side code for PHP (handlelogin.php)


<?php
//handle secure cross domain messaging
if (isset($_GET['msgcode']))
{
$url = "https://api.socialannex.com/s13/v2/service/postmessage-script.php?msgcode=".urlencode($_GET['msgcode']);
$resp =file_get_contents($url);
exit($resp);
}
/* following only in case where yahoo is a enabled provider */
function yahoopost($url,$data)
{
if(!(function_exists('curl_version')))
throw new Exception("Social login requires curl to proceed");
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //dont enforce verify the ssl
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$resp = curl_exec($ch);
curl_close($ch);
$matches = array();
$urlRedirectPattern = "/Location:.*\s/";
preg_match($urlRedirectPattern, $resp, $matches);
I f(isset($matches[0]))
$redirect = substr($matches[0],10,-1);
else
throw new Exception("Yahoo redirection header not found");
header('Location: '.$redirect);
exit();
}

if(isset($_GET['sa_yahoo']))
{
$url = base64_decode($_GET['sa_yahoo']);
yahoopost($url,$_POST);
exit();
}
/*end yahoo custom code */
$redirect_uri = "http://yourdomain.com/handlelogin.php"; // must be same as provided in javascript
$secret = "1234"; //Social Annex will provide this to you, this is secret and must be on server side to maintain security.
$siteid = "7788990"; //Social Annex will provide this for you.
$oauthCode = $_GET['code'];
$params = array(
'client_secret'=>$secret,
'oauth_code'=>$oauthCode,
'redirect_url'=>$redirect_uri,
'siteid'=>$siteid
);
$tokenUrl = "https://api.socialannex.com/s13/v2/service/get_access_token.php?".http_build_query($params);
$accessToken = file_get_contents($tokenUrl);
$token = json_decode($accessToken);
//get profile info
$resUrl = "https://api.socialannex.com/s13/v2/service/get_user_info.php?access_token=".$token->access_token;
$profileJson = file_get_contents($resUrl); // this will contain profile information

Example for implementation with callback function :


Browser side code:
<script>
window.S13AsyncInit = function(){
SAS13Obj.init({siteid:142544},function(profiledata){
//handle logic for callback function
});
};
</script>

Server side code (handlelogin.php):


<?php
//handle secure cross domain messaging
if (isset($_GET['msgcode']))
{
$url = "https://api.socialannex.com/s13/v2/service/postmessage-script.php?msgcode=".urlencode($_GET['msgcode']);
$resp =file_get_contents($url);
exit($resp);
}

Supplementary REST Api:


1. Linking providers to a user:
https://api.socialannex.com/s13/v2/service/link-provider.php
Make a GET request to above url, with following query parameters.
parameters (all params required) :
1. siteid : site id provided by Social Annex
2. uid : user id returned by Social Annex with the profile data after the user logs in
3. siteuid : user id generated by your site
4. action
1. 'add' to link a provider to user
2. 'del' to unlink the provider from user
Response:
1. boolean : confirming if operation was performed successfully or not,
On error:
response JSON with error information.

2. Get Access token :


https://api.socialannex.com/s13/v2/service/get_access_token.php
Make a GET request to above url, with following query parameters.
Parameters (all params required):
1. siteid : site id provided by Social Annex
2. client_secret: client secret provided by social annex
3. oauth_code: this is the code attached to the redirect file after user logs in using social providers
4. redirect_url: this is the redirect url u provided to the javascript function in your browser side code.
Response:
JSON response in OAuth 2.0 format
{
"access_token":"2YotnFZFEjr1zCsicMWpAA",
"expires_in":3600,
"refresh_token":"tGzv3JOkF0XG5Qx2TlKWIA",
}
On error:
response JSON with error information.

3. Get User info


https://api.socialannex.com/s13/v2/service/get_user_info.php
Make a GET request to above url, with following query parameters.
Parameters (all params required) :
1. access_token : access token obtained after user authentication
Response:
{"id":"133726",
"uid":"10791350352c7c0067c948",
"siteuid":"",

"site_id":"9918060",
"user_name":"",
"firstname":"Abrar",
"lastname":"Ahmed",
"image_url":"",
"profile_url":"",
"birth_date":"0000-00-00",
"email":"aahmedsocialannex@yahoo.com",
"gender":"m",
"likes":"",
"city":"",
"state":"",
"country":"",
"phone_number":"",
"interests":"",
"followers_count":"0",
"friends_count":"0",
"languages":"",
"organization":"",
"religion":"",
"time_zone":"",
"photos":"",
"address":"",
"political_view":"",
"relation_status":"",
"books":"",
"movies":"",
"music":"",
"about_me":"",
"tv_shows":"",
"status":"",
"position":"",
"loginprovideruid":"TC2EUZVusIrS60oeKBrRpB_00p004JccPvltD0j0",
"issiteuid":"false",
"issiteuser":"false",
"providers":"yahoo",
"age":"0",
"num_of_logins":"0",
"person_id":"0",
"db_add_date":"2014-01-04",
"db_update_date":"2014-01-06"}
Note: out of all the fields above the only reliable fields that are common to all social networks are the following
ID,UID, firstname, lastname, Email, providers, loginprovideruid, db_add_date, db_update_date
Explanation of the fields
ID this is social annex internal ID.
UID this is social annex generated User ID.
Providers the social network that the user has logged in from, this is a string value of the name of the network.
Loginprovideruid the user ID generated by social network to identify the user on their network.
Siteuid User ID generated by you, when u register a user on your site, (this can only populate if you have called our link
providers api , see detail in point 1 of supplementary api section).
Other fields are self explanatory.

On error:
response JSON with error information.

Das könnte Ihnen auch gefallen