效果

分析：登录流程

 1.用户点击登录按钮，弹出授权弹窗2.用户确认授权，调用uni.login接口，拿到code3.使用code调用后端接口,接收后端返回的自定义登录态,如token等4.登录状态在本地保存起来,用的时候在vuex取用5.用户信息由后端解密，统一返回，再存入本地此处简化了流程,没有返回自定义登录状态,直接使用openid来判断用户，用户信息也没有做特别处理，获取到之后就进行了存储

1.用户点击登录按钮，弹出授权弹窗

一个按钮点击事件弹出授权弹窗

<view class="btn"><button type="success" size="default" shape="circle" @click="wxLogin">授权登录</button></view>

这里我拆分了两个方法
uniapp官网getUserProfile

//授权登录弹窗wxGetUserProfile: function() {return new Promise((resolve, reject) => {//uniapp4月更新了这个方法getUserProfile，用getUserinfo无法弹出授权窗口uni.getUserProfile({lang: 'zh_CN',desc: '获取你的昵称、头像、地区及性别',success: (res) => {resolve(res)// res.encryptedData,// res.iv},// 失败回调fail: (err) => {reject(err)}})})},

这里是调用uni.login拿到code

2.用户确认授权，调用uni.login接口，拿到code

//uni.loginwxSilentLogin: function() {return new Promise((resolve, reject) => {uni.login({success(res) {//这里就是code，可以打印看下resolve(res.code)},fail(err) {reject(err)}})})},

这里是按钮点击事件；

3.使用code调用后端接口,接收后端返回的自定义登录态,如token等

