Configuring Single Sign-On

Single Sign-On (SSO) allows the registered (on your site) users work with widget and post comments.

Example

You are an administrator of the resource www.example.org, and on your website is a user Sam. You do not want that this user again authorize in the widget that post a comment. Then you configuring a Single Sign-On for your users with a widget Cackle and then, user Sam (and everyone else) will be able to comment without re-authorization through your account.

Configuring

To configure Single Sign-On, you must add in the widget code parameter ssoAuth. Value must be formed on the server* and be equal:

<JSON user data in Base64><space><MD5 signature><space><timestamp> * This is necessary for security reasons, your Site API Key no one should not know except you.

JSON user data

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 (optional) - 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

MD5 signature

Formed as:

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

Site API Key

Can get in the Admin panel under "Install" below choosing WordPress plugin, as shown in the figure below:

comments sso comments sso

Logging out

To log a user out of SSO, pass instead JSON user data, empty JSON object {}.

Adding your own SSO login link

You can add a custom icon for SSO login. Icon will be located at the beginning of the authorization providers. To this, add into widget code mcSSOProvider parameter as shown in the example below:

cackle_widget = window.cackle_widget || [];
cackle_widget.push({widget: 'Comment', id: 1, ssoProvider: {
    name: 'Example',
    url: 'http://example.org/login',
    logo: 'http://example.org/logo.png',
    width: 64,
    height: 64
}});

where

  • name - provider name, for example the name of your site
  • url - address to authenticate users on your site
  • logo - authorization icon
  • width (optional) - icons width, the default 24px
  • height (optional) - icons height, default 24px

Login via popup (login window)

If you add a custom icon SSO authorization, in login popup this also appears and with successful authentication on your site, you need to set cookie mc-sso-auth value success and close the window (window.close ()), after it cookies mc-sso-auth will be read in widget and do refresh.

Example (php)

Let's go back to the user Sam, let him id - 7, email - sam@example.org and avatar - http://example.org/sam.png. Suppose that example.org written in php and Site API Key is 123456789. Then, before the widget code you need to place the following code:

<?php
    $user = array(
        'id' => '7',
        'name' => 'Sam',
        'email' => 'sam@example.org',
        'avatar' => 'http://example.org/sam.png'
    );
    $siteApiKey = "123456789";
    $user_data = base64_encode(json_encode($user));
    $timestamp = round(microtime(true) * 1000);
    $sign = md5($user_data . $siteApiKey . $timestamp);
?>

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

Example (Java)

// User data
String json = "{\"id\": \"7\", \"name\": \"Sam\", \"email\": \"sam@example.org\", \"avatar\": \"http://example.org/sam.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 siteApiKey = "YOUR SITE KEY";
String sign = org.apache.commons.codec.digest.DigestUtils.md5Hex(b64 + siteApiKey + timestamp);

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

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

Example (C#)

// User data
string json = "{\"id\": \"7\", \"name\": \"Sam\", \"email\": \"sam@example.org\", \"avatar\": \"http://example.org/sam.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 = "YOUR SITE KEY";
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">
cackle_widget = window.cackle_widget || [];
cackle_widget.push({widget: 'Comment', id: 1, ssoAuth: '<%#ssoauth%>'});
</script>