【JSON2WEB】16 login.html 登錄密碼加密傳輸

【JSON2WEB】系列目錄

【JSON2WEB】01 WEB管理信息系統架構設計

【JSON2WEB】02 JSON2WEB初步UI設計

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代碼前端框架介紹

【JSON2WEB】05 前端開發三件套 HTML CSS JavaScript 速成

【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】07 Amis可視化設計器CRUD增刪改查

【JSON2WEB】08 Amis的事件和校驗

【JSON2WEB】09 Amis-editor的代碼移植到json2web

【JSON2WEB】10 基于 Amis 做個登錄頁面login.html

【JSON2WEB】11 基于 Amis 角色功能權限設置頁面

【JSON2WEB】 12基于Amis-admin的動態導航菜單樹

【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查詢分析器

【JSON2WEB】14 基于Amis的CRUD開發30分鐘速成

【JSON2WEB】15 銀河麒麟操作系統下部署JSON2WEB

登錄密碼加密傳輸最直接的好處是防止密碼在傳輸過程中被竊取和破解，保障用戶賬戶安全。
防止網絡嗅探竊取密碼： 在網絡傳輸過程中，數據可能會經過多個網絡節點，黑客可利用網絡嗅探工具，在公共網絡（如咖啡館、機場的免費 Wi-Fi ）監聽數據包。若密碼以明文傳輸，嗅探到數據包就等于獲取了密碼。而加密后，傳輸的是密文，嗅探到也無法得知真實密碼。比如，在一個存在安全隱患的公共 Wi-Fi 環境中，用戶登錄銀行賬戶時，若密碼未加密傳輸，黑客一旦嗅探到相關數據包，就能獲取密碼，進而盜刷用戶資金；若密碼加密傳輸，黑客得到的只是亂碼，無法實施盜竊行為。
抵御中間人攻擊篡改密碼： 中間人攻擊者會攔截通信雙方的數據，并可能篡改傳輸內容。對于登錄密碼，如果沒有加密，攻擊者可以將正確密碼篡改成自己設定的內容，導致用戶賬號被攻擊者掌控。加密傳輸時，攻擊者雖能攔截數據，但無法解密修改，即使修改密文，接收方也無法正常解密驗證，能及時發現異常，保障登錄過程安全。例如，在電商平臺登錄場景中，攻擊者若能篡改未加密的登錄密碼，就可冒充用戶進行購物操作，給用戶造成經濟損失，而加密傳輸能有效避免此類情況發生。

在 JSON2WEB 系統中實現步驟如下：

1 MD5 加密函數 Javascript 腳本 md5.min.js

從網上找的 md5.min.js 全部腳本如下：

