mpvue实现小程序登录和授权获取用户信息

首先要明白一件事，小程序中的登录和授权其实是两个操作。
登录的意义就是让web服务器知道当前的用户是谁，传统的web应用中用户通过输入账号和密码实现登录，而小程序中对应的是openId（当前用户对应的唯一标识）。

每个用户相对于每个微信应用（公众号或者小程序）的openId 是唯一的，也就是说一个用户相对于不同的微信应用会存在不同的openId.

小程序中的授权分为很多种，使用摄像头、录音功能、用户信息等等，大多数情况下通过官方提供给的wx.authorize()就可以获取对应的授权（弹出微信授权的对话框，用户允许之后即可获得），但今天要说的用户信息授权，在小程序一系列改版之后，则需要通过其他方式获得。

下面是前端代码实现思路。

调用wx.login()方法获取code（登录凭证），然后发送给后台，后台就可以通过code2Session向微信服务器请求到openid和session_key。

mounted (){wx.login({success (res) {if (res.code){// 这里可以把code传给后台，后台用此获取openid及session_key}},})
}

只获取到用户的openid意义并不大，我们还需要用户的昵称、头像等个人基本信息，获取这些是需要用户授权的。大多数情况下我们通过调用wx.authorize()就可以向用户发起某种授权请求，也就是弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据。

例如想调用设备的录音功能：

wx.authorize({// 通过scope指明申请获取哪种类型的权限scope: 'scope.record',success() {// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问wx.startRecord()}
})

会弹出以下弹窗

但是获取用户信息比较特殊，就像官方文档中说的："wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，请使用 <button open-type="getUserInfo"/>"，也就是需要用户手动点击open-type=getUserInfo的<button>组件才可以弹出请求权限的弹窗。

// template代码

<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfoClick">获取权限</button>
//script代码getUserInfoClick(){// console.log('click事件首先触发')
}，
bindGetUserInfo(e) {// console.log('回调事件后触发')const self = this;if (e.mp.detail.userInfo){console.log('用户按了允许授权按钮')let { encryptedData,userInfo,iv } = e.mp.detail;self.$http.post(api,{// 这里的code就是通过wx.login()获取的code:self.code,encryptedData,iv,}).then(res => {console.log(`后台交互拿回数据:`,res);// 获取到后台重写的session数据，可以通过vuex做本地保存}).catch(err => {console.log(`api请求出错:`,err);})  } else {//用户按了拒绝按钮console.log('用户按了拒绝按钮');}
},

到这里就已经获取到用户的基本信息了，可以再稍微优化一下。虽然通过wx.getUserInfo()方法已经不能弹出授权窗口，但授权状态会保存在缓存中，只要授权过且没过期，便可以通过此api的success回调直接获取到用户信息，否则进入会进入fail回调，此时我们再提示用户点击<button>组件进行主动过授权即可。

// template代码

<button v-i="buttonVisible" open-type="getUserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfoClick">获取权限</button>

// javascript代码


mounted () {const self = this;wx.login({success (res) {if (res.code){self.code = res.code;self.wxGetUserInfo(res.code);}},})
},
methods: {wxGetUserInfo (code) {const self = this;wx.getUserInfo({withCredentials: true,success (res) {let { encryptedData,userInfo,iv } = res;self.$http.post('api',{code,encryptedData,iv,}).then(res => {console.log(`后台交互拿回数据:`,res);// 获取到后台重写的session数据，可以通过vuex做本地保存}).catch(err => {console.log(`自动请求api失败 err:`,err);})  },fail (err) {console.log('自动wx.getUserInfo失败:',err);// 显示主动授权的buttonself.buttonVisible = true;}})},bindGetUserInfo(e) {// console.log('回调事件后触发')const self = this;if (e.mp.detail.userInfo){console.log('用户按了允许授权按钮')let { encryptedData,userInfo,iv } = e.mp.detail;self.$http.post(api,{// 这里的code就是通过wx.login()获取的code:self.code,encryptedData,iv,}).then(res => {console.log(`后台交互拿回数据:`,res);// 获取到后台重写的session数据，可以通过vuex做本地保存}).catch(err => {console.log(`api请求出错:`,err);})  } else {//用户按了拒绝按钮console.log('用户按了拒绝按钮');}},
}

到这里，就通过mpvue简单实现了小程序得登录及获取用户信息授权，总结一下：

首先要通过wx.login()获取code，也就是登录凭证。
拿到code之后，引导用户触发open-type="userinfo"的button组件，在回调事件中拿到encryptedData以及iv，与code一起传给后台，后台通过这些向微信服务器请求到openId和session_key之后，自定义登录态并将其与openId 和session_key 关联起来然后写session。
后台将登录态返回给前端，前端筒骨vuex或者wx.setStorageSync() 方式讲session全局保存起来。

如果你想开发小程序或者了解更多小程序的内容，可以通过专业开发公司，来帮助你实现开发需求：厦门在乎科技-专注厦门小程序开发、APP开发、网站开发、H5小游戏开发

mpvue实现小程序登录和授权获取用户信息相关推荐

微信小程序学习9：获取用户信息进行登录操作 wx.getUserProfile
微信小程序学习9:获取用户信息进行登录操作wx.getUserProfile 2021年4月份左右微信对获取用户的API进行了更改.使用wx.getUserInfo只能获取用户的匿名信息. 要获取用户 ...
小程序：版本更新后获取用户信息变更
小程序:版本更新后获取用户信息变更更新后,以前获取用户信息,是通过wx.getUserInfo,然后就会弹出授权窗口,现在必须通过button ,才能实现: <button open-type ...
微信小程序一个按钮同时获取用户信息和手机号码
<view class="login" bindtap='getuserInfo'><button open-type="getPhoneNumber& ...
微信小程序app.js中获取用户信息以及为golbalData赋值的坑
代码如下: //app.js App({ globalData: { urlPath: "http://www.baidu.com//", //此处貌似必须填写搜索引擎的网址 ...
（JAVA）支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
前言: 最近公司做一个支付宝小程序项目,用支付宝userId做唯一用户id,后台encryptedData解密出用户支付宝绑定的手机号信息,其中参数:authToken和encryptedData均 ...
微信小程序登录及授权获取手机号
一.遇到的问题 1.获取手机号授权时报错:getPhoneNumber:fail no permission 原因是公众号没有进行企业认证 2.流程 1)登录拿session并保存 var that ...
微信小程序登录-手机号授权并获取手机号
做微信小程序时,记录实现微信小程序登录这里已经获取用户openId和sessionKey 1.通过按钮触发手机号授权必须要通过按钮触发授权,open-type='getPhoneNumber'不能 ...
Java-(二)微信小程序授权获取用户信息和手机号码
第一篇我们已经知道了微信小程序怎么授权登录获取用户信息. openId 和 unionId .下面将高速告诉大家,微信小程序如何授权获取用户信息和手机号码. 微信官方文档:https://develo ...
支付宝小程序授权/获取用户信息
支付宝小程序授权/获取用户信息目录: 文章目录支付宝小程序授权/获取用户信息获取支付宝小程序授权token 解析支付宝小程序接口响应加密数据获取支付宝小程序授权token 前提准备工作: ...
微信小程序授权获取用户信息和手机号码
微信小程序授权获取用户信息和手机号码 1.微信官方文档登录:https://developers.weixin.qq.com/miniprogram/dev/framework/open-abili ...

mpvue实现小程序登录和授权获取用户信息

mpvue实现小程序登录和授权获取用户信息相关推荐

最新文章

热门文章