Category: security

How to secure pass user data into html5-chat with JWT.io?

We have chosen the jwt.io solution since that encryption library exists for any platform and development tool.

How to encode our user using JWT.IO lib ?

For better security, we do recommend using this method to encode your user data.

List of Parameters to be encoded

webmasterid*: your webmasterid token

password*: your password. It must be md5 encoded like:  md5(‘myPassword’);

username*: username of the user

gender: Gender of user: must fit the genders defined in chatadmin – : male, female, couple By default is male

role: Role of the user: can be : admin, moderator, dj, user By default is user

image :Image or Avatar of the user : must be a link (https) to url of an image By default is random avatar. Use base64_encode to avoid problems if your image uses chars such as ?&

startRoom: Default roomid when enter the chat By default is the first room (roomid is an integer number)

So you do create your user like in php as an array:

            $passwordMD5 = md5('secretPassword');
            $webmasterid= XXX;
            $user = [
                   'webmasterid'=>$webmasterid,
                   'password'=>$passwordMD5,
                   'username'=>'John',
                   'gender'=>'male',
                   'startRoom'=>5,
                   'role'=>'user',
                   'image'=>base64_encode('https://html5-chat.com/img/avatars/m/13.svg')
                   ]; 

Then you need to create an encrypted TOKEN from that user.
For that, we use jwt.io library
For PHP, we use for instance: https://github.com/firebase/php-jwt (if you use another langage, pick your library from jwt.io

---

Let do it with PHP

Step1: encode the user with JWT::encode

Create the $user array and encode it

    $password = 'secretPassword';
    $passwordMD5 = md5($password);

    $webmasterid= XXX;

   $user = ['webmasterid'=>$webmasterid
'password'=>$passwordMD5,
            'username'=>'John',
            'gender'=>'male',
            'startRoom'=>5,
            'role'=>'user',
            'image'=>base64_encode('https://html5-chat.com/img/avatars/m/13.svg')];
$encodedUser = JWT::encode($user, $password); 

As result, $encodedUser will contain base64 long encrypted string (encrypted user)

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ

Step2 : use that encoded script into your script

The pattern is:

        https://html5-chat.com/chat/{webmasterid}/{encryptedUser}

• Directly to access your chat with link

  
                  https://html5-chat.com/{webmasterid}/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ            

• Integrate your chat with a script:

  
                  <script src="https://html5-chat.com/script/{webmasterid}/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ"></script>