简单介绍：实现小程序授权登录功能

开发运维 2023-08-01 醒在深海的猫 手机阅读

本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了怎么实现小程序授权登录功能的相关内容，下面一起来看一下，希望对大家有帮助。

简单介绍：实现小程序授权登录功能

【相关学习推荐：小程序学习教程】

在我们平时工作、学习、生活中，微信小程序已成为我们密不可分的一部分，我们仔细留意下，每当我们使用一个新的小程序时，总会遇到如下页面:

87124e9520702c0a95a03b66386e57c.jpg

这便是微信小程序授权登录功能了，授权登录后，我们就可以正常使用小程序，而小程序也会获取到我们的用户权益，手机号等个人信息

授权登录功能剖析

微信小程序的授权登录具体步骤如下所示

tapd_20655371_base64_1663653456_27.png

具体实现主要有以下三个步骤:

  • 调用wx.login() 微信api获取临时登录凭证code，并回传到开发者服务器

  • 调用auth.code2Session 微信api接口，获取用户唯一标识OpenID、 用户在微信开放平台帐号下的唯一标识UnionID和会话密钥session_key

  • 通过步骤2获取的参数进行解密操作，获取用户手机号，头像等特性，并把需要的数据保存到缓存中

步骤实现代码如下：

一、获取临时登录凭证code

由于微信官方修改了getUserInfo接口，现在无法实现一进入微信小程序就会自动弹出授权窗口，所以我们只能通过button按钮让用户手动触发

我们先写一个简单的弹框，用isShow变量控制，isShow取决于步骤3中的缓存信息，当所有步骤都走通，会正确缓存用户信息，此时弹框隐藏，否则弹框都为显示状态

1665209888640.png

需要先授权获取个人信息 微信账号快速授权 登录后复制

getUserInfo:e=>{ this.setData({ isShow:false }) wx.login({ success: function (res) { let code = res.code // 登录凭证code } }) }登录后复制