基于uniapp+java实现微信小程序无感登录，授权手机号登录，获取昵称头像，获取定位信息

最新推荐文章于 2024-08-16 22:30:00 发布
最新推荐文章于 2024-08-16 22:30:00 发布
阅读量3.1k 收藏 10
点赞数 3
文章标签： java uni-app 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jyjczy1314/article/details/131243605
版权

项目背景

使用uniapp开发微信小程序，避免不了微信登录。但自动微信2022年升级了api版本后，不再允许返回昵称和头像信息，所以才出现无感登录或授权手机号登录。实现方式大同小异。

目录

java后端所需maven

1、小程序无感登录

前端实现代码：

	onLoad() {
		if (!uni.getStorageSync("token")) {
			this.showLogin = true;
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					this.code = loginRes.code;
					//此处将code传入后端进行解析到openid，最终得到登录后的token缓存到本地即可
				}
			})
		}
	}

由于使用uni.login并不需要用户授权，所以能做到无感登录。

后端实现：

/**
微信登录工具类
**/
public class WechatGetUserInfoUtil {

    public static final String APPID = "wxd5fc6c544e752529";
    public static final String SECRET = "c2bf267226c0157c859da6934ee3c298";


	/**
	根据微信小程序登录获得的code获取用户信息
	*/
    public static Map<String, String> getWxLoginInfo(String code) {
        String apiUrl = "https://api.weixin.qq.com/sns/jscode2session?appid=" + APPID + "&secret=" + SECRET + "&js_code=" + code + "&grant_type=authorization_code";
        String responseBody = HttpUtil.get(apiUrl);
        Map jsonObject = new Gson().fromJson(responseBody, Map.class);
        Map<String, String> map = new HashMap<>();
        map.put("openid", jsonObject.get("openid").toString());
        map.put("session_key", jsonObject.get("session_key").toString());
        return map;
    }
}

通过以上方法可以对应的openid，然后通过openid可以得到用户信息，如果不存在用户信息，则创建一个用户即可。默认头像和随机数昵称值即可。

2、授权手机号登录

授权手机号登录相对于无感登录是相对复杂一点，但也还好。
前端：(ps：此处前端框架使用了uView，只是样式上有所变化)

<template>
	<view>
		<!-- 登录授权弹出层 -->
		<u-popup :show="showLogin" mode="center" round="10rpx" @close="showLogin=false">
			<view class="login_view">
				<view class="content_view">
					<image src="../../static/logo.png"></image>
					<view>亲，授权手机号后才能正常使用相关功能</view>
				</view>
				<view class="btn_view">
					<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="login" color="#43ad47"
						shape="circle" text="授权登录"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
	<script>
		export default {
		data() {
			return {
				showLogin: false,
				code:''
			}
		},
		onLoad() {
			if (!uni.getStorageSync("token")) {
				this.showLogin = true;
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.code = loginRes.code;
					}
				})
			}
		},
		methods: {
			login(e) { //授权登录
				let obj = {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					code: this.code
				}
				if (e.detail.iv) {
					wxlogin(obj).then(res => {
						this.showLogin = false;
						uni.setStorageSync('token', res.data.access_token);
						uni.showToast({
							title: "登录成功",
							icon: "none",
							duration: 2000
						})
					})
				} else {
					uni.$u.toast('授权失败，请联系管理员');
				}
			},
		}
	</script>
	<style lang="scss">
		.login_view {
			width: 630rpx;
			height: 400rpx;

			.title_view {
				font-size: 36rpx;
				color: #333;
				text-align: center;
				padding: 20rpx;
			}

			.content_view {
				margin: 50rpx;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				text-align: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				view {
					margin-top: 20rpx;
				}
			}

			.btn_view {
				margin: 30rpx;

			}
		}
	</style>

注意，获取手机号需要用户点击按钮触发后方可获取，不然是无法获取到手机号信息的。
获取code一定要在授权之前获取，否则后端无法解密出对应的手机号信息。

后端实现：

	
import cn.hutool.http.HttpUtil;
import cn.hutool.json.JSONObject;
import com.google.gson.Gson;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.Base64Utils;

import javax.crypto.BadPaddingException;
import javax.crypto.Cipher;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
import java.io.UnsupportedEncodingException;
import java.security.*;
import java.security.spec.InvalidParameterSpecException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;

 
public class WechatGetUserInfoUtil {

    public static final String APPID = "wxd5fc6c544e752529";
    public static final String SECRET = "c2bf267226c0157c859da6934ee3c298";
 
    public static Map<String, String> getWxLoginInfo(String code) {
        String apiUrl = "https://api.weixin.qq.com/sns/jscode2session?appid=" + APPID + "&secret=" + SECRET + "&js_code=" + code + "&grant_type=authorization_code";
        String responseBody = HttpUtil.get(apiUrl);
        Map jsonObject = new Gson().fromJson(responseBody, Map.class);
        Map<String, String> map = new HashMap<>();
        map.put("openid", jsonObject.get("openid").toString());
        map.put("session_key", jsonObject.get("session_key").toString());
        return map;
    }

