登入頁 form 表單
<form action="/" id="loginForm" method="post" role="form">
<div class="dl box-shadow1">
<div class="dl-bj space-m ">
<div class="dl-box space-m">
<div class="dl-box-left float-l">
<div class="dl-box-left-text">
<div class="neme float-l">使用者名</div>
<input class="text1 float-l" id="UserAccount" name="UserAccount" type="text"
autocomplete="off" value="" />
</div>
<div class="dl-box-left-text space-m-t-05">
<div class="neme float-l">密 碼</div>
<input class="text2 float-l" id="Password" name="Password" type="password"
autocomplete="off" value="" />
</div>
<div class="float-l" style="width:372px">
<table>
<tr>
<td>
<div class="dl-box-left-textyzm space-m-t-05">
<div class="neme float-l">驗證碼</div>
<input class="text3" id="SecurityCode" name="SecurityCode"
type="text" autocomplete="off" value="" />
</div>
</td>
<td>
<div class="neme"><img style=" margin-top:4px;border-radius:5px;"
onclick="this.src= document.location.protocol + '/Account/GetSecurityCode?flag=' + Math.random(); "
id="secImg" title="換一張" /></div>
</td>
</tr>
</table>
</div>
<br />
<div class="err">
<div class="ts">
<font size="2" color="#fff">
驗證碼錯誤，請重新輸入！
</font>
</div>
</div>
</div>
<div class="dl-box-right float-r">
<input id="btnLogin" class="label-2 radius-5 pointer space-m-b-10 space-m" type="button"
value="登 錄" />
</div>
<div class="clear"></div>
</div>
</div>
</div>
</form>
自動登入 js 腳本
// XMLHttpRequest 請求網絡封裝方法
const http = {
ajax: (settings = {}) => {
let _s = Object.assign ({
url: '', // string
type: 'GET', // string 'GET' 'POST' 'DELETE'
dataType: 'json', // string 期望的傳回資料類型:'json' 'text' 'document' 'blob'...
async: true, // boolean true:異步請求 false:同步請求 required
data: null, // any 請求參數,data需要和請求頭Content-Type對應
headers: {}, // object 請求頭
timeout: 1000, // string 逾時時間:0表示不設定逾時
beforeSend: (xhr) => {},
success: (result, status, xhr) => {},
error: (xhr, status, error) => {},
complete: (xhr, status) => {}
}, settings);
// 參數驗證
if (!_s.url || !_s.type || !_s.dataType || _s.async === undefined) {
alert('參數有誤');
return;
}
// 建立XMLHttpRequest請求對象
let xhr = new XMLHttpRequest();
// 請求開始回調函數
xhr.addEventListener('loadstart', e => {
_s.beforeSend(xhr);
});
// 請求成功回調函數
xhr.addEventListener('load', e => {
const status = xhr.status;
if ((status >= 200 && status < 300) || status === 304) {
let result;
if (xhr.responseType === 'text') {
result = xhr.responseText;
} else if (xhr.responseType === 'document') {
result = xhr.responseXML;
} else {
result = xhr.response;
}
// 注意:狀态碼200表示請求發送/接受成功,不表示業務處理成功
_s.success(result, status, xhr);
} else {
_s.error(xhr, status, e);
}
});
// 請求結束
xhr.addEventListener('loadend', e => {
_s.complete(xhr, xhr.status);
});
// 請求出錯
xhr.addEventListener('error', e => {
_s.error(xhr, xhr.status, e);
});
// 請求逾時
xhr.addEventListener('timeout', e => {
_s.error(xhr, 408, e);
});
let useUrlParam = false;
let sType = _s.type.toUpperCase ();
// 如果是"簡單"請求,則把data參數組裝在url上
if (sType === 'GET' || sType === 'DELETE') {
useUrlParam = true;
_s.url += http.getUrlParam(_s.url, _s.data);
}
// 初始化請求
xhr.open(_s.type, _s.url, _s.async);
// 設定期望的傳回資料類型
xhr.responseType = _s.dataType;
// 設定請求頭
for (const key of Object.keys(_s.headers)) {
xhr.setRequestHeader(key, _s.headers[key]);
}
// 設定逾時時間
if (_s.async && _s.timeout) {
xhr.timeout = _s.timeout;
}
// 發送請求.如果是簡單請求,請求參數應為null.否則,請求參數類型需要和請求頭Content-Type對應
xhr.send(useUrlParam ? null : http.getQueryData(_s.data));
},
// 把參數data轉為url查詢參數
getUrlParam: (url, data) => {
if (!data) {
return '';
}
let paramsStr = data instanceof Object ? http.getQueryString(data) : data;
return (url.indexOf('?') !== -1) ? paramsStr : '?'+paramsStr;
},
// 擷取ajax請求參數
getQueryData: (data) => {
if (!data) {
return null;
}
if (typeof data === 'string') {
return data;
}
if (data instanceof FormData) {
return data;
}
return http.getQueryString(data);
},
// 把對象轉為查詢字元串
getQueryString: (data) => {
let paramsArr =[];
if (data instanceof Object) {
Object.keys(data).forEach(key => {
let val = data[key];
// todo 參數Date類型需要根據背景api酌情處理
if (val instanceof Date) {
// val = dateFormat(val, 'yyyy-MM-dd hh:mm:ss');
}
paramsArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(val));
});
}
return paramsArr.join('&');
}
}
// 從 Bolb 中讀取 Base64 圖檔資料方法
function blobToBase64(blob, callback) {
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
}
reader.readAsDataURL(blob);
}
// 自動登入方法
function auto_login() {
// 替換自己的賬戶 input 和賬戶名稱
document.getElementById('UserAccount').value = 'xxxxxxxx';
// 替換自己的密碼 input 和賬戶密碼
document.getElementById('Password').value = 'xxxxxx';
// 替換自己的驗證碼 img
var imgUrl = document.getElementById('secImg').src;
http.ajax({
url: imgUrl,
dataType: 'blob',
success: function (blob, status, xhr) {
blobToBase64(blob, function (base64) {
var formData = new FormData();
// 替換自己的圖鑒使用者名
formData.append('username', 'xxxxxx');
// 替換自己的圖鑒密碼
formData.append('password', 'xxxxxx');
formData.append('typeid', '11');
formData.append('image', base64.replace('data:image/jpeg;base64,', ''));
http.ajax({
url: 'http://api.ttshitu.com/predict',
type: 'POST',
data: formData,
dataType: 'json',
timeout: 0,
success: function (response, status, xhr) {
let d = response.data;
if (d.success) {
let {id, result} = d.data;
// 替換自己的驗證碼 img
document.getElementById('SecurityCode').value = result;
// 替換自己的登入按鈕
document.getElementById('btnLogin').click();
}
},
error: (xhr, status, error) => {
console.log(error);
}
});
});
},
error: (xhr, status, error) => {
console.log(error);
}
});
}
// 調用登入方法
auto_login();
參考文檔
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)