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>
