uniapp 微信小程序 获取openid,手机号进行登录，配合后端

已于 2024-04-26 15:20:02 修改
阅读量965 收藏 1
点赞数 2
文章标签： uni-app 微信小程序 小程序
于 2024-04-26 15:15:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49515138/article/details/138219881
版权

在这里插入图片描述

流程：登录注册功能,通过uni.getUserProfile获取wxcode,通过wxcode传给后端获取openid,sessionkey,unionid。
通过<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button>,
传到后端这些参数:
'session_key': $this.openidData.sessionKey,
'encryptedData': e.detail.encryptedData,
'iv': e.detail.iv
获取手机号,
再将手机号，unionid，openid传到后端进行登录

<template>
	<view class="page">
		<!-- 自定义头部 navbar -->
		<u-navbar back-icon-name="arrow-left" title=" " :custom-back="navbarBack"
			:background="{ backgroundColor: 'rgba(0,0,0,0)' }" :border-bottom="false"
			:is-back="pageStatus != 'home'"></u-navbar>
		<!-- logo -->
		<view class="logo-wrap" v-if="pageStatus == 'home' || pageStatus == 'getWxRole'">
			<image class="logo"
				src="xxxxxxxxxxxxxx/static/login/login_logo.png"></image>
			<view class="app-name">欢迎登录</view>
			<view class="app-title">弘云艺术中心</view>
		</view>

		<!-- 默认登录页面显示 -->
		<view style="width: 100%;" v-if="pageStatus == 'home'">
			<view class="text-area" @click="loginByWx">手机号快捷登录</view>
		</view>

		<!-- 微信授权登录，获取用户信息 -->
		<view style="width: 100%;" v-if="pageStatus == 'getWxRole'">
			<view class="info">为提供优质服务,需要获取你的以下信息 :</view>
			<view class="public">
				<view class="public-dot"></view>
				<view class="public-text">你的公开信息(头像、昵称等)</view>
			</view>
			<view class="text-enter" @click="getWxLoginRole">授权进入</view>
		</view>

		<!-- 微信登录小程序，再授权获取用户信息之后 -->
		<view class="loginWx" v-if="pageStatus == 'loginByWx'">
			<view class="title">欢迎使用 弘云艺术中心</view>
			<view class="desc">立即登录享受优质服务</view>
			<view class="avatar">
				<image mode="aspectFill" :src="wxLoginUserInfo.userInfo.avatarUrl"></image>
			</view>
			<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button>
		</view>

		<!-- 协议勾选 -->
		<view class="agree" v-if="pageStatus == 'home' || pageStatus == 'getWxRole' ">
			<view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag">
				<image src="xxxxxxxxxxx/static/mine/check.png">
				</image>
			</view>
			<view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag">
				<image src="xxxxxxxxxxxxxxxxx/static/operate/checked.png">
				</image>
			</view>
			<view class="agree_text">
				登录代表您已同意
				<span>《用户服务协议》《隐私权政策》</span>
			</view>
		</view>
	</view>
</template>

