用代码打出登录_Scriptable 模拟web登录技术研究

使用场景： 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()

(代码仅供分析参考，直接运行不行)

总体流程如下：

1. 用 webview 打开登录页面

2. 设置一个后台 timer，循环请求一个只能登录后获取的接口，如果获取成功，则代表登录成功，则获取对应登录凭证存储

然后后续，我们就依靠这个存储的登录凭证，继续获取下一个需要登录才能获取的数据。

# 脚本开源

这个方法可以应用在非常多功能场景的脚本中，知道了原理，我们就能编写更人性化功能的小组件代码，让用户用得更简单、舒服！

本文的案例(京东白条 iOS 小组件)代码已经开源，你可以进入下方链接获取代码进行修改学习：

https://github.com/im3x/scriptables

当然了，也可以进入「小件件」小程序一键获取安装：