摘要:版微信登錄地址如有不足與錯誤,請見諒版微信主要參考微信協議進行設計開發項目主要分成三大模塊登錄模塊微信掃碼登錄流程微信容器微信信息會話接收發送心跳監測數據存儲用戶登錄信息狀態信息會話信息先祭圖拜八哥已求無效果圖我們希望實現的功能包括基本的
Web版微信登錄
github地址:https://github.com/hty7/vue-w...
如有不足與錯誤,請見諒
Web版微信主要參考Web微信協議進行設計開發
項目主要分成三大模塊
登錄模塊:微信掃碼登錄流程
微信容器:微信信息、會話接收發送、心跳監測
數據存儲:用戶登錄信息、狀態信息、會話信息
*先祭圖拜八哥已求無bug*
效果圖
我們希望實現的功能包括基本的登錄、聊天群發功能(文本/表情/圖片/文件/公眾號鏈接)、公眾號閱讀、聊天記錄導出保存、用戶畫像、聊天機器人
DEMO主要采用web微信接口進行開發,因此在實際開發中必須調用微信接口
問題:
(1)接口跨域問題(本地開發跨域、cookie)
(2)狀態檢測問題(心跳檢測,微信會話活動中必須保持心跳接口的正常聯接)
(3)接口前綴問題(微信常用有wx及wx2兩個版本)
(4)數據存儲問題(用戶通訊錄的用戶UserName會隨著每次登錄而改變,因此必須通過特殊方法處理數據一致性及連貫性)
在前期我們需要解決(1)(2)兩個問題
由于項目里使用vue+axios+webpack本地開發,請求如下
// 獲取微信唯一uid export const getUUID = params => { return axios.get("/login/jslogin", {params: params}) }
開發階段使用http-proxy-middleware解決跨域問題
"/login": { target: "https://login.wx.qq.com", // 重定向路徑 secure: false, // htts轉http證書驗證問題 changeOrigin: true, headers: { // 設置報頭 Referer: "https://login.wx.qq.com" }, pathRewrite: { // 路徑重寫 "^/login": "/" } }
通過上面代理,可以將本地localhost:8080//login/jslogin => https://login.wx.qq.com/jslogin完成跨域操作
但上面的方面還不能完全解決跨域問題,在后面的請求我們可以知道心跳checkasync和通訊錄頭像等請求都需要使用到cookie,因此我們必須將wx.qq.com域名下返回的cookie保存的本地域名下,因此我們必須解決跨域cookie的問題
因此我們可以通過配置proxy進行跨域處理,通過cookieDomainRewrite重寫domian,我們可以將不同域名下的cookie保存到我們所需域名下。同時由于默認請求是不帶cookie,發起請求前需要配置請求中的withCredentials = true,使請求帶上cookie.
"/wx1": { target: "https://wx.qq.com", secure: false, changeOrigin: true, headers: { Referer: "https://wx.qq.com" }, pathRewrite: { "^/wx1": "/" }, onProxyRes: (proxyRes, req, res) => { let cookies = proxyRes.headers["set-cookie"] let cookieRegex = /Secure/i //修改cookie secure if (cookies) { let newCookie = cookies.map((cookie) => { if (cookieRegex.test(cookie)) { return cookie.replace(cookieRegex, "") } return cookie }) //修改cookie path delete proxyRes.headers["set-cookie"] proxyRes.headers["set-cookie"] = newCookie } }, // 重寫cookie domian cookieDomainRewrite: { "*": "localhost" } }
如果需要在生產環境中需要跨域,可以參考網上解答
如nginx環境下可以修改nginx.conf配置
proxy_cookie_domain "wx.qq.com" $host;
問題(2)中,我們需要注意web微信接口并非一成不變,不同賬號登錄會跳到不一樣的接口,已知的存在兩種可能性
如獲取微信登錄用戶信息/cgi-bin/mmwebwx-bin/webwxnewloginpage接口,就存在兩種前綴
https://wx.qq.com/cgi-bin/mmw...
https://wx2.qq.com/cgi-bin/mm...
因此我們必須在登錄前從login登錄接口(下面會詳細解析)獲取該微信重定向的地址
method: GET
path: /login/jslogin
參數:
appid: "wx782c26e4c19acffb", // appid (固定值) redirect_uri: "https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage", // 重定向路徑 fun: "new", // (固定值) lang: "zh_CN", // 語言版本 (固定值) _: new Date().getTime() // 時間戳
響應返回值:window.QRLogin.code = 200; window.QRLogin.uuid = "AZc-ETs6NA==";
返回值為字符串,可以通過正則式得到code和uuid
res = { code: 200, uuid: "AZc-ETs6NA==" }獲取二維碼
https://login.weixin.qq.com/q...{uuid}
https://login.weixin.qq.com/qrcode/AZc-ETs6NA==等待登錄掃碼
method: GET
path: /cgi-bin/mmwebwx-bin/login
參數:
loginicon: true, uuid: uuid, tip: 0, r: ~new Date().getTime(), _: new Date().getTime()
等待登錄掃碼是一個長輪詢接口(25S左右),用戶掃碼到確定存在不同響應狀態
(1)長時間未掃碼,登錄超時
window.code=408;
(2)掃碼未確定,獲取用戶頭像
window.code=201;window.userAvatar="data:img/jpg;base64";
(3)掃碼未確定,超出限制時間,二維碼無效需重新掃碼
window.code=400;
(4)掃碼并確定
window.code=200; window.redirect_uri="https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage?ticket=Acej3HhQ4Mcb8CrNtZkOooln@qrticket_0&uuid=Ia-L18JF6w==&lang=zh_CN&scan=1535295440";獲取微信登錄令牌(登錄中最重要的一步)
method: GET path: /cgi-bin/mmwebwx-bin/webwxnewloginpage
上一步掃碼成功后redirect_uri后面加上&fun=new&version=v2
例如:https://wx.qq.com/cgi-bin/mmw...
響應:
0 @crypt_ca4ca197_6abe45393fc8632b547d6231c537a5f5 gYCDNcRRyujtvMEF ******** 6huRNbBOP9XzXc4bZiD8H%2BJIRH6spE11Vn86Fgpn6VNfW5%2BJfDcxlQ%2B%2Bt5TSb7Cb 1
返回值未XML格式,需要把skey, wxsid, wxuin, pass_ticket參數解析出來并保存,后面的請求參數都需要用到
同時我們也需要保存Response cookie,也就是前面提到的第一個問題
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97096.html
摘要:基于和端微信開發的聊天機器人。使用的微信賬號即充當機器人的賬號為個人賬號,可自定義指令。關閉玫瑰感謝您的使用玫瑰閃電需要開啟請在控制臺啟動程序閃電微信發出關閉口令,程序退出。 Github: https://github.com/doterlin/wechat-robot showImg(https://segmentfault.com/img/remote/1460000010601...
摘要:掃碼登陸微信公眾號平臺,此時默認的是編輯模式,需要修改為開發者模式。若確認此次請求來自微信服務器,請原樣返回參數內容,則接入生效,成為開發者成功,否則接入失敗。 掃碼登陸微信公眾號平臺,此時默認的是編輯模式,需要修改為開發者模式。 找到開發--->基本配置, showImg(https://segmentfault.com/img/bVbdTk2?w=323&h=786); showI...
摘要:掃碼登陸微信公眾號平臺,此時默認的是編輯模式,需要修改為開發者模式。若確認此次請求來自微信服務器,請原樣返回參數內容,則接入生效,成為開發者成功,否則接入失敗。 掃碼登陸微信公眾號平臺,此時默認的是編輯模式,需要修改為開發者模式。 找到開發--->基本配置, showImg(https://segmentfault.com/img/bVbdTk2?w=323&h=786); showI...
摘要:查詢是否掃描二維碼登錄顯示了二維碼以后,用戶必須用手機微信掃描這個二維碼才能登錄。 我的小站 網頁版微信掃碼登錄流程 1. 請求頁面 先打開https://wx.qq.com/顯示出頁面,這時候會加載一堆的html,js等資源。 2. 獲取會話UUID 微信Web版本不使用用戶名和密碼登錄,而是采用掃描二維碼登錄,所以服務器需要首先分配一個唯一的會話ID,用來標識當前的一次登錄。 使用...
閱讀 1163·2021-11-15 18:14
閱讀 3627·2021-11-15 11:37
閱讀 754·2021-09-24 09:47
閱讀 2427·2021-09-04 16:48
閱讀 2182·2019-08-30 15:53
閱讀 2378·2019-08-30 15:53
閱讀 390·2019-08-30 11:20
閱讀 1232·2019-08-29 16:08