如何开发一个个性化的Web版微信（1）

dockerclub 发布于2019-08-23 11:32 / 2582人阅读

摘要：版微信登录地址如有不足与错误，请见谅版微信主要参考微信协议进行设计开发项目主要分成三大模块登录模块微信扫码登录流程微信容器微信信息会话接收发送心跳监测数据存储用户登录信息状态信息会话信息先祭图拜八哥已求无效果图我们希望实现的功能包括基本的

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登录接口（下面会详细解析）获取该微信重定向的地址

登录模块 获取UUID

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，也就是前面提到的第一个问题

服务器托管专线服务微信电脑版微信 php版微信 python 版微信怎么开发一个微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97096.html

js版微信聊天机器人——wechat-robot

摘要：基于和端微信开发的聊天机器人。使用的微信账号即充当机器人的账号为个人账号，可自定义指令。关闭玫瑰感谢您的使用玫瑰闪电需要开启请在控制台启动程序闪电微信发出关闭口令，程序退出。 Github: https://github.com/doterlin/wechat-robot showImg(https://segmentfault.com/img/remote/1460000010601...

Darkgel 2019-08-21 11:51 评论0 收藏0
java版微信公众号开发（二）：配置token

摘要：扫码登陆微信公众号平台，此时默认的是编辑模式，需要修改为开发者模式。若确认此次请求来自微信服务器，请原样返回参数内容，则接入生效，成为开发者成功，否则接入失败。扫码登陆微信公众号平台，此时默认的是编辑模式，需要修改为开发者模式。找到开发--->基本配置， showImg(https://segmentfault.com/img/bVbdTk2?w=323&h=786); showI...

URLOS 2019-07-24 10:48 评论0 收藏0
java版微信公众号开发（二）：配置token

摘要：扫码登陆微信公众号平台，此时默认的是编辑模式，需要修改为开发者模式。若确认此次请求来自微信服务器，请原样返回参数内容，则接入生效，成为开发者成功，否则接入失败。扫码登陆微信公众号平台，此时默认的是编辑模式，需要修改为开发者模式。找到开发--->基本配置， showImg(https://segmentfault.com/img/bVbdTk2?w=323&h=786); showI...

1fe1se 2019-08-19 10:46 评论0 收藏0
简述网页版微信扫码登录的过程

摘要：查询是否扫描二维码登录显示了二维码以后，用户必须用手机微信扫描这个二维码才能登录。我的小站网页版微信扫码登录流程 1. 请求页面先打开https://wx.qq.com/显示出页面，这时候会加载一堆的html，js等资源。 2. 获取会话UUID 微信Web版本不使用用户名和密码登录，而是采用扫描二维码登录，所以服务器需要首先分配一个唯一的会话ID，用来标识当前的一次登录。使用...

Jonathan Shieber 2019-08-21 17:37 评论0 收藏0
fir.im Weekly - 1000 个 Android 开源项目集合

摘要：集合近开源项目说道集合了近开源项目，支持搜索。俄罗斯程序员实现自动化，写了一堆脚本，会给老婆发加班短信会在宿醉不醒时给自己请假会自动根据邮件恢复客户的数据库还可以一键远程煮咖啡。冬天到了，适宜囤点代码暖暖身。本期 fir.im Weekly 收集了最近一些不错的 GitHub 源码、开发工具和技术实践教程类文章分享给大家。 codeKK — 集合近 1000 Android 开源项...

Anonymous1 2019-06-24 19:10 评论0 收藏0