---
layout: post
title: 简述网页版微信扫码登录的过程
category: 技巧
tags: Other
keywords:
description:
---
## 网页版微信扫码登录流程
### 1. 请求页面
先打开显示出页面,这时候会加载一堆的html,js等资源。
### 2. 获取会话UUID
微信Web版本不使用用户名和密码登录,而是采用扫描二维码登录,所以服务器需要首先分配一个唯一的会话ID,用来标识当前的一次登录。
使用get方法,通过请求地址:https://login.weixin.qq.com/jslogin?appid=wx782c26e4c19acffb&fun=new&lang=zh_CN&_=时间戳
其中,时间戳这个值是当前距离林威治标准时间的毫秒。
get成功,则返回:window.QRLogin.code = 200; window.QRLogin.uuid = "AAAAAAAA"
其中的AAAAAAAA就是我们需要的uuid
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin.png)
### 3. 获取登录二维码
访问网址:https://login.weixin.qq.com/qrcode/XXXXXX
这里的XXXXXXX就是我们刚才获取的uuid,这个网址直接显示的就是二维码,该二维码是有有效期的,有效期时长由微信服务端决定。
### 4. 查询是否扫描二维码登录
显示了二维码以后,用户必须用手机微信扫描这个二维码才能登录。(微信为啥要这么设计?很奇怪的思维。。。我用电脑很多情况不就是因为手机没在旁边吗。。。)
使用get方法,查询地址:https://login.weixin.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&uuid=AAAAAAAA&tip=1&r=-921646107&_=时间戳
这里的AAAAAAAA是我们刚才获取的uuid,时间戳同上。tip在第一次获取时应为1,其他次时为0.
如果服务器返回:
```
window.code=201,
window.userAvatar = base64:img/bbb
```
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin3.png)
则说明此时用户在手机端已经完成扫描,并在网页端显示扫描人的头像。但还没有点击登录,继续使用上面的地址查询。
点击登录后,如果服务器返回:
```
window.code=200;
window.redirect_uri="https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage?ticket=AZBAkjuOKc-2GAHcRBsKNuOt@qrticket_0&uuid=YbHBoVi8_w==&lang=zh_CN&scan=1504160545";
```
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin4.png)
则说明此时用户在手机端已经确认登录,`window.redirect_uri=`后面的这个网址(暂称为BB)要记下来,接着要访问这个地址。
如果服务器返回:window.code=408,则说明等待超时,继续使用上面的地址查询。
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin2.png)
### 5. 访问登录地址BB,获得uin、sid、pass_ticket、skey
用get方法,访问在上一步骤获得访问地址BB,并在参数后面加上:&fun=new,会返回一个xml格式的文本,类似这样:
```xml
0
@crypt_d6549c5a_37242e82c0913b75e5d3ad5ef2c7bdba
n/5yTn844+kHkU66
2799942121
JOkd35AoEoi8MVx34qKT6xJVeaS8tT7mo8BFdGlKRfDGRCWKkKLW9DsrA%2BEJ34WM
1
````
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin6.png)
- skey是获取联系人信息的关键信息(比如获取好友(包括订阅的公众号)头像信息),标识当前人的身份。还是检查web端微信心跳的标识。发消息时也会使用。
- pass_ticket是在授权成功后进行初始化和收发消息使用的。
- wxsid在收发消息会子啊url后或请求体中使用。
- wxuin在发消息时使用
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin14.png)
把这里的wxuin,wxsid,skey,pass_ticket都记下来,这是重要数据。
该结果中包含的信息就是用来在接下来的请求中校验用户用的。
**到这里已经表明当前用户已经扫码登录成功了,而且可以看到只是通过ticket方式确认web端登录成功,而不经过用户名密码方式的登录,其实个人感觉就是移动端微信扫码给web端发送了一个授权而已。**
### 6. 微信初始化
这个是很重要的一步,我在这个步骤折腾了很久。。。
要使用POST方法,访问地址:`https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxinit?r=-918790895&pass_ticket=JOkd35AoEoi8MVx34qKT6xJVeaS8tT7mo8BFdGlKRfDGRCWKkKLW9DsrA%252BEJ34WM`
其中,时间戳不用解释,pass_ticket是我们在上面获取的一长串字符。
POST的内容是个json串,{"BaseRequest":{"Uin":"XXXXXXXX","Sid":"XXXXXXXX","Skey":XXXXXXXXXXXXX","DeviceID":"e123456789012345"}}
uin、sid、skey分别对应上面步骤4获取的字符串,DeviceID是e后面跟着一个15字节的随机数。
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin7.png)
程序里面要注意使用UTF8编码方式。
POST成功,则服务器返回一个很长的JSON串,格式是这样:
```json
{
"BaseResponse":{
"Ret":0,
"ErrMsg":""
},
"Count":11,
"ContactList":[
{//公众号或文件助手信息
"Uin":0,
"UserName":"filehelper",
"NickName":"æ–‡ä»¶ä¼ è¾“åŠ©æ‰‹",
"HeadImgUrl":"/cgi-bin/mmwebwx-bin/webwxgeticon?seq=660589401&username=filehelper&skey=@crypt_d6549c5a_37242e82c0913b75e5d3ad5ef2c7bdba",
"ContactFlag":1,
"MemberCount":0,
"MemberList":[],
"RemarkName":"",
"HideInputBarFlag":0,
"Sex":0,
"Signature":"",
"VerifyFlag":0,
"OwnerUin":0,
"PYInitial":"WJCSZS",
"PYQuanPin":"wenjianchuanshuzhushou",
"RemarkPYInitial":"",
"RemarkPYQuanPin":"",
"StarFriend":0,
"AppAccountFlag":0,
"Statues":0,
"AttrStatus":0,
"Province":"",
"City":"",
"Alias":"",
"SnsFlag":0,
"UniFriend":0,
"DisplayName":"",
"ChatRoomId":0,
"KeyWord":"fil",
"EncryChatRoomId":"",
"IsOwner":0
},
{
"Uin":0,
"UserName":"@@ed82e31e61783c765723eb8574831ae0be272bbb6b02f7280e442b0d274e8cb9",
"NickName":"诗酒è¶å¹´åŽ",
"HeadImgUrl":"/cgi-bin/mmwebwx-bin/webwxgetheadimg?seq=660624044&username=@@ed82e31e61783c765723eb8574831ae0be272bbb6b02f7280e442b0d274e8cb9&skey=@crypt_d6549c5a_37242e82c0913b75e5d3ad5ef2c7bdba",
"ContactFlag":2051,
"MemberCount":13,
"MemberList":[//用户信息
{
"Uin":0,
"UserName":"@4dae6aa0756bd9899b68d0b2e60f109d",
"NickName":"",
"AttrStatus":0,
"PYInitial":"",
"PYQuanPin":"",
"RemarkPYInitial":"",
"RemarkPYQuanPin":"",
"MemberStatus":0,
"DisplayName":"",
"KeyWord":"cha"
}
],
"RemarkName":"",
"HideInputBarFlag":0,
"Sex":0,
"Signature":"",
"VerifyFlag":0,
"OwnerUin":0,
"PYInitial":"",
"PYQuanPin":"",
"RemarkPYInitial":"",
"RemarkPYQuanPin":"",
"StarFriend":0,
"AppAccountFlag":0,
"Statues":1,
"AttrStatus":0,
"Province":"",
"City":"",
"Alias":"",
"SnsFlag":0,
"UniFriend":0,
"DisplayName":"",
"ChatRoomId":0,
"KeyWord":"",
"EncryChatRoomId":"",
"IsOwner":0
}
],
"SyncKey":{
"Count":4,
"List":[
{
"Key":1,
"Val":660633313
},
{
"Key":2,
"Val":660633314
},
{
"Key":3,
"Val":660633176
},
{
"Key":1000,
"Val":1504141382
}
]
},
"User":{//当前用户信息
"Uin":2799942121,
"UserName":"@cee283ef70f5473680a467d23da14918888aa5771f1b08c7410b2ca3d685dd6a",
"NickName":"followtry",
"HeadImgUrl":"/cgi-bin/mmwebwx-bin/webwxgeticon?seq=842975299&username=@cee283ef70f5473680a467d23da14918888aa5771f1b08c7410b2ca3d685dd6a&skey=@crypt_d6549c5a_37242e82c0913b75e5d3ad5ef2c7bdba",
"RemarkName":"",
"PYInitial":"",
"PYQuanPin":"",
"RemarkPYInitial":"",
"RemarkPYQuanPin":"",
"HideInputBarFlag":0,
"StarFriend":0,
"Sex":1,
"Signature":"",
"AppAccountFlag":0,
"VerifyFlag":0,
"ContactFlag":0,
"WebWxPluginSwitch":0,
"HeadImgFlag":1,
"SnsFlag":17
},
"ChatSet":"filehelper,weixin,@@ed82e31e61783c765723eb8574831ae0be272bbb6b02f7280e442b0d274e8cb9,",
"SKey":"@crypt_d6549c5a_37242e82c0913b75e5d3ad5ef2c7bdba",//我的skey,也就是个人标识
"ClientVersion":637865269,
"SystemTime":1504157627,
"GrayScale":1,
"InviteStartCount":40,
"MPSubscribeMsgCount":22,
"MPSubscribeMsgList":[//订阅信息列表
{
"UserName":"@d532ab26f3404fdc3a95bc7a7d3ae368",
"MPArticleCount":4,//拉取四篇文章
"MPArticleList":[//文章列表信息
{
"Title":"Ubuntu Linux",
"Cover":"http://mmbiz.qpic.cn/mmbiz_jpg/W9DqKgFsc6icYW9UsESlGZ2r3SEOjIwqeToauxczCXYPLW63YtYmCcK2mxTaRjH7XibemZZOcVXknLFsPnhSLyeg/640?wxtype=jpeg&wxfrom=0",
"Url":"http://mp.weixin.qq.com/s?__biz=MjM5NjQ4MjYwMQ==&mid=2664609333&idx=1&sn=9eec4c182757edc5d2e98b2dfa5752b1&chksm=bdce8d738ab904653e64f18e23a8ffe8634fc1547edc05e2dad547de69894d5df572cc4f2b12&scene=0#rd"
}
],
"Time":1504153992,
"NickName":"Linuxä¸å›½"
}
],
"ClickReportInterval":600000
}
```
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin9.png)
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin10.png)
拿到该结果后,浏览器会渲染最近联系人,各个订阅的公众号的最近几篇文章。
### 7. 获取好友列表
使用POST方法,访问:https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxgetcontact?r=时间戳
POST的内容为空。成功则以JSON格式返回所有联系人的信息。格式类似:
```json
{
"BaseResponse": {
"Ret": 0,
"ErrMsg": ""
},
"MemberCount": 21,
"MemberList": [
{
"Uin": 0,
"UserName": xxx,
"NickName": "Urinx",
"HeadImgUrl": xxx,
"ContactFlag": 3,
"MemberCount": 0,
"MemberList": [],
"RemarkName": "",
"HideInputBarFlag": 0,
"Sex": 0,
"Signature": "xxxx",
"VerifyFlag": 8,
"OwnerUin": 0,
"PYInitial": "URINX",
"PYQuanPin": "Urinx",
"RemarkPYInitial": "",
"RemarkPYQuanPin": "",
"StarFriend": 0,
"AppAccountFlag": 0,
"Statues": 0,
"AttrStatus": 0,
"Province": "",
"City": "",
"Alias": "Urinxs",
"SnsFlag": 0,
"UniFriend": 0,
"DisplayName": "",
"ChatRoomId": 0,
"KeyWord": "gh_",
"EncryChatRoomId": ""
},
...
],
"Seq": 0
}
其中,MemberCount表示总共有多少联系人,里面的内容都比较清晰。
```
### 8. 开启微信状态通知
用POST方法,访问:https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxstatusnotify
POST的内容是JSON串,格式:
{
BaseRequest: { Uin: xxx, Sid: xxx, Skey: xxx, DeviceID: xxx },
Code: 3,
FromUserName: 自己ID,
ToUserName: 自己ID,
ClientMsgId: 时间戳
}
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin15.png)
### 9. 心跳包,与服务器同步并获取状态
以上步骤完成以后,就可以进入收发微信的循环了,可以用线程方式发送心跳包。
使用get方法,设置超时为60秒,访问:https://webpush.wx2.qq.com/cgi-bin/mmwebwx-bin/synccheck?sid=XXXXXX&uin=XXXXXX&synckey=XXXXXX&r=时间戳&skey=XXXXXX&deviceid=XXXXXX&_=时间戳
其他几个参数不用解释,这里的synckey需要说一下,前面的步骤获取的json串中有多个key信息,需要把这些信息拼起来,key_val,中间用|分割,类似这样:
1_652651920|2_652651939|3_652651904|1000_0
服务器返回:window.synccheck={retcode:”0”,selector:”0”}
retcode为0表示成功,selector为2和6表示有新信息。4表示公众号新信息。
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin11.png)
### 10. 接收新信息
检测到有新的消息以后,用POST方法,访问:https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxsync?sid=XXXXXX&skey=XXXXXX
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin12.png)
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin13.png)
POST的内容:
```json
{
"BaseResponse":{
"Ret":0,
"ErrMsg":""
},
"AddMsgCount":0,
"AddMsgList":[
],
"ModContactCount":0,
"ModContactList":[
],
"DelContactCount":0,
"DelContactList":[
],
"ModChatRoomMemberCount":0,
"ModChatRoomMemberList":[
],
"Profile":{
"BitFlag":0,
"UserName":{
"Buff":""
},
"NickName":{
"Buff":""
},
"BindUin":0,
"BindEmail":{
"Buff":""
},
"BindMobile":{
"Buff":""
},
"Status":0,
"Sex":0,
"PersonalCard":0,
"Alias":"",
"HeadImgUpdateFlag":0,
"HeadImgUrl":"",
"Signature":""
},
"ContinueFlag":0,
"SyncKey":{
"Count":7,
"List":[
{
"Key":1,
"Val":660633324
}
]
},
"SKey":"",
"SyncCheckKey":{
"Count":7,
"List":[
{
"Key":1,
"Val":660633324
}
]
}
}
```
注意这里的SyncKey格式,参考前面的说明。
请求成功之后服务器会返回一个JSON串,其中AddMsgCount表示有多少信息,AddMsgList中是一个数组,包含了所有新消息,里面的MsgType表示信息类型,Content就是信息内容。
注意again,返回的信息中,会有新的synckey,要更新这个内容,下次获取信息访问要用这个新的key。
### 11. 发送信息
这个比较简单,用POST方法,访问:https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxsendmsg
POST的还是json格式,类似这样:
```json
{
"Msg":{
"Type":1,
"Content":"测试信息",
"FromUserName":"XXXXXX",
"ToUserName":"XXXXXX",
"LocalID":"时间戳",
"ClientMsgId":"时间戳"
},
"BaseRequest":{
"Uin":"XXXXXX",
"Sid":"XXXXXX",
"Skey":"XXXXXX",
"DeviceID":"XXXXXX"
}
}
```
这里的Content是信息内容,LocalID和ClientMsgId都用当前时间戳。
![web端微信登录](//raw.githubusercontent.com/George5814/blog-pic/master/image/weixin/wxjslogin14.png)
以上就是基本的web端微信授权登录以及收发消息的过程了,个人见解,有理解有偏差的地方还期待您的批评指正。
> 参考文章
> [微信网页web版通信协议分析 实现微信登录发送接收消息](http://www.oicqzone.com/qqjiqiao/2017032723731.html)