    /**
     * 解密用户手机号
     *
     * @param encryptedData 包括敏感数据在内的完整用户信息的加密数据
     * @param iv            加密算法的初始向量
     */
    public static String getMobile(String encryptedData, String sesskey, String iv) {
        String result = decryptData(encryptedData, sesskey, iv);
        if (result == null) {
            return null;
        }
        Map<String, String> map = new JSONObject(result).toBean(Map.class);
        return map.get("phoneNumber");
    }


    public static String decryptData(String encryptedData, String sessionKey, String iv) {
        // 被加密的数据
        byte[] dataByte = Base64Utils.decode(encryptedData.getBytes());
        // 加密秘钥
        byte[] keyByte = Base64Utils.decode(sessionKey.getBytes());
        // 偏移量
        byte[] ivByte = Base64Utils.decode(iv.getBytes());
        try {
            // 如果密钥不足16位，那么就补足. 这个if 中的内容很重要
            int base = 16;
            if (keyByte.length % base != 0) {
                int groups = keyByte.length / base + (keyByte.length % base != 0 ? 1 : 0);
                byte[] temp = new byte[groups * base];
                Arrays.fill(temp, (byte) 0);
                System.arraycopy(keyByte, 0, temp, 0, keyByte.length);
                keyByte = temp;
            }
            // 初始化
            Security.addProvider(new BouncyCastleProvider());
            Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding", "BC");
            SecretKeySpec spec = new SecretKeySpec(keyByte, "AES");
            AlgorithmParameters parameters = AlgorithmParameters.getInstance("AES");
            parameters.init(new IvParameterSpec(ivByte));
            // 初始化
            cipher.init(Cipher.DECRYPT_MODE, spec, parameters);
            byte[] resultByte = cipher.doFinal(dataByte);
            if (null != resultByte && resultByte.length > 0) {
                String result = new String(resultByte, "UTF-8");
                return result;
            }
        } catch (NoSuchAlgorithmException e) {
            log.error(e.getMessage(), e);
        } catch (NoSuchPaddingException e) {
            log.error(e.getMessage(), e);
        } catch (InvalidParameterSpecException e) {
            log.error(e.getMessage(), e);
        } catch (IllegalBlockSizeException e) {
            log.error(e.getMessage(), e);
        } catch (BadPaddingException e) {
            log.error(e.getMessage(), e);
        } catch (UnsupportedEncodingException e) {
            log.error(e.getMessage(), e);
        } catch (InvalidKeyException e) {
            log.error(e.getMessage(), e);
        } catch (InvalidAlgorithmParameterException e) {
            log.error(e.getMessage(), e);
        } catch (NoSuchProviderException e) {
            log.error(e.getMessage(), e);
        }
        return null;
    }
}

实现时需要先调用：getWxLoginInfo得到openid和session_key信息，然后调用获取手机号getMobile得到手机号，最后通过openid取获取用户信息，如果不存在，则创建一个用户，并设置openid和手机号信息，最后返回token即可。

3、修改用户昵称头像信息

前端：

<button class="authorization" type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar" >上传微信头像</button> 
<input id="nickname-input" v-model="nickname" v- class="authorization white" type="nickname" placeholder="请输入用户昵称" > 
chooseavatar(e) {
	this.avater = this.avater;//如果需要上传头像，则先上传再赋值
	},

此处不是很完善，后面完善

4、获取定位信息

前端：

 uni.getLocation({
 	type: 'gcj02',
 	success: function(res) {
 	 	///处理业务
 	 	res.latitude
 	 	res.longitude
 	},
 	fail: function(err) {
 		 console.log("授权失败");
 	}
 });

需要打开manifest.json进行配置请求定位权限
在这里插入图片描述

注意：微信开发者工具中，不支持定位，也不会弹出授权申请，只有在手机上才可以，所以微信开发者工具上时，可以采用设置默认值进行测试。

如果需要持续定位，则需要单独申请后台定位授权，具体前往uniapp查看。

