小程序实现网页登录

痛定思痛。 2023-05-31 03:00 13阅读 0赞

### 前言 ###

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

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

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

--------------------

### 小程序实现网页登录 ###

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

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

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

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

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

![ce6a457839d458136f43f3659c85614b][]

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

![6fa043e068d1c8d1fd27075be77e11ed][]

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

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

![format_png][]

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

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

--------------------

### 小结 ###

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

--------------------

### 引用 ###

> 婚礼现场小程序

[ce6a457839d458136f43f3659c85614b]: /images/20230531/a7a39ad08939457e91ed3922a00bf0dc.png
[6fa043e068d1c8d1fd27075be77e11ed]: /images/20230531/aa5304fda85f44f684ff049848f709c6.png
[format_png]: /images/20230531/715938244e184d4284e5b2971cde2f77.png
[format_png 1]: /images/20230531/9ea0d45d4639472aa4074e191f26e7df.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序登录与企业微信小程序登录

在微信（或企业微信）中登录小程序，可以分为两种：第一种是使用微信授权登录，第二种使用账号密码登录（如某些非开放的系统）；一、使用微信登录小程序微信中调用w

心已赠人/ 2023年06月13日 11:17/ 0 赞/ 27 阅读

相关小程序实现网页登录

前言发现一个小程序 - 婚礼现场 (婚礼纪) 可以网页登录，研究一下操作。微信官方是没有提供网页登录的接口。大家可以登录他的小程序后，创建婚礼现场，然后点击电脑管理

痛定思痛。/ 2023年05月31日 03:00/ 0 赞/ 14 阅读

相关 springboot实现微信小程序授权登录

0. 引入依赖 <dependency> <groupId>org.bouncycastle</groupId>

爱被打了一巴掌/ 2023年01月10日 14:34/ 0 赞/ 306 阅读

相关小程序授权登录

小程序授权登录一、使用open-type=“getUserInfo” 和 bindgetuserinfo=“自定义” 获取用户信息(头像、呢称、地区等) ![在这

古城微笑少年丶/ 2022年12月30日 13:59/ 0 赞/ 169 阅读

相关 uniapp实现微信小程序登录功能

第一步我们先把页面画出来 <template>  <view v-if="isCan

系统管理员/ 2022年12月29日 14:25/ 0 赞/ 241 阅读

相关微信小程序登录

微信各接口定义（残缺版）： package com.cong.security.core.properties; public class WXCo

你的名字/ 2022年11月26日 07:00/ 0 赞/ 261 阅读

相关网页爬虫小程序

一个简单的网页爬虫程序： / 网页爬虫：得到网页上的邮箱地址得到网页上的时间戳 / public class RegexDemo {

深碍√TFBOYSˉ_/ 2022年06月06日 04:49/ 0 赞/ 197 阅读

相关小程序登录（转）

转自：https://segmentfault.com/a/1190000012731720 梳理登录流程这里有几个点是要注意的： 1. 要注意 es6语法使

向右看齐/ 2022年05月26日 08:37/ 0 赞/ 285 阅读

相关 php实现微信小程序登录

![1703831-20190721132054608-412529387.png][] 以上是官方的流程介绍，已经说的很详细了，现在简单介绍一下流程前端通过

我就是我/ 2021年11月09日 13:56/ 0 赞/ 362 阅读

相关小程序登录

文章目录场景登陆分析 && 实现场景这段时间在做一个小程序, 涉及到登陆，以及需要和服务器数据交互的问题

矫情吗；*/ 2021年11月05日 04:10/ 0 赞/ 252 阅读