简介：实现小程序授权登录功能-小程序开发

首页 2024-06-26 15:34:55

本文为您带来了微信小程序的相关知识，主要介绍了如何实现小程序授权登录功能的相关内容。让我们看看，我希望它能对你有所帮助。

【相关学习建议：小程序学习教程】

在我们的日常工作、学习和生活中，微信小程序已经成为我们不可分割的一部分。请注意，每当我们使用一个新的小程序时，我们总是会遇到以下页面：

这是微信applet授权登录功能。授权登录后，我们可以正常使用applet，applet还将获得我们的个人信息，如用户权益、手机号码等

授权登录功能分析

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

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

调用wx.login() 微信api获取临时登录凭证code，并返回开发者服务器
调用auth.code2Session?微信api接口获取用户唯一标识OpenID、 UnionID和会话密钥session__是微信开放平台账号下用户唯一的标识key
解密操作步骤2获得的参数，获取用户手机号码、头像等特性，并将所需数据保存到缓存中

步骤实现代码如下：

获得临时登录证书code

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

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

??<view>
????????<view>
??????????<text>需要先授权获取个人信息</text>
??????????<button>快速授权微信账号</button>
????????</view>
??</view>

登录后复制

点击按钮时，调用getuserInfo方法，isShow在使用wx的同时设置false.获取登录凭证的logincodode获取登录凭证

getUserInfo:e=&gt;{??????this.setData({????????isShow:false
??????})

??????wx.login({????????success:?function?(res)?{???????????????let?code?=?res.code?//?登录证书code
?????????}
??????})
??????
??}

登录后复制

二、根据登录凭证code获取用户登录信息

拿到登录凭证code后，调用auth.code2Session?微信api接口(这里是服务端操作，后端老板做，我们可以直接调用他给的接口)

?????????wx.request({????????????????url:?auth获取用户信息.code2Session微信api接口，????????????????method:?'POST',????????????????data:{??????????????????code:code///登录凭证codede
????????????????},????????????????header:?{??????????????????'content-type':?'application/json;charset=UTF-8'
????????????????},????????????????
????????????????success:?function?(res)?{??????????????????var?userphone=?res.data.data??????????????????///解密手机号码
??????????????????var?msg?=?e.detail.errMsg;??????????????????var?sessionKey?=?userphone.session_key;//会话密钥
??????????????????var?encryptedData=e.detail.encryptedData;?//签名
??????????????????var?unionid?=?userphone.unionid//唯一标识
??????????????????var?iv=?e.detail.iv;??????????????????///成功授权
??????????????????if?(msg?==?'getPhoneNumber:ok')?{
????????????????????wx.checkSession({??????????????????????success:function(){????????????????????????///请求服务解密手机号码
????????????????????????this.deciyption(sessionKey,encryptedData,iv,unionid);
??????????????????????}
????????????????????})
??????????????????}
????????????????}
??????????????})
????????}
??????})

登录后复制

此时，我们已经获得了大部分用户信息，但是用户的手机号码、用户头像等信息仍然处于加密状态，我们需要对这些参数进行解密

三、根据用户信息解密获取用户手机号码

deciyption(sessionKey,encryptedData,iv,unionid){????var?that?=?this;
????wx.request({??????url:?解密接口,??????method:?'POST',??????data:?{????????sessionKey:?sessionKey,????????encryptedData:encryptedData,????????iv:?iv
??????},??????header:?{????????'content-type':?'application/json;charset=UTF-8'
??????},??????success:?function(res)?{
????????let?data?=?res.data????????if?(data.resultCode?==?'success')?{
????????????wx.setStorageSync('userTel',?data.data.phoneNumber);////存储解密用户手机号码
????????}else{
????????????wx.showToast({????????????????title:?请重新授权获取信息失败，????????????????icon:?'none'
????????????})
????????????that.setData({????????????????isShow:true
????????????})
????????}????
??????},
??????fail:function(res)?{
????????wx.showToast({????????????title:?获得失败请重新授权，????????????icon:?'none'
????????})
????????that.setData({??????????isShow:true
????????})
??????}
????})
??},

登录后复制

此时已完成授权登录功能

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

以上是简要介绍：实现小程序授权登录功能的详细内容，请关注其他相关文章！

阅读全文

简介：实现小程序授权登录功能-小程序开发

首页 2024-06-26 15:34:55

最新文章

相关文章