jyjsjava
关注
基于Uniapp+SpringBoot实现微信小程序授权登录
孙不坚1208
10-24 1万+
开发需求： 我们团队在开发微信小程序过程中，需要绑定微信用户的信息到数据库里，那么就需要获得用户的唯一标识openid,而微信为了安全，是禁止小程序直接访问该接口,因此我们不能直接拿到用户的openid，从而需要通过调用微信接口实现授权登录。 我是孙不坚1208，这篇文章是在2021年暑假参加山东省大学生软件设计大赛时所写，主要是第一次接触小程序开发（uniapp+springboot），遇到的问题都记下来了，后面我也会持续更新出我的专栏《小程序开发指南》，欢迎与我一起学习，希望我的文章能够帮助到大家。.
uni-app 微信小程序刷新token，无感登录
m0_57580977的博客
06-05 2310
后端token每5分钟刷新一次，需要给注册过的用户无感登录，当接口403或401后，刷新token并且重新发起所有403或401请求。
微信小程序请求微信api授权登录(Java后端)
CRR_0312的博客
03-23 7071
1.小程序端调用wx.login(),获取到微信返回的code临时凭证. 2.小程序端调用我方的后台接口,Java后端调用微信的api,需要appId,appSecret,js_code,grant_type:authorization_code 代码如下: private JSONObject getUserWXLoginInfo(String wxCode) { String reques...
Java 微信小程序授权登录——引导
最新发布
Mr_likes的博客
08-16 431
对于微信的授权的登录流程和实现方式官网文档已说的很清楚了并且是一直迭代的（比如之前能拿到用户的详细信息，现在拿不到了，之前授权方式和现在授权方式不同了），本文档只是做个Java后端实现小程序用户授权的一个流程引导，应当已官方文档为基准。开放能力 / 用户信息 / 小程序登录 (qq.com)
【uniapp】微信小程序2024手机号快速验证及无感登录教程(内附代码)
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
04-19 3722
最近注册了公司，可以注册具有支付能力的小程序了，各种材料加备案、认证差不多花了一个月的时间，打算接入支付后，接入一个快速注册的组件，给用户带来便捷的操作体验，发现uniapp的文档不多，于是自己踩了坑，本次简单记录一下，方便以后使用回顾《记一次云之家签到抓包》《记一次视频抓包m3u8解密过程》《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》《Python】记录抓包分析自动领取芝麻HTTP每日免费IP（成品+教程）》
Java - 微信小程序授权手机号登录
Gmy9946的博客
10-28 2875
微信小程序授权手机号登录
Java微信小程序的授权登陆
qq_38946379的博客
06-20 4096
Java微信小程序的授权登陆
Java开发微信小程序授权登录
weixin_44488397的博客
08-20 4306
微信小程序登录
uniapp 小程序授权登录，获取用户头像昵称等信息
01-26
uniapp 小程序授权登录，获取用户头像昵称等信息，代码已经封装好，下载就能用
前端uniapp+后端springboot 详细教程《实现微信小程序授权登录》（附完整前后端项目demo）
tigerhhzz的博客
05-20 8705
功能： 通过前端发送请求，请求头中携带token参数，后端接受到token，然后进行token验证，拿到openid，通过openid去数据库中查询用户信息,并返回前端。功能： 通过前端发送请求携带的参数code以及后端配置文件中的微信小程序appid和微信小程序密钥，后端拼接url向微信后台发送请求。通过拿到的openid，去数据库查询对应用户信息，如果没有openid的用户，进行新增操作；使用uniapp构建一套代码多端使用的前端框架项目。如果存在openid的用户，进行更新操作。
新版uniapp微信小程序授权登录，获取用户信息手机号
JaneYork的博客
07-13 1151
从一开始的getUserInfo改成getUserProfile，再改到直接不能获取信息了，那这个接口还有什么用，根本就没调用必要，直接wx.login拿个code登陆就完事了。其次，如果需要绑定手机号，可以根据标识，后续提示引导用户需要绑定手机号。或者点击按钮微信授权手机号【需要马内】：​​​​​。​​ 但是可以通过wx.login直接获取到openid， 微信小程序获取头像填写，昵称填写 ​​。【不推荐】uniapp一键登录，获取手机号+ unicloud云函数，需要马内： ​​。
使用 UniApp 实现小程序的微信登录功能
10-15
主要介绍了使用 UniApp 实现小程序的微信登录功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Java实现微信授权登录
12-26
这是一个通过Java开发的微信授权的工具包，可以简单的修改自己相关的配置就可使用
uniapp - 最新微信小程序手机号一键登录功能效果，uniapp小程序实现手机号码一键登录，uniapp微信小程序端通过手机号授权完成立即登录操作（详细示例源码，新手小白一键复制开箱即用）
高级前端工程师
01-29 5692
uniapp，微信小程序，uniapp小程序平台，uniApp手机号一键登录，uniapp小程序端手机号一键登录功能，实现微信小程序手机号一键登录，在uniapp中实现获取手机一键登录功能，uniapp手机号快捷登录，uniapp微信小程序授权登录并获取手机号，微信小程序手机号快速验证组件调用方式，uniapp小程序怎么用手机号一键登录，uniapp一键登录流程及代码，如何获取手机号一键登录到小程序，微信小程序获取本机手机号一键登录功能，新手详细教程，详细手机一键登录完整示例代码，uni-app微信unia
【Uniapp】小程序携带Token请求接口+无感知登录方案
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
02-07 9690
我们来说说为什么不能用access_token作为token所以说，access_token 只是用来调用一些微信提供的api服务的，并且access_token 只有两个小时，你把access_token当作小程序的token？不仅不满足暴露这个问题，时间上也有限制我们再来说说checkSession是用来检测什么的？所以！checkSession是用来检测session_key而不是access_token的，access_token是根据小程序的appid和secret确定的，没有单一用户代表性tok
Java实现微信小程序登录授权
ProBaiXiaodi的博客
03-17 5933
Java实现微信小程序登录授权~~~
微信小程序的授权登录-Java 后端 （Spring boot）
zlfjavahome的专栏
04-01 6878
小程序登录Java spring boot
微信小程序授权登录，前后端代码，Java版本，并获取手机号、昵称和头像
LJH_java10086的博客
10-04 1278
【代码】微信小程序授权登录，前后端代码，Java版本，并获取手机号、昵称和头像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值