!function(n){"use strict";function d(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function f(n,t,r,e,o,u){return d((u=d(d(t,n),d(e,u)))<<o|u>>>32-o,r)}function l(n,t,r,e,o,u,c){return f(t&r|~t&e,n,t,o,u,c)}function g(n,t,r,e,o,u,c){return f(t&e|r&~e,n,t,o,u,c)}function v(n,t,r,e,o,u,c){return f(t^r^e,n,t,o,u,c)}function m(n,t,r,e,o,u,c){return f(r^(t|~e),n,t,o,u,c)}function c(n,t){var r,e,o,u;n[t>>5]|=128<<t%32,n[14+(t+64>>>9<<4)]=t;for(var c=1732584193,f=-271733879,i=-1732584194,a=271733878,h=0;h<n.length;h+=16)c=l(r=c,e=f,o=i,u=a,n[h],7,-680876936),a=l(a,c,f,i,n[h+1],12,-389564586),i=l(i,a,c,f,n[h+2],17,606105819),f=l(f,i,a,c,n[h+3],22,-1044525330),c=l(c,f,i,a,n[h+4],7,-176418897),a=l(a,c,f,i,n[h+5],12,1200080426),i=l(i,a,c,f,n[h+6],17,-1473231341),f=l(f,i,a,c,n[h+7],22,-45705983),c=l(c,f,i,a,n[h+8],7,1770035416),a=l(a,c,f,i,n[h+9],12,-1958414417),i=l(i,a,c,f,n[h+10],17,-42063),f=l(f,i,a,c,n[h+11],22,-1990404162),c=l(c,f,i,a,n[h+12],7,1804603682),a=l(a,c,f,i,n[h+13],12,-40341101),i=l(i,a,c,f,n[h+14],17,-1502002290),c=g(c,f=l(f,i,a,c,n[h+15],22,1236535329),i,a,n[h+1],5,-165796510),a=g(a,c,f,i,n[h+6],9,-1069501632),i=g(i,a,c,f,n[h+11],14,643717713),f=g(f,i,a,c,n[h],20,-373897302),c=g(c,f,i,a,n[h+5],5,-701558691),a=g(a,c,f,i,n[h+10],9,38016083),i=g(i,a,c,f,n[h+15],14,-660478335),f=g(f,i,a,c,n[h+4],20,-405537848),c=g(c,f,i,a,n[h+9],5,568446438),a=g(a,c,f,i,n[h+14],9,-1019803690),i=g(i,a,c,f,n[h+3],14,-187363961),f=g(f,i,a,c,n[h+8],20,1163531501),c=g(c,f,i,a,n[h+13],5,-1444681467),a=g(a,c,f,i,n[h+2],9,-51403784),i=g(i,a,c,f,n[h+7],14,1735328473),c=v(c,f=g(f,i,a,c,n[h+12],20,-1926607734),i,a,n[h+5],4,-378558),a=v(a,c,f,i,n[h+8],11,-2022574463),i=v(i,a,c,f,n[h+11],16,1839030562),f=v(f,i,a,c,n[h+14],23,-35309556),c=v(c,f,i,a,n[h+1],4,-1530992060),a=v(a,c,f,i,n[h+4],11,1272893353),i=v(i,a,c,f,n[h+7],16,-155497632),f=v(f,i,a,c,n[h+10],23,-1094730640),c=v(c,f,i,a,n[h+13],4,681279174),a=v(a,c,f,i,n[h],11,-358537222),i=v(i,a,c,f,n[h+3],16,-722521979),f=v(f,i,a,c,n[h+6],23,76029189),c=v(c,f,i,a,n[h+9],4,-640364487),a=v(a,c,f,i,n[h+12],11,-421815835),i=v(i,a,c,f,n[h+15],16,530742520),c=m(c,f=v(f,i,a,c,n[h+2],23,-995338651),i,a,n[h],6,-198630844),a=m(a,c,f,i,n[h+7],10,1126891415),i=m(i,a,c,f,n[h+14],15,-1416354905),f=m(f,i,a,c,n[h+5],21,-57434055),c=m(c,f,i,a,n[h+12],6,1700485571),a=m(a,c,f,i,n[h+3],10,-1894986606),i=m(i,a,c,f,n[h+10],15,-1051523),f=m(f,i,a,c,n[h+1],21,-2054922799),c=m(c,f,i,a,n[h+8],6,1873313359),a=m(a,c,f,i,n[h+15],10,-30611744),i=m(i,a,c,f,n[h+6],15,-1560198380),f=m(f,i,a,c,n[h+13],21,1309151649),c=m(c,f,i,a,n[h+4],6,-145523070),a=m(a,c,f,i,n[h+11],10,-1120210379),i=m(i,a,c,f,n[h+2],15,718787259),f=m(f,i,a,c,n[h+9],21,-343485551),c=d(c,r),f=d(f,e),i=d(i,o),a=d(a,u);return[c,f,i,a]}function i(n){for(var t="",r=32*n.length,e=0;e<r;e+=8)t+=String.fromCharCode(n[e>>5]>>>e%32&255);return t}function a(n){var t=[];for(t[(n.length>>2)-1]=void 0,e=0;e<t.length;e+=1)t[e]=0;for(var r=8*n.length,e=0;e<r;e+=8)t[e>>5]|=(255&n.charCodeAt(e/8))<<e%32;return t}function e(n){for(var t,r="0123456789abcdef",e="",o=0;o<n.length;o+=1)t=n.charCodeAt(o),e+=r.charAt(t>>>4&15)+r.charAt(15&t);return e}function r(n){return unescape(encodeURIComponent(n))}function o(n){return i(c(a(n=r(n)),8*n.length))}function u(n,t){return function(n,t){var r,e=a(n),o=[],u=[];for(o[15]=u[15]=void 0,16<e.length&&(e=c(e,8*n.length)),r=0;r<16;r+=1)o[r]=909522486^e[r],u[r]=1549556828^e[r];return t=c(o.concat(a(t)),512+8*t.length),i(c(u.concat(t),640))}(r(n),r(t))}function t(n,t,r){return t?r?u(t,n):e(u(t,n)):r?o(n):e(o(n))}"function"==typeof define&&define.amd?define(function(){return t}):"object"==typeof module&&module.exports?module.exports=t:n.md5=t}(this);
//# sourceMappingURL=md5.min.js.map

2 login.html 文件引入 md5.min.js

<body><div id="root" class="app-wrapper"></div><script src="/sdk/sdk.js"></script><script src="/public/md5.min.js"></script> <!-- md5() 加密 --><script src="/config.js" type="text/javascript"></script> <!-- httpIP --><script type="text/javascript">

3 登錄表單 api 增加 requestAdaptor 請求適配器

{type: 'form',title: '登錄 JSON2WEB',mode: 'horizontal',api: {// index.html 也要同步修改IP , httpIP的定義在config.js// url: 'http://192.168.1.117:5217' + '/token/generate-token?userid=$userId&passwd=$passWd',url: httpIP + ':5217/token/generate-token?userid=$userId&passwd=$passWd',method: 'get', requestAdaptor: function (api,context) {                        let psword = md5(api.query.passwd).toUpperCase();   // 加密            api.url = httpIP + ':5217/token/generate-token?userid=' + api.query.userid + '&passwd=' + psword;// console.log(api);return api;},               adaptor: function (payload) {console.log(payload);if (payload.status === 0) {localStorage.setItem('userName', payload.userName);localStorage.setItem('token', payload.data.token);let rows = JSON.stringify(payload.data.rows)// console.log('rows',rows);localStorage.setItem('rows', rows);// localStorage.clear(); location.href = '/login.html';return payload;}}},

其中核心代碼：

requestAdaptor: function (api,context) {                        let psword = md5(api.query.passwd).toUpperCase();   // 加密            api.url = httpIP + ':5217/token/generate-token?userid=' + api.query.userid + '&passwd=' + psword;// console.log(api);return api;},

請求適配器取出明文密碼，md5加密后，在拼接 url 最后 return api ;
login.html的全部代碼如下：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>JSON2WEB4amis</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><link rel="stylesheet" href="/sdk/sdk.css" /><link rel="stylesheet" href="/sdk/helper.css" /><link rel="stylesheet" href="/sdk/iconfont.css" /><!-- 這是默認主題所需的，如果是其他主題則不需要 --><!-- 從 1.1.0 開始 sdk.css 將不支持 IE 11，如果要支持 IE11 請引用這個 css，并把前面那個刪了 --><!-- <link rel="stylesheet" href="sdk-ie11.css" /> --><!-- 不過 amis 開發團隊幾乎沒測試過 IE 11 下的效果，所以可能有細節功能用不了，如果發現請報 issue --><style>html,body,.app-wrapper {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head><body><div id="root" class="app-wrapper"></div><script src="/sdk/sdk.js"></script><script src="/public/md5.min.js"></script> <!-- md5() 加密 --><script src="/config.js" type="text/javascript"></script> <!-- httpIP --><script type="text/javascript">(function () {let amis = amisRequire('amis/embed');// 通過替換下面這個配置來生成不同頁面let amisJSON = {type: 'page',title: '',body: [{type: "grid",columns: [{body: [],md: 3},{body: [{type: 'form',title: '登錄 JSON2WEB',mode: 'horizontal',api: {// index.html 也要同步修改IP , httpIP的定義在config.js// url: 'http://192.168.1.117:5217' + '/token/generate-token?userid=$userId&passwd=$passWd',url: httpIP + ':5217/token/generate-token?userid=$userId&passwd=$passWd',method: 'get', requestAdaptor: function (api,context) {                        let psword = md5(api.query.passwd).toUpperCase();   // 加密            api.url = httpIP + ':5217/token/generate-token?userid=' + api.query.userid + '&passwd=' + psword;// console.log(api);return api;},               adaptor: function (payload) {console.log(payload);if (payload.status === 0) {localStorage.setItem('userName', payload.userName);localStorage.setItem('token', payload.data.token);let rows = JSON.stringify(payload.data.rows)// console.log('rows',rows);localStorage.setItem('rows', rows);// localStorage.clear(); location.href = '/login.html';return payload;}}},redirect: '/index.html',body: [{label: '用戶ID：',type: 'input-text', "required": true,name: 'userId'},{label: '密 碼：',type: 'input-password', "required": true,name: 'passWd'}],submitText:"登錄"}],md: 6},{body: [],md: 3}]},]};let amisScoped = amis.embed('#root', amisJSON);})();</script>
</body></html>

4 后端密碼驗證同步修改

// 用戶ID及密碼驗證
func uidPwdIsValid(uid_pwd map[string]string) int {// sSql := "select 5217 as valid from s_user where p_id = '" + uid_pwd["Userid"] + "' and s_passw = md5_32('" + uid_pwd["Passwd"] + "')"sSql := "select 5217 as valid from s_user where p_id = '" + uid_pwd["Userid"] + "' and s_passw = '" + uid_pwd["Passwd"] + "'"result := Icrud.SelectData(sSql)// fmt.Println(sSql)if strings.Index(result, "5217") > 0 {return 1}return 401
}