Web版微信登錄

github地址：https://github.com/hty7/vue-wechat
如有不足與錯誤，請見諒

Web版微信主要參考Web微信協(xié)議進行設計開發(fā)
項目主要分成三大模塊
登錄模塊：微信掃碼登錄流程
微信容器：微信信息、會話接收發(fā)送、心跳監(jiān)測
數(shù)據(jù)存儲：用戶登錄信息、狀態(tài)信息、會話信息

先祭圖拜八哥已求無bug

效果圖
我們希望實現(xiàn)的功能包括基本的登錄、聊天群發(fā)功能（文本/表情/圖片/文件/公眾號鏈接）、公眾號閱讀、聊天記錄導出保存、用戶畫像、聊天機器人

前期工作準備

DEMO主要采用web微信接口進行開發(fā)，因此在實際開發(fā)中必須調(diào)用微信接口(https://cn.vuejs.org/v2/guide/custom-directive.html)
問題：

接口跨域問題（本地開發(fā)跨域、cookie）

狀態(tài)檢測問題（心跳檢測，微信會話活動中必須保持心跳接口的正常聯(lián)接）

接口前綴問題（微信常用有wx及wx2兩個版本）

數(shù)據(jù)存儲問題（用戶通訊錄的用戶UserName會隨著每次登錄而改變，因此必須通過特殊方法處理數(shù)據(jù)一致性及連貫性）

在前期我們需要解決（1）（2）兩個問題
由于項目里使用vue+axios+webpack本地開發(fā)，請求如下

// 獲取微信唯一uid export const getUUID = params => {return axios.get('/login/jslogin', {params: params}) }

開發(fā)階段使用***http-proxy-middleware***解決跨域問題

'/login': {target: 'https://login.wx.qq.com', // 重定向路徑secure: false, // htts轉(zhuǎn)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，發(fā)起請求前需要配置請求中的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 secureif (cookies) {let newCookie = cookies.map((cookie) => {if (cookieRegex.test(cookie)) {return cookie.replace(cookieRegex, '')}return cookie})//修改cookie pathdelete proxyRes.headers['set-cookie']proxyRes.headers['set-cookie'] = newCookie}},// 重寫cookie domiancookieDomainRewrite: {'*': 'localhost'}}

如果需要在生產(chǎn)環(huán)境中需要跨域，可以參考網(wǎng)上解答
如nginx環(huán)境下可以修改nginx.conf配置

proxy_cookie_domain 'wx.qq.com' $host;

問題（2）中，我們需要注意web微信接口并非一成不變，不同賬號登錄會跳到不一樣的接口，已知的存在兩種可能性
如獲取微信登錄用戶信息/cgi-bin/mmwebwx-bin/webwxnewloginpage接口，就存在兩種前綴
https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage
https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage
因此我們必須在登錄前從login登錄接口（下面會詳細解析）獲取該微信重定向的地址

前期工作準備

---

獲取UUID

method: GET
path: /login/jslogin
參數(shù)：

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/qrcode/{uuid}

https://login.weixin.qq.com/qrcode/AZc-ETs6NA==

---

等待登錄掃碼

method: GET
path: /cgi-bin/mmwebwx-bin/login
參數(shù)：

loginicon: true, uuid: uuid, tip: 0, r: ~new Date().getTime(), _: new Date().getTime()

等待登錄掃碼是一個長輪詢接口（25S左右），用戶掃碼到確定存在不同響應狀態(tài)
（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/mmwebwx-bin/webwxnewloginpage?ticket=Acej3HhQ4Mcb8CrNtZkOooln@qrticket_0&uuid=Ia-L18JF6w==&lang=zh_CN&scan=1535295440&fun=new&version=v2

響應：

<error> <ret>0</ret> <message></message> <skey>@crypt_ca4ca197_6abe45393fc8632b547d6231c537a5f5</skey> <wxsid>gYCDNcRRyujtvMEF</wxsid> <wxuin>\*\*\*\*\*\*\*\*</wxuin> <pass_ticket>6huRNbBOP9XzXc4bZiD8H%2BJIRH6spE11Vn86Fgpn6VNfW5%2BJfDcxlQ%2B%2Bt5TSb7Cb</pass_ticket> <isgrayscale>1</isgrayscale> </error>

返回值未XML格式，需要把skey, wxsid, wxuin, pass_ticket參數(shù)解析出來并保存，后面的請求參數(shù)都需要用到

同時我們也需要保存Response cookie，也就是前面提到的第一個問題

---

總結(jié)

以上是生活随笔為你收集整理的如何开发一个个性化的Web版微信（1)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。