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.
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.
A set of user attributes in JSON format encoded in Base64:
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" }
Formed as:
md5(<JSON user data in Base64><Site API Key><timestamp>)
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:
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>
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>
<?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>
// 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>
// 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>