<script>
	import FunUniappTheme from '@/theme.scss';
	export default {
		data() {
			return {
				// 页面状态，默认为 home
				// getWxRole：获取微信权限页，loginByWx：微信授权登录页
				// loginByCode：手机号+验证码登录页，loginByPwd：手机号+密码登录
				// forgetPwd：找回密码页面，resetPwd，重置密码页面
				pageStatus: 'home',
				// 协议是否勾选
				agree_flag: false,
				// 微信授权的用户信息
				wxLoginUserInfo: {},
				// openid
				openId: '',
				// 系统内用户信息
				userInfo: {},
				//openid
				openidData: {}
			};
		},
		onShow() {
		},
		onLoad(ops) {
			if (ops && ops.interceptcard && ops.interceptcard === "true") {
				uni.showToast({
					title: '购买商品,请先登录注册。',
					icon: 'none',
					duration: 4000,
				});
			}
			if (ops && ops.goods_id_detail) {
				console.log(ops.goods_id_detail, '二维码商品详情')
				uni.setStorageSync('goods_id_detail', ops.goods_id_detail)
			}
			console.log(FunUniappTheme);
		},
		onReady() {
		},
		methods: {
			// 勾选/取消用于协议
			changeAgreeFlag() {
				this.agree_flag = !this.agree_flag;
			},

			// 微信登录
			loginByWx() {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				this.getUserInfoByWx(() => {
					this.getWxCode(code => {
						let $this = this;
						console.log('执行了吗', code)
						uni.request({
							url: "xxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",
							method: 'POST',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							data: {
								'wxcode': code,
								'parent_unionid': uni.getStorageSync('unionid')
							},
							success(res) {

								$this.openidData = res.data.data;
								console.log(res.data.data, 9999, $this.openidData);
								uni.setStorageSync('OPEN_ID', res.data.data.openid)
							}
						});
					});
				});
			},

			// 自定义navbar的返回方法
			navbarBack() {
				if (this.pageStatus == 'getWxRole' || this.pageStatus == 'loginByWx' ) {
					this.pageStatus = 'home';
				} else if (this.pageStatus == 'forgetPwd' || this.pageStatus == 'resetPwd') {
					this.pageStatus = 'loginByPwd';
				} else if (this.pageStatus == 'loginByPwd') {
					this.pageStatus = 'loginByCode';
				}
			},

			// 微信授权
			getWxLoginRole() {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				this.getUserInfoByWx(() => {
					this.getWxCode(code => {
						let $this = this;
						console.log('执行了吗', code)
						uni.request({
							url: "xxxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",
							method: 'POST',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							data: {
								'wxcode': code,
								'parent_unionid': uni.getStorageSync('unionid')
							},
							success(res) {


								$this.openidData = res.data.data;
								console.log(res.data.data, 9999, $this.openidData);
								uni.setStorageSync('OPEN_ID', res.data.data.openid)
							}
						});
					});
				});
			},
			//个人中心
			userinfo() {
				uni.request({
					url: "xxxxxxxxxxxxxindex.php?m=user&c=indexapi&a=userinfo",
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						'open_id': uni.getStorageSync('OPEN_ID')
					},
					success(res) {
						console.log(res.data.data, '个人中心222');
						uni.setStorageSync('USER_ID', res.data.data.info.user_id)
						uni.setStorageSync('user_rank', res.data.data.info.user_rank)
						if (uni.getStorageSync('goods_id_detail')) {
							uni.reLaunch({
								url: '/pages-mall/pages/goods/detail?goods_id_detail=' + uni
									.getStorageSync('goods_id_detail')
							});
						} else {
							uni.reLaunch({
								url: '/pages/home/index'
							});
						}
					}
				});
			},

			// 基于uni的获取code方法
			getWxCode(callBack) {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: loginRes => {
						console.log(loginRes, '获取信息')
						callBack(loginRes.code);
					},
					fail(e) {}
				});
			},

			// 获取openId
			getOpenId(code, callBack) {
				this.$u.api.getOpenId(code).then(res => {
					// uni.setStorageSync('OPEN_ID', res.openid);
					callBack(res);
				});
			},

			// 获取个人信息
			getUserInfoByWx(callBack) {
				let $this = this;
				uni.getUserProfile({
					desc: '获取你的昵称、头像',
					success: function(data) {
						console.log(data, '用户信息')
						uni.setStorageSync({
							key: 'APP_WX_USERINFO',
							data: data
						});
						$this.wxLoginUserInfo = data;
						$this.pageStatus = 'loginByWx';
						callBack();
					},
					fail: function(error) {}
				});
			},

			// 获取手机号回调
			decryptPhoneNumber(e) {
				let $this = this;
				console.log(e.detail, 9898)
				uni.request({
					url: "xxxxxxxxxxxxxxx/index.php?m=user&c=indexapi&a=decryptwechatdata",
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						'session_key': $this.openidData.sessionKey,
						'encryptedData': e.detail.encryptedData,
						'iv': e.detail.iv
					},
					success(res) {
						console.log(res.data, '手机号');
						uni.request({
							url: "xxxxxxxxxxxxxxxxxxxxxx/index.php?m=oauth&c=indexapi&a=bind_register",
							method: 'POST',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							data: {
								'mobile': res.data.data.phoneNumber,
								'unionid': $this.openidData.unionid,
								'openid': $this.openidData.openid
							},
							success(res) {
								console.log(res.data, '登录成功');
								if (res.data.code === 0) {
									$this.userinfo()
									uni.setStorageSync('IS_LOGIN', true);
									uni.setStorageSync('fh_type',0)
									console.log(uni.getStorageSync('IS_LOGIN'), '成功了？', uni.getStorageSync(
										'USER_ID'))
								}
							}
						});
					}
				});
			},

			// 微信小程序手机号登录
			loginByOpenId() {
				const openid = uni.getStorageSync('OPEN_ID');
				this.$u.api.loginByOpenId(openid).then(res => {
					this.userInfo = res;
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 40rpx;
		background-color: $app-theme-bg-color;
	}

	.logo-wrap {
		display: flex;
		// justify-content: center;
		padding-top: 100rpx;
		padding-bottom: 52rpx;
		flex-wrap: wrap;

		.logo {
			height: 168rpx;
			width: 166rpx;
			margin-left: 76rpx;
			margin-top: 50rpx;
		}

		.app-name {
			width: 100%;
			padding-top: 80rpx;
			margin-left: 78rpx;
			font-size: 38rpx;
			font-weight: 600;
			color: #333333;
			line-height: 52rpx;
		}

		.app-title {
			width: 100%;
			padding-top: 16rpx;
			margin-left: 78rpx;
			font-size: 38rpx;
			font-weight: 600;
			color: #333333;
			line-height: 52rpx;
		}
	}

	.text-area {
		width: 100%;
		height: 96rpx;
		background: #19be6b;
		font-weight: 400;
		border-radius: 56rpx;
		color: $app-theme-text-white-color;
		line-height: 16px;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
		/* background: url(../../static/img/logo_newhope.png); */
	}

	.info {
		font-size: 28rpx;
		font-weight: 400;
		color: $app-theme-text-black-color;
		line-height: 28rpx;
		margin-top: 180rpx;
	}

	.public {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.public-dot {
			width: 6rpx;
			height: 6rpx;
			background: #999999;
			margin-right: 10rpx;
		}

		.public-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #8f92a1;
			line-height: 24rpx;
		}
	}

	.text-enter {
		width: 100%;
		margin-top: 50rpx;
		height: 96rpx;
		background: $app-theme-color;
		font-weight: 400;
		border-radius: 56rpx;
		color: #ffffff;
		line-height: 16px;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
	}

	.head {
		margin-top: 70rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.back {
		width: 40rpx;
		height: 40rpx;
	}
	.agree {
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 66rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.agree_img image {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
	}

	.agree_text {
		margin-left: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #8f92a1;
		line-height: 24rpx;
		display: flex;
		align-items: center;

		span {
			color: $app-theme-color;
		}
	}

	.loginWx {
		width: 100%;
		padding-top: 64rpx;

		.title {
			text-align: left;
			font-size: 22px;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 400;
			color: #171717;
			line-height: 30px;
			margin-bottom: 12rpx;
		}

		.desc {
			text-align: left;
			font-size: 14px;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 400;
			color: #8f92a1;
			line-height: 14px;
		}

		.avatar {
			width: 160rpx;
			height: 160rpx;
			overflow: hidden;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 128rpx auto 160rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
前端不加班
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp开发小程序实现-获取微信账号（三）
故里2130
03-10 597
还有这个方法：getUserProfile()，就不一一吐槽了，原因就是上面的说的，被收回了，所以，你之前学会的方法，现在已经不适用了。5.当你把3篇文章都看完了后，就彻底明白了，这玩意儿还是挺复杂的，没错，是挺复杂，我们只要微信登录，居然要访问这么多接口才行。效果图，这是后端返回微信的信息，这也是最重要的，突然一看，感觉不是自己要的，后面进行展开说明。这里有些废弃的用法，坑有点多，并且文档说的和返回的都不一样。一共就这么多参数，就可以进行下一步业务逻辑的展开了。一共3篇文章，共同描述，看序号进行寻找。
微信小程序获取手机号 (java解密及微信小程序获取openid、session_key)
03-08
java解析的源码和小程序的源码，自己从项目中剥离出来的，肯定能用，有疑问私信，微信小程序获取各类信息（openid、session_key以及用户基本信息、解密手机号）
在uni-app项目中，如何实现微信小程序openid的获取
向心行者
07-26 1万+
因为uni的login()方法封装了微信wx.login()方法，所以我们这里直接调用的是uni.login()方法，返回code后，再通过getOpenId()方法调用后台接口即可。在开发微信小程序的时候，我们需要当前的微信小程序用户和我们的后台用户建立关联，这个时候，我们就需要通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。我们可以获取微信小程序用户的openid作为唯一标识，和后台用户进行绑定，获取方式也比较简单，这里做一下记录，方便后续可以快速查找并使用。..
uniapp写微信小程序，获取openId、unionId
m0_56597737的博客
06-18 6487
使用uniapp写微信小程序，获取openId，获取unionId
uni-app 获取用户的openID和基本信息
热门推荐
y1238r的博客
12-24 1万+
1、前提条件：找到小程序的id和密钥 在微信公众平台，https://mp.weixin.qq.com/，找到小程序的id和密钥 2、代码展示 （1）uni.login：获取用户的登录凭证。 https://uniapp.dcloud.io/api/plugins/login?id=login （2）uni.request：发送网络请求，通过登录凭证获取用户的openID。 https://uniapp.dcloud.io/api/request/request?id=request （3）请求接
uniapp获取openid
weixin_59525879的博客
09-24 950
在上面的代码中，我们使用了一个名为wx-login的组件，用来获取用户的登录凭证code。当wx-login组件登录成功后，会触发onWxLoginSuccess方法，该方法会使用uni.request发送请求到微信接口获取用户的openid。这里的appid和app secret需要替换为你自己的值。要获取用户的openid，需要使用微信小程序的登录API。
uni-app获取openid
最新发布
Lavante的博客
01-26 868
注意：/sfmscar/getInfoByCode 这个地址是自己写的。
uniapp微信h5授权获取用户openId的方法和步骤，用于用户登录和注册
01-26
微信h5授权获取用户openId的方法和步骤，用于用户登录和注册，代码已经封装好，下载就能用
uniapp写微信小程序，获取openId、unionId总结
06-18
用于解密unionId的js包，使用前需 npm install crypto
微信小程序获取OpenID +php后端完整源代码
08-19
微信小程序获取OpenID +php后端完整源代码。里面包含完整的PHP后台程序和微信小程序端程序，简单修改里面的配置信息就可以运行。
微信小程序获取用户openid的实现
01-03
调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。用户数据的加解密通讯需要依赖会话密钥完成。 2、code 换取 session_key 这是一个 ...
微信小程序 springboot后台如何获取用户的openid
08-25
主要介绍了微信小程序 springboot后台如何获取用户的openid,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Golang：通过小程序获取微信 openid
03-29
那么小程序获取 openid 的流程具体如下，这里我简化了一下，因为我们只需要获取到 openid 即可，具体可以参考 这里 (此图片来源于网络，如有侵权，请联系删除! ) 我们需要在小程序中调用 wx.login() 获取 code 码，...
微信小程序如何获取用户手机号
01-19
最近在做一款微信小程序，需要获取用户手机号，具体步骤如下： 流程图： 1、首先，客户端调用wx.login，回调数据了包含jscode，用于获取openid（用户唯一标识）和sessionkey（会话密钥）。 2、拿到jscode后，将其...
微信小程序获取用户绑定手机号方法示例
12-03
用户调用wx.login()方法，获取登录用户凭证code wx.login({ success: function(res) { console.log('loginCode', res.code) } }); code传给后台，凭证code获取session_key和openid ...后台会获的用户的openid和...
uni-app微信小程序登录授权的实现
10-15
主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【uniapp】小程序开发5：获取openid、获取手机号
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
10-08 3849
在小程序中获取openid，以及用户微信绑定的手机号，获取手机号必须是用户手动触发，通过给按钮绑定权限代码open-type="getPhoneNumber"获取
uniapp 获取openid 实现登录、uniapp获取微信小程序手机号、javax.crypto.BadPaddingException: pad block corrupted
wangjun5159的专栏
12-23 8225
uniapp对小程序登录实现了封装，先通过uni.login获取code，然后再用code请求自己服务器，自己服务器拿着code去微信服务器获取openid，然后业务自定义实现登录。基本流程跟微信小程序官方文档是一样的 uniapp的话，uni.login替代了wx.login，uni.login函数 uni.login({ provider: 'weixin', success: function (loginRes) { //loginRes中有code，拿着code再请求自己服务器以获
uniapp获取用户信息
qq_43319351的博客
06-22 1621
可以根据返回值传给后台用于登录，相当于账号密码。
uniapp微信小程序获取手机号
08-27
要在uniapp微信小程序中获取手机号，可以按照以下步骤进行操作： 1. 用户获取code：用户需要调用login方法获取code。可以在onLoad()生命周期函数中调用getuserNew()方法来获取code。代码示例如下： ``` onLoad() { this.getuserNew(); // 获取openid }, methods: { // 获取code getuserNew() { uni.login({ provider: 'weixin', success: res => { console.log(res.code); } }); }, } ``` 2. 通过微信官方接口获取openId和session_key：使用uni.request()方法来向微信官方接口发送获取openId和session_key的请求。代码示例如下： ``` uni.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', method: 'GET', data: { appid: 'wx9*******214e0', //你的小程序的APPID secret: '33c4d17e4********71253', //你的小程序的secret js_code: res.code, //wx.login登录成功后的code grant_type: 'authorization_code', }, success: (cts) => { // 换取成功后，暂存这些数据留作后续操作 this.openId = cts.data.openid; //openid 用户唯一标识 this.session_key = cts.data.session_key; //session_key 会话密钥 console.log(cts); console.log(this.openId, this.session_key); } }); ``` 3. 获取手机号码权限并传递相关信息：在前端进行手机号码授权，并将encryptedData、iv、sessionKey和openId这四个字段传递给后端。后端通过用户信息授权码获取openid，通过手机授权码获取手机号码。具体细节可以根据你的需求和后端逻辑进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uniapp 微信小程序 获取手机号/用户授权（最详细）](https://blog.csdn.net/qq_42957741/article/details/117086865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [uniapp微信小程序授权登录并获取手机号](https://blog.csdn.net/mrqi122/article/details/129520675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值