轶哥

📚 Having fun with AI Agent. Always learning.

    无刷新微信扫码登陆解决方案

    数天前,为解决微信二维码扫码登陆在Electorn跳转处理繁琐的问题,写一个微信开放平台扫码登陆解析处理工具😊,将frame数据处理为图片或Base64图片数据返回客户端进行扫码。解决Chrome70中open.weixin.qq.com腾讯SSL证书不被信任的问题(微信官方于2018年8月23日更换了域名证书),解决Chrome68中frame跨域被拦截的问题。

    此方案最大特点扫码登录无跳转🤠。

    Node.js 版本 Demohttps://weixin.openapi.site/demo

    PHP 版本 Demohttps://apio.xyz/weixin-login-php/

    须知

      此方案仅适用于微信开放平台-网站应用

    Node.js版本为什么不封为NPM库?   这个功能的代码比较简单,https和URL库都是nodejs自带的,直接复制过去用就好了。

    Node.js版本使用方法

    请阅读WeixinLoginClientHandler.js文件。 第一步:获取微信UUID; 第二步:根据微信UUID获取二维码图片; 第三步:获取微信服务器返回的Code(详见微信开放平台文档)。

    测试方法

    在线测试

    直接请求https://weixin.openapi.site/img?appid=您的appid&redirect_uri=您在微信开放平台后台设置的授权回调域,获取二维码和UUID。

    再次请求https://weixin.openapi.site/check?uuid=上一步得到的UUID,获得登录结果的数据。

    您要是懒得部署一套,可以直接使用以上地址。

    本地测试

    先阅读源码,修改server.js里面的配置信息,使用npm start启动项目。

    访问http://localhost:65533/login/weixin/demo即可进行测试。

    API

    weixinLoginClientHandler.weixinUUID().then(r => console.log(r)) \\ 获取微信uuid(用于获取微信二维码和Ajax轮询结果所需参数)
    
    weixinLoginClientHandler.weixinQRCodeImgURL().then(r => console.log(r)) \\ 可以直接获取二维码图片
    
    weixinLoginClientHandler.weixinQRCodeImgBase64().then(r => console.log(r)) \\ 获取二维码图片的Base64数据(主要用于Chrome70中腾讯所使用的赛门铁克证书失效的情况)
    
    weixinLoginClientHandler.getCode(uuid, params.last).then(r => console.log(r)) \\ 获取微信服务器返回的Code(第一个连接是长连接,当用户处于“扫描成功,请在微信中点击确认即可登录”状态时可能会变为轮询,这主要由腾讯服务器控制)
    

    Example

    import WeixinLoginClientHandler from './WeixinLoginClientHandler.js'
    
    const weixinLoginClientHandler = new WeixinLoginClientHandler({
      appid: 'wx827225356b689e24',
      redirect_uri: 'https://qq.jd.com/',
      state: ''
    })
    
    weixinLoginClientHandler.weixinUUID().then(r => {
      console.log(r)
      weixinLoginClientHandler.weixinQRCodeImgBase64(r).then(r => console.log(r))
    })
    
    weixinLoginClientHandler.weixinQRCodeImgURL().then(r => console.log(r))
    

    PHP版本使用方法

    第一步:根据Appid及授权回调域获取二维码图片和微信UUID; 第二步:获取微信服务器返回的Code(详见微信开放平台文档)。

    测试方法

    直接请求https://apio.xyz/weixin-login-php/weixin.php?appid=您的appid&redirect_uri=您在微信开放平台后台设置的授权回调域,获取二维码和UUID。

    再次请求https://apio.xyz/weixin-login-php/weixin.php?uuid=上一步得到的UUID,获得登录结果的数据。

    您要是懒得部署一套,可以直接使用以上地址。

    小提示

    1. 这个方案可能只适合少部分应用。
    2. 使用此方法,无需经由服务器端跳转,可以直接获得code。如果是Electron环境,可以直接在渲染进程请求。
    3. 建议为该功能单独部署,可在您所有项目中使用同一个接口。PHP版本方便部署到虚拟主机等免维护环境,简单方便。
    4. 该文件使用原生Node.js方法,ES6写法,type=module。
    5. 理论上你可以模拟任何网站的二维码,但是没有私钥就算拿到code也没有用。

    源码

    Node.js:https://github.com/yi-ge/weixin-login

    PHP:https://github.com/yi-ge/weixin-login-php

    打赏
    交流区(9)
    szz19960815

    这个可以,不用再弹窗了!

    2020年7月22日 11:32回复
    轶哥

    是的!

    2020年7月23日 11:34回复
    国良

    牛逼

    2021年1月19日 13:50回复
    轶哥

    👀️

    2021年1月19日 14:10回复
    轶哥

    2022年02月25日 更新。

    2022年2月25日 06:21回复
    安之若素

    您好 最近老是提示无法连接到微信服务器 之前都是稳定的 请问有什么更新么

    2023年4月13日 04:25回复
    轶哥

    我们一直在用,没有收到反馈异常,也许是服务器和微信服务器通讯不稳定?

    2023年4月13日 04:55回复
    安之若素

    也是最近才开始的 错误码是ETIMEDOUT 期间程序也没有调整过> 我们一直在用,没有收到反馈异常,也许是服务器和微信服务器通讯不稳定?

    2023年4月13日 08:09回复
    轶哥

    这个错误提示确实是网络原因。在服务器上测试下curl腾讯服务器。

    2023年4月13日 08:11回复
    尚未登陆
    发布
      上一篇 (MacOS Mojave 10.14 (18A391) Nvidia Web Driver Notice)
    下一篇 (Node.js 获取项目根目录)  

    评论回复提醒