使用场景: iOS 桌面小组件显示一些敏感的个人信息(需要登录)
比如,京东的京豆信息、京东白条的还款数据、联通话费流量等信息、其他需要登录后才能显示的网页数据等等。
之前群友们分享过一个京东豆显示、联通话费查询等 iOS 小组件插件。
但是以往的插件,用户交互方式比较繁琐。
比如需要手动抓包、修改代码填写cookie等操作后才能正确获取到数据,并不是很完美。
所以我在研究,有没有更高效的方式解决这个交互问题。
让像我这样的小白用户,只想点击一下登录,输入账号信息,登录成功,脚本自动给我存储cookie然后后续展示就OK了!
能程序实现的都用程序实现,懒才能促进技术发展!
当然,一个比较完美的方案,已经被我们研究出来并实际测试使用了!
这里,分享给大家!
# 技术原理
我们用 WebView 组件,让用户打开登录页面,然后后台程序循环读取是否登录成功(登录成功后有对应的cookie),登录成功提示用户关闭网页,程序自动保存登录信息,完成!✅
这里我以最近新编写的 iOS 小组件——京东白条 作为例子,登录的代码如下:
const webView = new WebView()webView.loadURL('https://mcr.jd.com/credit_home/pages/index.html?btPageType=BT&channelName=024')// 循环,获取cookieconst tm = new Timer()tm.timeInterval = 1000tm.repeats = truetm.schedule(async () => { const req = new Request("https://ms.jr.jd.com/gw/generic/bt/h5/m/firstScreenNew") req.method = "POST" req.body = 'reqData={"clientType":"ios","clientVersion":"13.2.3","deviceId":"","environment":"3"}' const res = await req.loadJSON() const cookies = req.response.cookies cookies.map(cookie => { if (cookie['name'] === 'pt_key') { // 存储,并通知成功 this.notify("登录成功", "登录凭证已保存!可以关闭当前登录页面了!") tm.invalidate() this.settings['pt_key'] = cookie['value'] this.saveSettings(false) return } })})await webView.present(true)tm.invalidate()
(代码仅供分析参考,直接运行不行)
总体流程如下:
用 webview 打开登录页面
设置一个后台 timer,循环请求一个只能登录后获取的接口,如果获取成功,则代表登录成功,则获取对应登录凭证存储
然后后续,我们就依靠这个存储的登录凭证,继续获取下一个需要登录才能获取的数据。
# 脚本开源
这个方法可以应用在非常多功能场景的脚本中,知道了原理,我们就能编写更人性化功能的小组件代码,让用户用得更简单、舒服!
本文的案例(京东白条 iOS 小组件)代码已经开源,你可以进入下方链接获取代码进行修改学习:
https://github.com/im3x/scriptables
当然了,也可以进入「小件件」小程序一键获取安装: