当前位置:首页 » 新媒体运营 » 正文

微信公众号登录,纯前端JS解决微信公众号自动登录问题

4217 人参与  2022年04月02日 15:41  分类 : 新媒体运营  评论

注意,本文实现功能不涉及任何后端,有后端搭伙的小伙伴可以不用看了哈。

纯前端JS解决微信公众号自动登录问题

微信

场景

这两天解决公众号广告分发平台项目(基于Electron)的一些棘手问题,其中之一就是微信公众号自动登录问题。

一个PC客户端,内嵌了一个webview,里面塞入的是微信公众号首页,即登录页:https://mp.weixin.qq.com/,拿Cookie,Token什么的不在本文内,较为敏感,这里只说一下实现自动登录功能。

纯前端JS解决微信公众号自动登录问题

公众号首页

核心功能就两块,webview的preload插入js文件,js文件里面动态嵌入不同的账密。


preload

Electron的webview允许开发者设计预插入一个js文件,具体官网描述如下:

纯前端JS解决微信公众号自动登录问题

preload

preload

<webview src="https://www.github.com/" preload="./test.js"></webview>

指定一个脚本在访客页中其他脚本执行之前先加载。 该脚本的URL的协议必须是 file: asar:二者之一,因为在访客页中,它是通过“内部”的 require 去加载的

当访客页没有 node integration ,这个脚本仍然有能力去访问所有的 Node APIs, 但是当这个脚本执行执行完成之后,通过Node 注入的全局对象(global objects)将会被删除。

注意: 在为 will-attach-webview 事件指定 webPreferences 时,这个选项将作为 preloadURL 出现,而不是 preload。

所以,相对来说简单的想法就是在preload的js里面,我们做一下输入框内容的填充即可。

道理是这么个道理,但是实际操作起来会有一些问题,我们代码一步一步来,首先想到的是,input.value = x这种操作。

下面是账号input相关信息:

纯前端JS解决微信公众号自动登录问题

account

下面是密码input相关信息:

纯前端JS解决微信公众号自动登录问题

pwd

那么就可以通过querySelector方式获取两个输入框了:

// inputs.length === ,刚好两个,不用担心其他的干扰了。
let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)

再观察登录按钮下:

纯前端JS解决微信公众号自动登录问题

login

嘛,我个人是不喜欢使用a标签当提交按钮……

获取方式:

