{"id":99,"date":"2017-12-28T16:03:18","date_gmt":"2017-12-28T16:03:18","guid":{"rendered":"https:\/\/html5-chat.com\/blog\/?p=99"},"modified":"2022-12-31T14:59:52","modified_gmt":"2022-12-31T14:59:52","slug":"how-to-secure-pass-user-data-into-html5-chat","status":"publish","type":"post","link":"https:\/\/html5-chat.com\/blog\/how-to-secure-pass-user-data-into-html5-chat\/","title":{"rendered":"How to secure pass user data into html5-chat with JWT ? (updated)"},"content":{"rendered":"<h2>How to secure pass user data into html5-chat with JWT.io?<\/h2>\n<p>We have chosen the jwt.io solution since that encryption library exists for any platform and development tool.<\/p>\n<h3>How to encode our user using JWT.IO lib ?<\/h3>\n<p>For better security, we do recommend using this method to encode your user data.<\/p>\n<h2>List of Parameters to be encoded<\/h2>\n<p><strong class=\"label label-success\">webmasterid*<\/strong>: your webmasterid token<\/p>\n<p><strong class=\"label label-success\">password*<\/strong>: your password. <strong>It must be md5 encoded like:\u00a0 md5(&#8216;myPassword&#8217;);<\/strong><\/p>\n<p><strong class=\"label label-success\">username*<\/strong>: username of the user<\/p>\n<p><strong class=\"label label-default\">gender<\/strong>: Gender of user: must fit the genders defined in chatadmin &#8211; : male, female, couple\u00a0<i>By default is male<\/i><\/p>\n<p><strong class=\"label label-default\">role<\/strong>: Role of the user: can be : admin, moderator, dj, user\u00a0<i>By default is user<\/i><\/p>\n<p><strong class=\"label label-default\">image\u00a0<\/strong>:Image or Avatar of the user : must be a link (https) to url of an image\u00a0<i>By default is random avatar. Use base64_encode to avoid problems if your image uses chars such as ?&amp;<\/i><\/p>\n<p><strong class=\"label label-default\">startRoom<\/strong>: Default roomid when enter the chat\u00a0<i>By default is the first room (roomid is an integer number)<\/i><\/p>\n<p>So you do create your user like in php as an array:<\/p>\n<pre><code class=\"language-scss\" data-lang=\"scss\">\n            $passwordMD5 = <strong>md5('secretPassword');<\/strong>\n            $webmasterid= XXX;\n            $user = [\n                   'webmasterid'=&gt;$webmasterid,\n                   'password'=&gt;$passwordMD5,\n                   'username'=&gt;'John',\n                   'gender'=&gt;'male',\n                   'startRoom'=&gt;5,\n                   'role'=&gt;'user',\n                   'image'=&gt;base64_encode('https:\/\/html5-chat.com\/img\/avatars\/m\/13.svg')\n                   ]; <\/code><\/pre>\n<p>Then you need to create an encrypted TOKEN from that user.<br \/>\nFor that, we use\u00a0<a href=\"https:\/\/jwt.io\/\">jwt.io<\/a>\u00a0library<br \/>\nFor PHP, we use for instance:\u00a0<a href=\"https:\/\/github.com\/firebase\/php-jwt\">https:\/\/github.com\/firebase\/php-jwt<\/a>\u00a0(if you use another langage, pick your library from\u00a0<a href=\"https:\/\/html5-chat.com\/jwt.io\">jwt.io<\/a><\/p>\n<hr \/>\n<h2>Let do it with PHP<\/h2>\n<h4>Step1: encode the user with JWT::encode<\/h4>\n<p>Create the $user array and encode it<\/p>\n<pre><code class=\"language-javascript\" data-lang=\"javascript\">\n    $password = 'secretPassword';\n    $passwordMD5 = md5($password);<\/code><\/pre>\n<pre><code class=\"language-javascript\" data-lang=\"javascript\">    <code class=\"language-scss\" data-lang=\"scss\">$webmasterid= XXX;<\/code><\/code><\/pre>\n<pre><code class=\"language-javascript\" data-lang=\"javascript\">   $user = ['webmasterid'=&gt;$<code class=\"language-scss\" data-lang=\"scss\">webmasterid<\/code><\/code>\n<code class=\"language-javascript\" data-lang=\"javascript\">'password'=&gt;$passwordMD5,\n            'username'=&gt;'John',\n            'gender'=&gt;'male',\n            'startRoom'=&gt;5,\n            'role'=&gt;'user',\n            'image'=&gt;<code class=\"language-scss\" data-lang=\"scss\">base64_encode(<\/code>'https:\/\/html5-chat.com\/img\/avatars\/m\/13.svg')];\n$encodedUser = JWT::encode($user, $password); <\/code><\/pre>\n<pre>As result, $encodedUser will contain base64 long encrypted string (encrypted user)\n\n<em>eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ<\/em><\/pre>\n<h4>Step2 : use that encoded script into your script<\/h4>\n<p>The pattern is:<\/p>\n<pre>        https:\/\/html5-chat.com\/chat\/{webmasterid}\/{encryptedUser}\n<\/pre>\n<ul>\n<li>Directly to access your chat with link\n<pre><code>\n                https:\/\/html5-chat.com\/{webmasterid}\/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ            <\/code><\/pre>\n<\/li>\n<li>Integrate your chat with a script:\n<pre><code>\n                &lt;script src=\"https:\/\/html5-chat.com\/script\/{webmasterid}\/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3ZWJtYXN0ZXJpZCI6IjEiLCJwYXNzd29yZCI6InlhcmVrYyIsInVzZXJuYW1lIjoiSm9obiIsImdlbmRlciI6Im1hbGUiLCJyb2xlIjoidXNlciIsImltYWdlIjoiaHR0cHM6XC9cL2h0bWw1LWNoYXQuY29tXC9pbWdcL2F2YXRhcnNcL21cLzEzLnN2ZyJ9.8mPMCKnDRMrupsHRQw5ArXmyhh4oQBNcumKDCgO5TdQ\"&gt;&lt;\/script&gt;            <\/code><\/pre>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-99","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-security"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":14,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":1432,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions\/1432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media\/319"}],"wp:attachment":[{"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5-chat.com\/blog\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}