首页 > 编程知识 正文

小程序实现网页登录不上,微信小程序实现微信登录

时间:2023-05-05 02:59:02 阅读:215863 作者:3908

前言

发现一个小程序 - 婚礼现场 (婚礼纪) 可以网页登录,研究一下操作。微信官方是没有提供网页登录的接口。

大家可以登录他的小程序后,创建婚礼现场,然后点击电脑管理与投屏来看他的小程序网页登录流程。

微信小程序: 婚礼现场(婚礼纪) -> 然后创建一个现场。->f返回到主页面,点击刚刚创建的婚礼。->点击下方的管理婚礼 -> 上方有个电脑端管理与投屏 -> 复制网址 -> 网页打开 -> 用它下方的二维码登录。

小程序实现网页登录

1.PC 获取登录的二维码 :

https://live.haicaoyun.com/hms/hcyWeddingWall/appApi/webLogin/getQrCode?current_time=1571723998231

服务器返回两个数据 1.二维码的图片。2.客户端的标识 key。

这个二维码是客户端发送请求后,服务器调用小程序的接口生成的。我们知道微信小程序的二维码生成跳转到指定页面并且携带参数。

因此,在小程序内引导用户扫描 PC 端的二维码 ,如下图为小程序内的页面:

用户扫描后,相当于微信让用户跳转到小程序的一个页面,我们可以伪造一个授权登录页面 ( 这个页面是我们前端做的,不是微信自己的 )。如下图,用户被微信跳转到了我们伪造的登录页面 :

用户点击登录后,将 key ( 这个key是扫描二维码后,微信传递的 ) 传递给服务器,意思是客户端已经准备好了。

同时 PC 端不断的带 key 轮训服务器登录接口,等服务器接收到客户端准备好的信息后,给 PC 端返回登录成功的信息。如下图为 PC 端的轮询 :

因为我们实际上利用微信小程序二维码的跳转功能来做伪网页登录。

PC 端轮询会给服务器造成一定压力,因此可以设计轮询的时间/次数,过期让用户刷新二维码,如下图:

小结

到这里基本实现了小程序网页登录功能。注意到它还有一个投屏功能,实际上是利用 websocket 来进行数据通信,比较简单,这里就不再赘述了。

引用

婚礼现场小程序

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。