wxLogin(e) {let p1 = this.wxSilentLogin()let p2 = this.wxGetUserProfile()p1.then(code => {return code}).then(code => {return new Promise((resolve, reject) => {p2.then(res => {resolve({code,iv: res.iv,encryptedData: res.encryptedData})}).catch(err => {reject(err)})})}).then(res => {const accountInfo = wx.getAccountInfoSync() // 动态获取小程序 appid// 用接口拉取信息（因为后端需要你的appid来获取数据，所以你需要动态获取appid）this.$u.post('/busLaw/mpAppLogin', {code: res.code,appId: accountInfo.miniProgram.appId}).then(res => {this.$store.commit('updateToken', res.data.token)uni.showToast({title: "授权成功",icon: "none",})setTimeout(()=>{uni.navigateBack({ //登陆完返回delta: 1});},1000)})}).catch((err) => {console.log(err)})}

4.登录状态在本地保存起来,用的时候在vuex取用

我这里是将token用vuex保存起来，就是在上一步拉接口拿到token之后就把它存在vuex中

this.$store.commit('updateToken', res.data.token)

之后每个页面中我都可以直接this.$store.state.token来拿到token啦~

5.用户信息由后端解密，统一返回，再存入本地

这里就是后端返回的数据，我们自己处理啦~

这里附上全部代码~

<template><view><!-- 顶部组件 --><!-- <u-navbar is-back :background="{ background: 'transparent' }" :border-bottom="false" title="授权登录" title-size="28"></u-navbar> --><view class="content"><view class="logo u-flex"><image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/0d8c04b0-a59d-11ea-b997-9918a5dda011.png"></image></view><view class="name">{{ wxappName }}</view><u-toast ref="uToast" /><view class="summary u-flex"><text>如需正常使用小程序的功能，请点击下方授权登录按钮，打开授权弹窗，并点击允许。</text></view><view class="btn"><button type="success" size="default" shape="circle" @click="wxLogin">授权登录</button></view></view></view>
</template><script>// 登录流程// 1.用户点击登录按钮，弹出授权弹窗// 2.用户确认授权，调用uni.login接口，拿到code// 3.使用code调用后端接口,接收后端返回的自定义登录态,如token等// 4.登录状态在本地保存起来,用的时候在vuex取用// 5.用户信息由后端解密，统一返回，再存入本地// 此处简化了流程,没有返回自定义登录态,直接使用openid来判断用户// 用户信息也没有做特别处理，获取到之后就进行了存储export default {data() {return {wxappName: '名片小程序'}},methods: {//授权登录弹窗wxGetUserProfile: function() {return new Promise((resolve, reject) => {//微信公众开发4月更新了这个方法getUserProfile，用getUserinfo无法弹出授权窗口uni.getUserProfile({lang: 'zh_CN',desc: '获取你的昵称、头像、地区及性别',success: (res) => {resolve(res)// res.encryptedData,// res.iv},// 失败回调fail: (err) => {reject(err)}})})},//uni.loginwxSilentLogin: function() {return new Promise((resolve, reject) => {uni.login({success(res) {resolve(res.code)},fail(err) {reject(err)}})})},wxLogin(e) {let p1 = this.wxSilentLogin()let p2 = this.wxGetUserProfile()p1.then(code => {return code}).then(code => {return new Promise((resolve, reject) => {p2.then(res => {resolve({code,iv: res.iv,encryptedData: res.encryptedData})}).catch(err => {reject(err)})})}).then(res => {const accountInfo = wx.getAccountInfoSync() // 小程序 appId// 用接口拉取token和appidthis.$u.post('/busLaw/mpAppLogin', {code: res.code,appId: accountInfo.miniProgram.appId}).then(res => {this.$store.commit('updateToken', res.data.token)uni.showToast({title: "授权成功",icon: "none",})setTimeout(()=>{uni.navigateBack({ //登陆完返回delta: 1});},1000)})}).catch((err) => {console.log(err)})}},}
</script><style lang="scss">page {background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/50c93d50-a594-11ea-b997-9918a5dda011.png') no-repeat center / 100% 100%;}.content {margin-top: 200rpx;.logo {justify-content: center;image {width: 128rpx;height: 128rpx;border-radius: 64rpx;}}.name {margin-top: 20rpx;font-size: 32rpx;color: #333;font-weight: bold;text-align: center;}.summary {justify-content: center;margin-top: 40rpx;margin-bottom: 60rpx;padding: 0 54rpx;color: #999;// text-align: center;line-height: 48rpx;font-size: 28rpx;text {width: 100%;}}.btn {padding: 0 100rpx;}}
</style>

uniapp授权登陆操作相关推荐

uniapp授权微信登陆
uniapp授权微信登陆测试平台安卓工具安卓模拟器(网易的mumu) 打包工具(HBuilderX) 微信签名生成工具首先微信授权的appid和签名确保与项目保持一致通过签名工具获取到签名 ...
uniapp微信公众号微信授权登陆实现
正常不需要支付的项目一般不需要做微信授权登陆,有业务需要的可以加,我这边项目中使用了微信支付功能所以需要搞个微信授权登陆进入到登陆页面首先要执行 onLoad(options) {if (optio ...
uniapp手机一键登录，微信授权登陆
之前前端可以通过微信的接口获取openid,现在不允许了,所以把code传给后端后端反数据给我们, <template><view class="content yd-ce ...
uni-app第三方登陆-微信
uni-app第三方登陆-微信结合上文全局登陆校验,实现微信授权登录官方手册地址: https://uniapp.dcloud.io/api/plugins/login?id=getuserinf ...
微信OAuth2网页授权登陆接口
微信OAuth2网页授权登陆接口,微信OAuth2网页授权登陆接口,在你的网站上放上可以扫码登陆,会不会吸引更多用户去注册,现在你只需要简单的配制一下就可以轻松实现,还不快点拿走,微信扫码登陆接口开发 ...
小程序php mysql_PHP+TP小程序授权登陆实现
仅供大家参考学习 1.先说明一下官方:为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持. 小程序与小游戏获取用户信息接口调整,请开发者注意升级. 2.使用 ...
Centos7 操作系统 mysql5.7 配置远程登陆操作
Centos7 操作系统: mysql5.7 配置远程登陆操作: 首先登陆服务器,进入数据库: mysql -u root -p show databases; use mysql; show tab ...
关于微信小程序授权登陆之后需要在个人信息页展示信息，如微信头像，昵称这件事
开发时使用uniapp进行开发,不过用什么开发都不重要. 在搞完微信授权登陆后,又遇到需要把用户昵称和头像展示在个人信息页的情况,在试了很多方法后,发现了便利的方法. 有想过从数据库获取数据,也想过从 ...
微信开放平台开发第三方授权登陆（三）：Android客户端
微信开放平台开发系列文章: 微信开放平台开发第三方授权登陆(一):开发前期准备微信开放平台开发第三方授权登陆(二):PC网页端微信开放平台开发第三方授权登陆(三):Android客户端微信开放平 ...

uniapp授权登陆操作

效果