22 Aug

New Feature Now Available for Sites and Communities: CUSTOM LOGIN

Any Size User Base and Communities can now integrate Chatwing directly.


Custom login feature allows you the developer to integrate your own account system into your chatWING chatbox so that your users can start chatting without having to registering a new account or using another account from Facebook, Twitter etc…


Use the Following Instructions to Integrate:

How to automatically login user

Once you have custom login enabled, you can also integrate it within your website so that users won’t have to login twice. In order to do so, you must follow the process of encrypting the user session in “How to integrate” section.
When you have the encrypted session, simply append it using the query param custom_session to the chatbox url (if you are using iFrame code)
http://chatwing.com/chatbox/83206479-8cb4-455a-a0ef-59506057fa13?custom_session=<?= $encryptedSession ?>
or direct url
http://chatwing.com/admin1626?custom_session=<?= $encryptedSession ?>
If you are using Javascript code to embed chatwing chatbox (either it is embedded or popout version), you need to do this. chatWING Javascript code automatically picks any encrypted session stored in window.chatwingSession and appends it into the chatbox url.
<script type="text/javascript">
window.chatwingSession = "<?= $encryptedSession ?>";
</script>
NOTE: If you have more than one chatbox in the same page, you need to generate different encrypted sessions using different secrets (from each chatbox) because one encrypted session can only be used for one chatbox.

How to integrate (in English)

In order to use custom login feature, you must provide the login URL, user icon and login button icon.
  • Login URL: When an anonymous user wants to login, they are redirected to this URL. In the login URL, you must provide a way for users to login and/or register new account. You are responsible for handling any errors that may occur during the process. After the user is authenticated, you must redirect them back to redirect_url (it is provided automatically when calling login url from the chatbox) along with a new query param called custom_sessioncontaining the encrypted session of the user (more on it later).
    For example, if your login url is http://mydomain.com/chatwing-login, the redirecting url would be
    http://mydomain.com/chatwing-login?redirect_url=http%3A%2F%2Fchatwing.com%2Fchatbox%2F83206479-8cb4-455a-a0ef-59506057fa13%2Fcustom
    After authenticating and encrypting the user session, you must redirect the user back to us by using the above redirect_url and append the encrypted session in custom_session
    http://chatwing.com/chatbox/83206479-8cb4-455a-a0ef-59506057fa13/custom?custom_session=[the encrypted session]
  • Secret: This is used to encrypt the custom user session. Here is an example of the PHP implementation
    $data = array(
    'id' => 1,
    'name' => 'Custom Login',
    'avatar' => 'http://mydomain.com/avatar/1.png',
    'expire' => round(microtime(true) * 1000) + 60*60*1000 // in millisecond
    );

    $data = json_encode($data);

    $blocksize = 16;

    $secret = '';
    $md5 = md5($secret);

    // Strictly maintains the length of key and iv
    $key = substr($md5, 0, 16);
    $iv = substr($md5, 16, 16);

    // We need to pad the input manually to match with the server-side's padding scheme
    $pad = $blocksize - (strlen($data) % $blocksize);
    $data = $data . str_repeat(chr($pad), $pad);

    $encryptedSession = bin2hex(mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $data, MCRYPT_MODE_CBC, $iv));
    • id (required): It can be anything as long as it is unique to identify each user
    • name (required): Name, just name
    • avatar (required): Absolute path to the avatar (must start with http:// or https://, otherwise, http:// will be appended automatically)
    • expire (optional): The lifespan of your custom session (in millisecond). It is recommended that you set it to a reasonable value to avoid identity thief
  • User icon: The icon displayed near the name (must be 16×16) Custom login user icon
  • Login button: The button displayed in the login method dialog (must be 88×25) Custom login button