uniapp微信小程序授权登录

本是古典何须时尚 2021-07-24 23:16 1005阅读 0赞

<template>
    	<view>
    		<LotusLoading :lotusLoadingData="lotusLoadingData" style="width: 100%;height: 100vh;position: absolute;z-index: 99;"></LotusLoading>
    		<view class="login" v-if="show">
    			<image src='../../static/login-bg(1).png'></image>
    			<view class='content'>
    				<view class="text">尊贵的会员，请您先登录</view>
    				<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo" class="button font-36 font-blod">微信授权登录</button>
    				<view class="bottom">
    					<view class="agree">登录即表示同意</view>
    					<view class="deal">《服务协议及隐私条款》</view>
    				</view>
    			</view>
    		</view>
    		<view class="login" v-if="callshow">
    			<image src='../../static/login-bg(1).png'></image>
    			<view class="content">
    				<view class="info">
    					<view class="top">
    						<image style="width: 64rpx;height: 64rpx;" src="../../static/iconsuccess.png"></image>
    						<text class="logo">微信授权成功！</text>
    					</view>
    					<view class="middle">为了更好的为您提供服务，请绑定手机</view>
    					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" lang="zh_CN" class="button" withCredentials="true">
    						授权绑定手机
    					</button>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				show: false,
    				callshow:false,
    				lotusLoadingData: { 
    					isShow: false //设置显示加载中组件true显示false隐藏
    				},
    				userInfo: { }
    			};
    		},
    		onLoad(options) { 
    			// Loading
    			// wx.login
    			// >> code -> 服务器 /auth/wx-codes
    			// >> >> 判断是否需要授权 > 不需要授权的话直接登录成功 > 跳转回登录成功页面
    			// >> >> 判断是否需要授权 > 需要授权 > 取消Loading
    			
    			if (uni.getStorageSync('token') && uni.getStorageSync('authtoken')) { 
    				uni.switchTab({ 
    					url: '../index/index'
    				})    //如果存在token 和authtoken 就是出于登录状态，直接进入首页
    			}else{ 
    				this.lotusLoadingData.isShow = true
    				this.submit()
    			}
    		},
    		methods: { 
    			submit() { 
    				const that = this
    				uni.getProvider({ 
    					// 授权 
    					service: 'oauth', //服务商 微信qq等默认的是oauth
    					success: function(res) { 
    						if (~res.provider.indexOf('weixin')) {  // 判断是否微信授权 
    							uni.login({ 
    								provider: 'weixin',
    								success: res => { 
    									const code = res.code;
    									const data = { 
    										code: code
    									}
    									that.$myRequest({ 
    										method: 'POST',
    										url: '/auth/wx-codes',
    										data: data
    									}).then(res => { 
    										if(res.statusCode == 200){ 
    											uni.setStorageSync('openid', res.data.open_id);
    											uni.setStorageSync('token', res.data.token)
    											that.show = false
    											if (!res.data.is_authorized) {   //通过is_authorized来判断是否需要获取authtoken
    												that.lotusLoadingData.isShow = false
    												that.show = true
    											} else { 
    												uni.setStorageSync('authtoken', res.data.auth_token)
    												that.show = false
    												that.callshow = false
    												that.lotusLoadingData.isShow = false
    												setTimeout(function(){ 
    													// uni.switchTab({ 
    													// 	url: '../index/index'
    													// })
    													uni.navigateBack({ 
    														delta:1
    													})
    												},500)
    												
    											}
    										}
    									});
    								},
    								fail: () => { 
    									uni.showToast({ 
    										title: '微信登录授权失败',
    										icon: 'none'
    									});
    								}
    							});
    						} else { 
    							uni.showToast({ 
    								title: '请先安装微信或升级版本1',
    								icon: 'none'
    							});
    						}
    					}
    				});
    			},
    
    			// 获取手机号 把encryptedData 和iv 存入storage  之后判断用户登录状态要用
    			getUserInfo(e) { 
    				uni.getUserInfo({ 
    					provider: 'weixin',
    					success: info => { 
    						this.userInfo = info;
    						uni.setStorageSync('this.userInfo', info)
    						this.show = false;
    						this.lotusLoadingData.isShow = false  //这个是自己做的自定义组件的loading 加载中你不做也没关系
    						this.callshow = true
    					},
    					fail: () => { 
    						uni.showToast({ 
    							title: '微信登录授权失败',
    							icon: 'none'
    						});
    					}
    				});
    			},
    			getPhoneNumber(e) { 
    				uni.getStorageSync('this.userInfo')
    				if (e.detail.errMsg == 'getPhoneNumber:ok') { 
    					var data = { 
    						token: uni.getStorageSync('token'),
    						user_info: {    //需要传给后台的值
    							encrypted_data: this.userInfo.encryptedData,
    							iv: this.userInfo.iv,
    							cloud_id: "",
    						},
    						"phone_number": {  //需要传给后台的值
    							"encrypted_data": e.detail.encryptedData,
    							"iv": e.detail.iv,
    							"cloud_id": ""
    						}
    					};
    					this.$myRequest({ 
    						method: 'POST',
    						url: '/auth/wx-authentications',
    						data: data
    					}).then(res => { 
    						uni.setStorageSync('authtoken', res.data.auth_token)
    						if(res.statusCode == 200){ 
    							// uni.switchTab({ 
    							// 	url: '../index/index'
    							// })
    							uni.navigateBack({ 
    								delta:1
    							})
    						}else{ 
    							this.$api.msg(res.data.message);   //这个是自己自己封装的提示，你可以用uni.showtoast
    						}
    					});
    				} else { }
    			},
    		}
    	}
    </script>
    
    <style lang="scss">
    	.login { 
    		height: 100vh;
    
    		image { 
    			width: 100%;
    			height: 100%;
    		}
    
    		.content { 
    			position: absolute;
    			bottom: 0;
    			z-index: 999;
    			background: #ECECEC;
    			height: 490rpx;
    			border-top-left-radius: 20rpx;
    			border-top-right-radius: 20rpx;
    			display: flex;
    			flex-direction: column;
    			align-items: center;
    			.bottom{ 
    				display: flex;
    				flex-direction: column;
    				align-items: center;
    				margin-top: 30rpx;
    				.agree{ 
    					font-size: 28rpx;
    					font-family: PingFang SC;
    					font-weight: 400;
    					line-height: 20px;
    					color: #000000;
    				}
    				.deal{ 
    					margin-top: 10rpx;
    					font-size: 28rpx;
    					font-family: PingFang SC;
    					font-weight: 400;
    					line-height: 20px;
    					color: #0655EA;
    				}
    			}
    			.info{ 
    				background-color: #FFFFFF;
    				margin: 20rpx;
    				width: 90%;
    				height: 100%;
    				border-radius: 20rpx;
    				padding: 20rpx;
    				display: flex;
    				flex-direction: column;
    				align-items: center;
    				.top{ 
    					display: flex;
    					margin-top: 20rpx;
    					align-items: center;
    					.logo{ 
    						font-size: 50rpx;
    						font-family: PingFang SC;
    						font-weight: bold;
    						color: #000000;
    						margin-left: 20rpx;
    					}
    				}
    				.middle{ 
    					font-size: 36rpx;
    					font-family: PingFang SC;
    					font-weight: 400;
    					margin-top: 50rpx;
    					color: #000000;
    				}
    			}
    		}
    		
    	}
    
    	.text { 
    		margin-top: 50rpx;
    		font-size: 36rpx;
    		font-family: PingFang SC;
    		font-weight: 400;
    		color: #000000;
    	}
    
    	button { 
    		width: 380rpx;
    		height: 88rpx;
    		background: linear-gradient(180deg, #EACDA3 0%, #E6B980 100%);
    		border-radius: 66rpx;
    		margin-top: 80rpx;
    	}
    
    	button::after { 
    		border: none;
    	}
    </style>