Integrating Single Sign-On

Access to Single Sign-On (SSO) is currently available as a free feature for your WidgetPack account. SSO allows users to sign into a site and fully use WidgetPack Comments without again authenticating with WidgetPack or Socials.

Configure

To configure SSO, you must add in the widget init code (into wpac_init var) additional parameter sso_auth. Value of sso_auth must be formed on the server and be equal:

<JSON user data in Base64><space><MD5 signature><space><timestamp>

Please attention: always create this value to the server, otherwise your API key can be compromised.

JSON user data in Base64

A set of user attributes in JSON format encoded in Base64:

id - unique user ID associated with site account within your user database;
name - the displayed name for that account;
email - the registered email address for that account;
avatar (optional) - a link to that user's avatar;
www (optional) - a link to the user's website.

Example

{
  "id": 78,
  "name": "Agent Smith",
  "email": "smith@nowhere.com",
  "avatar": "https://pbs.twimg.com/profile_images/555107327620042752/xS_ft67a.png",
  "www": "http://example.com"
}

MD5 signature

Formed as:

md5(<JSON user data in Base64><Site API Key><timestamp>)

JSON user data in Base64 - described in the above topic;
Site API Key - get from administration panel, menu Site / Setting, API Key field;
timestamp - current timestamp in milliseconds (the

Note: SSO payloads expire after 10 minutes.

SSO login button

You can configure WidgetPack to display your site's login button together with default social providers (Facebook, Twitter, etc.). You will need to host a small (143x32) image that will act as a button and additional parameter sso in wpac_init var like example below:

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({
  widget: 'Comment',
  id: 1122,
  sso: {
    name:    'SampleBlog',
    button:  'http://example.com/img/sample-blog.png',
    url:     'http://example.com/signin',
    logout:  'http://example.com/signout',
    width:   '670',
    height:  '520'
  }
});
</script>

Details:

name - Your site's name. We will display it in the Post As window.
button - Link to the image that acts as a login button.
url - Link to your login page. The page will be opened in a new window and it must close itself after authentication is done. That's how we know when it is done and reload the page.
logout - Link to your logout page. This page must redirect user back to the original page after logout.
width (optional) - Width of the login popup window. Default is 670.
height (optional) - Height of the login popup window. Default is 520.

Note:
1. To close window popup automatically you need to use a Javascript snippet after login like: setTimeout('close()', 300);
2. If you don't want to reload page after closing login window you need to set wpac-sso-token cookie with sso_auth parameter after a successful login or cancel value if login failed. For instance:

<script type="text/javascript">
  if (isUserLoggedIn()) {
    document.cookie = 'wpac-sso-token=<?php echo "$sso"; ?>; path=/';
  } else {
    document.cookie = 'wpac-sso-token=cancel';
  }
  setTimeout('close()', 300);
</script>

Logout

To log a user out of SSO, just pass empty value of sso_auth.

Also you can track logout on the widget side (JavaScript). To do it, just add logout callback.

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({
  widget: 'Comment',
  id: 1122,
  sso_auth: '',
  callback: {
    logout: [function() {
      //Your site logout logic, for instance
      window.location.reload();
    }]
  }
});
</script>

Example - PHP

<?php
  $user = array(
    'id' => '78',
    'name' => 'Agent Smith',
    'email' => 'smith@nowhere.com',
    'avatar' => 'https://pbs.twimg.com/profile_images/555107327620042752/xS_ft67a.png'
  );
  $site_api_key = "my_site_api_key_64_char_length";
  $user_data = base64_encode(json_encode($user));
  $timestamp = round(microtime(true) * 1000);
  $sign = md5($user_data . $site_api_key . $timestamp);
?>

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Comment', id: 1122, sso_auth: "<?php echo "$user_data $sign $timestamp"; ?>"});
</script>

Example - Java

// User data
String json = "{\"id\": \"78\", \"name\": \"Agent Smith\", \"email\": \"smith@nowhere.com\", \"avatar\": \"https://pbs.twimg.com/profile_images/555107327620042752/xS_ft67a.png\"}";

// Encode to Base64 with UTF-8
String b64 = new String(org.apache.commons.codec.binary.Base64.encodeBase64(json.getBytes()));

// Create sign with MD5
long timestamp = System.currentTimeMillis();
String site_api_key = "my_site_api_key_64_char_length";
String sign = org.apache.commons.codec.digest.DigestUtils.md5Hex(b64 + site_api_key + timestamp);

// Finally we get the complete token
String sso_auth = b64 + " " + sign + " " + timestamp;

// Can use it in <script>
<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Comment', id: 1122, sso_auth: '${sso_auth}'});
</script>

Example - C#

// User data
string json = "{\"id\": \"78\", \"name\": \"Agent Smith\", \"email\": \"smith@nowhere.com\", \"avatar\": \"https://pbs.twimg.com/profile_images/555107327620042752/xS_ft67a.png\"}";

// Encode to Base64 with UTF-8
byte[] toEncodeAsBytes = System.Text.Encoding.UTF8.GetBytes(json);
string user_base64 = System.Convert.ToBase64String(toEncodeAsBytes);

// Create sign with MD5
long timestamp = (long)(DateTime.UtcNow - new DateTime(1970, 1, 1)).TotalMilliseconds;
string siteApiKey = "my_site_api_key_64_char_length";
System.Security.Cryptography.MD5 md5 = System.Security.Cryptography.MD5.Create();
byte[] inputBytes = System.Text.Encoding.UTF8.GetBytes(user_base64 + siteApiKey + timestamp);
byte[] hashBytes = md5.ComputeHash(inputBytes);

// Convert the byte array to hexadecimal string
StringBuilder sb = new StringBuilder();
for (int i = 0; i < hashBytes.Length; i++) {
    //IMPORTANT: lowercase letters in HEX
    sb.Append(hashBytes[i].ToString("x2"));
}
string sign = sb.ToString();

// Finally we get the complete token
string ssoauth = string.Format("{0} {1} {2}", user_base64, sign, timestamp);

// Can use it in <script>
<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Comment', id: 1122, sso_auth: '<%#ssoauth%>'});
</script>