uniapp:微信小程序:授权登录

15 篇文章 1 订阅
<template>
	<view class="login">
		<image src="../static/icon/logo.png" mode="" class="logo"></image>
		<view class="title">标题</view>
		<button type="default" open-type="getUserInfo" @getUserInfo="getUserInfo" class="ac">微信账号一键登录</button>
		<view class="bom">登录代表您已同意<text>《用户服务协议》《隐私权政策》</text></view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				time: null,
				getSettingShow: true, //授权按钮
				wxLogin: {
					encrypted_data: '',
					openid: '',
					iv: '',
					invite_code: '', //推荐人id
				}
			}
		},
		onLoad(option) {
			if (option.invite_code) {
				this.wxLogin.invite_code = option.invite_code;
			}
		},
		onShow() {
			//微信登录
			// #ifdef MP-WEIXIN
			this.time = setInterval(() => {
				this.getSetting().then(res => {
					this.getSettingShow = res; // true 已经授权,
					if (this.getSettingShow) {
						clearInterval(this.time)
						uni.showLoading({
							title: '正在登录',
							mask: true,
						});
						uni.login({
							provider: 'weixin',
							success: (res) => {
								if (res.errMsg == "login:ok") {
									//微信授权
									this.$http.post("/api/user/wechatuserauth", {
										authcode: res.code
									}).then(res => {
										console.log(res);
										if (res.code == 0) {
											if (res.data.openid) {
												console.log('1')
												// 获取用户信息
												uni.getUserInfo({
													provider: 'weixin',
													success: (val) => {
														if (val.errMsg == 'getUserInfo:ok') {
															this.wxLogin.iv = val.iv;
															this.wxLogin.encrypted_data = val.encryptedData;
															this.wxLogin.openid = res.data.openid;
															// 授权登录
															this.$http.post("/api/user/wechatuserinfo", {
																openid: this.wxLogin.openid,
																iv: this.wxLogin.iv,
																encrypted_data: this.wxLogin.encrypted_data,
																// invite_code: 'UYEZQT',
																invite_code:this.wxLogin.invite_code,
															}).then(e => {
																if (e.code == 0) {
																	uni.setStorageSync('userInfo', e.data);
																	uni.setStorageSync('access_token', e.data.token);
																	uni.hideLoading();
																	this.goBack(1)
																}
															})
														}
													},
												});
											} else {
												console.log('2')
												uni.setStorageSync('userInfo', res.data);
												uni.setStorageSync('access_token', res.data.token);
												uni.hideLoading();
												this.goBack(1)
											}
										}
									})
								}
							}
						});
					}
				})
			}, 1000)
			// #endif
		},
		methods: {
			//查询是否授权
			getSetting() {
				return new Promise((req, rej) => {
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.userInfo']) {
								console.log("未授权");
								req(false)
							} else {
								console.log("已授权");
								req(true)
							}
						}
					})
				})
			},

			//页面跳转
			goBack(name) {
				if (name == 1) {
					uni.switchTab({
						url: '/pages/index',
						animationType: 'pop-out',
						animationDuration: 300
					})
				} else {
					uni.navigateTo({
						url: name,
						animationType: 'pop-in',
						animationDuration: 300
					})
				}
			},
		},
	}
</script>
<style scoped lang="scss">
	.login {
		.logo {
			display: block;
			width: 200rpx;
			height: 200rpx;
			margin: 120rpx auto 70rpx;
		}

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #2E3155;
		}

		button {
			display: block;
			width: 690rpx;
			height: 80rpx;
			margin: 20rpx auto;
			background: #02CF8C;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
		}

		.bom {
			position: fixed;
			left: 0;
			bottom: 10px;
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			color: #2E3155;

			text {
				color: #02CF8C;
			}
		}
	}
</style>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值