let a = document.querySelector(&#;.btn_login&#;)

很简单吧。

于是就有如下提交代码:

let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)
// 随手放到数组里,不要较真,账密自己填写自己的
let infos = [&#;account&#;, &#;password&#;]
for(let i = ; i < inputs.length; i++) {
 let input = inputs[i]
 input.value = infos[i]
 setTimeout(() => {
 let a = document.querySelector(&#;.btn_login&#;)
 a.click()
 }, )
}

按说,逻辑没问题。但是,实际使用公众号平台会返回告诉你,没有输入账号(密码)。

只能抠下源码分析怎么回事了,源码所在位置(随机数你看到的与我未必一样):

纯前端JS解决微信公众号自动登录问题

源码

右侧复制下来,然后本地编辑器新建js,并且格式化后就可以看到比较清晰的源码,虽然命名被压缩后比较奇葩,如下:

纯前端JS解决微信公众号自动登录问题

源码格式化后

检索相关关键词(比如“你还没有输入帐号!”),或者login(查多了就知道了),就可以找到相关的逻辑所在。

通过第一行的define,第一时间想到的是seajs,后来发现就是seajs,无他。

再看到里面的,computed,watch,mounted之类的,也可以联想到是Vue,所以应当是seajs与Vue混合开发的公众号首页。

到这里,就相对清晰了,获取不到账密原因在于我们直接设置value的方式,并不能触发Vue实例的data修改,如下:

纯前端JS解决微信公众号自动登录问题

核心data值

此时,就该想到Vue的事件机制(不需要懂源码,用过就差不多),简单来说,就是事件函数驱动data变化,而不是外部手动修改DOM可以触发。

所以,增加一句话就可以混淆Vue的data机制,从而解决data值不响应变化的问题:

input.dispatchEvent(new Event(&#;input&#;))

没错,神奇的Event函数,通过new对象的方式,让相应标签实例主动触发相关事件。

这里注意下,不是所有都是input事件,这个根据标签不同而不同,我们这里要解决的是微信公众号登录的问题,所以是输入框input标签,那么自然就是input事件(oninput)了。

完整处理代码如下,请注意与上方的对比:

let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)
// 随手放到数组里,不要较真,账密自己填写自己的
let infos = [&#;account&#;, &#;password&#;]
for(let i = ; i < inputs.length; i++) {
 let input = inputs[i]
 input.value = infos[i]
 // 修改input的值后,记得主动触发一次input事件。
 input.dispatchEvent(new Event(&#;input&#;))
 setTimeout(() => {
 let a = document.querySelector(&#;.btn_login&#;)
 a.click()
 }, )
}

这样,a的click事件就生效了,至此,完成登录这个事情。


动态账密

上面解决了模拟登录问题,但是仅仅是模拟,因为账密是写死的,别忘了,我们现在在Electron的一个webview组件里面。

现在要考虑的是,如何给webview组件带入不同的账密。

  1. fs写入新的js,里面插入账密,再读取

  2. 通过其他webview文件信息插入

先说第一种,这个是有点node基础的小伙伴都会首先想到的,没错,我尝试了,然后,挂了。

原因很简单,沙盒内的文件路径与你启动前配置的文件路径不同,导致代码上写的读取路径(readFileSync)与写入路径(writeFileSync)不同,能写不能读,WTF……这里使用Sync原因很简单,异步处理相对麻烦,调试用同步,高效快速。

于是我们pass第一种方案,如果你成功了,务必告诉我下。

然后是第二种:

这里先说明下,个人觉得第二种有点侥幸,因为公众号后端验证没有严格到把ua(userAgent)也算进去,所以我找到这个方案。

首先查询了webview能够带入进去的所有属性,很幸运,有个ua,官网介绍如下:

纯前端JS解决微信公众号自动登录问题

官网ua

useragent

<webview src="https://www.github.com/" useragent="Mozilla/. (Windows NT .; WOW; Trident/.; AS; rv:.) like Gecko"></webview>

在访客页被导航(navigated)之前,为它设置 user agent,一旦这个页面加载之后,使用 setUserAgent 方法去改变这个页面的 user agent。

事实上,还有别的(主要受webview限制,即Electron限制),但是懒得找了,差不多意思就行。

可能已经有小伙伴想到方案了,所以我就不墨迹了,直接上代码处理,先是写入:

// 你也可以写成标签<webview useragent="[&#;account&#;, &#;password&#;]"></webview>,这里为了灵活而已
webview.setAttribute(&#;useragent&#;, "[&#;account&#;, &#;password&#;]")

然后读取并赋值:

let infos = JSON.parse(navigator.userAgent)

由于ua我们写成了字符串的数组,所以这里自然可以解开成数组实例。

那么后面就简单了,不再赘述,直接看完整的核心代码即可,注意对比差异:

let inputs = document.querySelectorAll(&#;.weui-desktop-form__input&#;)
// 从ua获取传入的值
let infos = JSON.parse(navigator.userAgent)
for(let i = ; i < inputs.length; i++) {
 let input = inputs[i]
 input.value = infos[i]
 // 修改input的值后,记得主动触发一次input事件。
 input.dispatchEvent(new Event(&#;input&#;))
 setTimeout(() => {
 let a = document.querySelector(&#;.btn_login&#;)
 a.click()
 }, )
}

至此,我们就解决了纯前端模拟微信页面登录,并动态不同账号登录的问题了。

效果如下:

纯前端JS解决微信公众号自动登录问题

autologin


感谢大家的阅读,欢迎交流。

本文链接:https://www.woshiqian.com/post/86833.html

百度分享获取地址:https://share.baidu.com/code
微信公众号登录  

我是钱微信/QQ:5087088

广告位、广告合作QQ:5087088

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

       

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。