uniapp 微信登录 小程序 demo

lxf2023-04-25 18:22:01

如何在uniapp上实现小程序的微信登录功能?下面这篇文章将分享uniapp上小程序微信登录功能的具体操作流程,希望对大家有所帮助!

uniapp 微信登录 小程序 demo

我之前写过一篇关于uniapp开发微信登录功能的文章,是Androidapp版本。今天我就来介绍一下如何在小程序上实现微信登录。本文没有提到微信登录服务端接口。本文将提到具体的接口设计和表结构设计思路。与app相比,在微信小程序上实现微信登录更为方便,因为应用id的生成过程较少,但前提是要有一个微信开放平台,如果没有,就要在官网注册一个账号。

接下来,我们来谈谈下一步。这个过程相对简单。需要注意的是,每个小程序都是通过电子邮件注册的,一个电子邮件只能绑定一个小程序,所以一个人拥有的电子邮件数量直接限制了一个人拥有的小程序数量。

1、注册开放平台

这一步和之前app的app微信登录功能方法一样。网上有教程,注册过程有点麻烦。需要使用企业信息。这里只提一下,注册一个开放的平台就够了,可以满足app的需求、小程序、微信官方账号、网站等。,我只是为了这篇文章再次提到。毕竟文章虽小,但五脏要全。

2、开发人员资格认证

这一块和以前一样,因为开发者在开放平台上的资质认证通过后,就给你开放了app、小程序、微信官方账号、网站等平台的微信开放功能权限,每个平台可以增加多个,比如小程序可以增加50个。这样算起来,这300块还是有价值的。

3、添加小程序,开放平台

uniapp 微信登录 小程序 demo

在这里填写小程序的相关信息,下一步需要微信扫描代码,不明白扫描代码是什么意思,因为电子邮件与微信关系不大,扫描代码后小程序成功绑定到开放平台。

uniapp 微信登录 小程序 demo

点击查看,发现内容很少。

uniapp 微信登录 小程序 demo

这与app绑定到开放平台完全不同。其实很容易理解,因为这毕竟是微信小程序。微信小程序应该根据微信的基本权限挂载到微信上,这意味着你可以直接使用微信的几乎所有功能,只要你能开发出来,show me the code 就行了。

4、获取AppSecreteret

在开发管理中,小程序密钥可以在开发设置中获得。拿到这个后,你可以自己保存。系统不会帮你明确保存。如果以后丢失,可以重置生成。密钥在一般小程序业务中不能使用,只有在做微信开放功能(登录、分享等)时才能使用。).

5、微信登录业务设计

微信登录业务在一般互联网产品中具有注册和登录功能,但在非互联网产品中,一般不允许普通微信用户注册,而是在本应用程序中注册的用户。因此,此登录需要将普通用户与微信账号绑定。

该图中的业务流程仍然是微信登录功能中的业务:

uniapp 微信登录 小程序 demo

问题来了,如何实现登录? 本文的重点是说明上图中登录此块的具体内容

这里有一张微信官方登录业务设计图。可以理解,这张图对于刚开始做的人来说有点复杂。没关系。你可以根据我下面的分析知道你的想法。

uniapp 微信登录 小程序 demo

以下是我结合项目实际情况的具体业务分析, 具体内容分为前后两部分:

前端业务

比如小明在手机上用微信登录,如果是第一次登录,就要用系统账号绑定,比如admin账号,他要完成两步操作:1、微信授权并获取微信账号信息;2、微信账号绑定系统账号;

第一步是获取微信账号信息,简单总结就是先获得用户授权,然后用开发者AppID和AppSecret调用特定的登录界面获取用户信息和openid。

第二步是回到前端界面,然后给出登录操作界面,用于输入系统用户名和密码。

后端业务

第二步是新用户访问该应用程序时必须采取的步骤。此步骤结束后,系统用户账户信息和当前用户微信信息(openid)可以同时传输到后台,登录界面除了常规登录验证外,还要匹配这个openid,全对登录成功。系统账号与openid是一对多的关系,这很容易理解,admin账号,可以让多个微信用户登录。当然,如果当前微信用户是第一次登录,则需要在登录时插入当前微信用户与系统账号之间的绑定信息。

其实前端业务可以登录微信进行业务包装,也可以做成服务后调用,因为AppID和AppSecret对这些信息比较敏感,最好放在后端存储。

实现登录业务

1、登录授权,获得临时登录凭证code

下面贴了代码,我具体分析一下思路。微信登录需要弹出授权页面。视图层代码有一个特殊的格式,所以你必须这样写。