索取营销诊断书
021-80394720QQ
    您的位置：上海毫米网络优化公司 > 网站优化分享 >
    相关推荐recommended
    java springboot+uniapp实现微信小程序获取微信手机号
    作者：mmseoamin日期：2024-04-27

    目录

    • 前期准备
      • 登录微信公众平台
        • 1、获取AppId和AppSecret
        • 2、更新隐私协议
        • 3、查看手机号验证额度
        • 4、在uni-app和微信开发者工具中填写自己第一步获取到的AppId
        • 前端uniapp代码
          • 1、添加获取手机号按钮
          • 2、自定义方法实现
          • 3、对应请求接口
          • 4、当前效果
          • 后端java代码
            • 1、controller
            • 2、service
            • 3、实现类
            • 4、实体类
            • 希望对你有所帮助，谢谢阅读！如果代码有哪些地方有错误或者能改进欢迎评论留言。

              前期准备

              登录微信公众平台

              https://mp.weixin.qq.com/

              用此功能可能需要首页一些列认证完成后才可以：eg：小程序备案、微信认证等

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第1张

              1、获取AppId和AppSecret

              侧开发管理->开发设置->需要获取 AppID(小程序ID)、**AppSecret(小程序密钥) **。

              注意：AppSecret第一次生成后需要自己复制保存，后续虽然可以重置但是重置会相对麻烦。

              java springboot+uniapp实现微信小程序获取微信手机号,开发管理需要,第2张

              2、更新隐私协议

              左侧最底部设置（或点击右上角头像）->基本设置->服务内容声明->用户隐私保护指引 需要更新隐私协议否则后面会影响小程序按钮呼叫不出选择手机号的弹窗。隐私内容根据个人小程序用途如实填写即可。

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第3张

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第4张java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第5张

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第6张

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第7张

              3、查看手机号验证额度

              注意：如果按照开头所说，完成小程序备案、微信认证等点击右侧付费管理-》用量统计-》手机号快速验证组件，有标注资源包总量（如下图资源包有1000次体验次数后续可自行加购）。

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第8张

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第9张

              4、在uni-app和微信开发者工具中填写自己第一步获取到的AppId

              1、uni-app中

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第10张

              2、微信开发者工具中

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第11张

              前端uniapp代码

              1、添加获取手机号按钮

              因为我们这边需要调用的是手机号所以open-type=getPhoneNumber和@getphonenumber=‘自定义方法’。

              @getphonenumber是用户在弹出申请获取用户手机号时用户手动点击了手机号的回调。

              2、自定义方法实现

              实现思路：

              1、先用uni.login返回的用户登录凭证，去后端解析出open_id,如果有存在相应的open_id,则直接返回用户执行登录。

              2、如果用户第一次手机号授权登录系统，将微信open_id存入数据库用户表中，返回用户执行登录。

              参考uni.login参考文档：uni.login API

              async wxPhonelogin(e) {
	const _this = this
	// 开启遮罩层
	_this.showLoadings(true);
	// 调用uni-app提供登录接口 
	uni.login({
		const _this = this
		// 用户点击了允许后操作
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			// 开启遮罩层
			_this.showLoadings(true);
			uni.login({
				// 登录服务提供商，我们需要微信登录
				provider: "weixin",
				async success(loginRes) {
					// 调用uni-app提供登录接口
					let data = {
						// 用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息
						code: loginRes.code,
						// 微信授权手机弹窗选择手机后返回code，使用access_token可以解析出手机号
						mobileCode: e.detail.code,
					}
					try {
						// 如果用户表已经存在code对应解析的openId，直接完成登录
						const userOpenIdRes = await openIdLoginApi(data)
						if (userOpenIdRes.success && userOpenIdRes.data !== null) {
							_this.tellPhoneValue = userOpenIdRes.data.account
							// 获取返回数据 执行操作
							_this.loginAfter(userOpenIdRes, 'wxLogin');
							_this.getUserInfo();
						}
						// 关闭遮罩层
						_this.showLoadings(false);
					} catch (e) {
						// 关闭遮罩层
						_this.showLoadings(false);
						// 提示错误信息
						if (e.data.msg) {
							_this.setShowToastFunc(e.data.msg);
						} else {
							_this.setShowToastFunc('登录异常~');
						}
						return;
					}
				}
			})
		} else {
			// 用户点解拒绝后不做操作
			return;
		}
},

              3、对应请求接口

              import {requestApi} from './requestApi.js';
const url = '/thirdPartyLogin';
// 微信openID登录
function openIdLoginApi(data) {
	return requestApi({
		url: url + '/openIdLogin',
		data: data,
		method: 'POST'
	});
}
export {
	wxLogin,
	openIdLoginApi
}

              4、当前效果

              正常到这一步，应该点击按钮就会弹出选择手机号

              如果未出弹出选择手机号，需要查看控制台报错信息。可能是前期工作未处理好的原因！！

              如下效果

              微信开发者工具和华为真机效果。

              java springboot+uniapp实现微信小程序获取微信手机号,在这里插入图片描述,第12张

              后端java代码

              1、controller

              @Api(value = "第三方登录", tags = "第三方登录")
@RestController
@RequestMapping("thirdPartyLogin")
@AllArgsConstructor
public class ThirdPartyLoginController {
    private ThirdPartyLoginService thirdPartyLoginService;
    @PostMapping("/openIdLogin")
    @ApiOperationSupport(order = 1)
    @ApiOperation(value = "微信OpenId登录", notes = "微信OpenId登录")
    public R openIdLogin(@RequestBody ThirdPartyWxLoginDto params) {
        AuthInfo authInfo = thirdPartyLoginService.openIdLogin(params);
        Map map = new HashMap<>(6);
        map.put("token", authInfo.getAccessToken());
        map.put("userId", authInfo.getUserId().toString());
        map.put("userName", authInfo.getUserName());
        map.put("account", authInfo.getAccount());
        // 手机号脱敏
        String s = authInfo.getPhone().replaceAll("(\\d{3})\\d*(\\d{4})", "$1****$2");
        map.put("userPhone",s);
        return R.data(map);
    }
}
 

              2、service
               

              public interface ThirdPartyLoginService {
    AuthInfo openIdLogin(ThirdPartyWxLoginDto params);
}

               

              3、实现类
               

              代码中用到了restTemplate做请求，需要引入相关依赖和配置。请自行百度。
              用到的API
              （1）用户手机号验证 ：手机号快速验证
              （2）第一步用户手机号验证调用需要带参ACCESS_TOKEN：获取接口调用凭据
              （3）根据用户uni.login获取到的登录凭证code解析出open_id :小程序登录
               

              @Service
@Slf4j
public class ThirdPartyLoginServiceImpl implements ThirdPartyLoginService {
    @Autowired
    private RedisUtil redisUtil;
    @Autowired
    private RestTemplate restTemplate;
    @Autowired
    private IUserService iUserService;
    @Autowired
    private UserMapper userMapper;
    @Autowired
    private IDhMessagePushService iDhMessagePushService;
    /**获取手机号*/
    public static final String WX_GET_PHONE_NUMBER_URL = "https://api.weixin.qq.com/wxa/business/getuserphonenumber";
    /**获取接口调用凭据,需要此凭据解析手机号*/
    public static final String WX_ACCESE_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token";
    /*** 获取open_id接口*/
    public static final String OPEN_ID_URL = "https://api.weixin.qq.com/sns/jscode2session";
    @Value("${wx.config.appSecret}")
    private String appSecret;
    @Value("${wx.config.appId}")
    private String appId;
    public static final String REDIS_KEY_ACCESS_TOKEN = "REDIS_KEY_ACCESS_TOKEN";
	/**
	*	微信openID验证登录，如果用户表有openId直接验证登录，否则走微信手机号验证登录
	*/
	@Override
    public AuthInfo openIdLogin(ThirdPartyWxLoginDto params) {
        // 获取用户openId,判断数据库是否有存入该openId了，如果有代表之前登录过了就不用走手机验证
        HashMap userOpenId = getUserOpenId(params);
        String openid = userOpenId.get("openid");
        QueryWrapper userQueryWrapper = new QueryWrapper<>();
        userQueryWrapper.lambda().eq(User::getOpenId,openid);
        List list = iUserService.list(userQueryWrapper);
        if (CollectionUtil.isNotEmpty(list)) {
            if (list.size() > 1) {
                // 如果有多个则微信授权找到手机号进行登录
                return wxLogin(params.getMobileCode(),openid);
            } else {
                // 如果只有一个则判断 用户是否失效，若正常则返回
                User user = list.get(0);
                if (Objects.nonNull(user.getFailureTime())) {
                    throw new RuntimeException("当前手机号已失效无权限登录~");
                }
                UserInfo userInfo = getUserInfo(user);
                return TokenUtil.createAuthInfo(userInfo);
            }
        }
        // 如果为空则微信授权登录
        return wxLogin(params.getMobileCode(),openid);
    }
    /**
	*	微信手机号验证登录
	*/
    private AuthInfo wxLogin(String mobileCode , String openid) {
        log.info("=== 微信手机授权登录开始 ===");
        String purePhoneNumber = getWxUserPhone(mobileCode);
        // 根据手机号查询用户表 判断是否有该手机号如果没有的话则 不允许登录
        QueryWrapper userQueryWrapper = new QueryWrapper<>();
        userQueryWrapper.lambda().eq(User::getAccount,purePhoneNumber);
        User user = iUserService.getOne(userQueryWrapper);
        if (Objects.isNull(user) || Objects.nonNull(user.getFailureTime())) {
            throw new RuntimeException("当前手机号无系统权限或者已失效~");
        }
        user.setOpenId(openid);
        user.setPhone(purePhoneNumber);
        iUserService.saveOrUpdate(user);
        // 封装返回数据
        UserInfo userInfo = getUserInfo(user);
        return TokenUtil.createAuthInfo(userInfo);
    }
    /**
	*	解析用户手机号
	*/
    private String getWxUserPhone(String mobileCode) {
        // 获取Access_Token
        String accessToken = getAccessToken();
        // 请求解析手机号
        StringBuilder getPhoneNumberUrl = new StringBuilder(WX_GET_PHONE_NUMBER_URL);
        getPhoneNumberUrl.append("?access_token=").append(accessToken);
        Map phoneNumberParam = new HashMap<>();
        phoneNumberParam.put("code", mobileCode);
        ResponseEntity hashMapResponseEntity = restTemplate.postForEntity(getPhoneNumberUrl.toString(), phoneNumberParam, HashMap.class);
        if (hashMapResponseEntity.getStatusCodeValue() != 200 || Objects.isNull(hashMapResponseEntity.getBody()) || (Integer) hashMapResponseEntity.getBody().get("errcode")!=0) {
            throw new RuntimeException("解析手机接口调用异常~");
        }
        log.info("=== 微信手机授权请求解析手机号返回：{} ",hashMapResponseEntity.getBody());
        LinkedHashMap phoneInfo = (LinkedHashMap)hashMapResponseEntity.getBody().get("phone_info");
        String purePhoneNumber = (String)phoneInfo.get("purePhoneNumber");
        return purePhoneNumber;
    }
    /**
	*	获取Access_Token，消息订阅或者微信授权都需要这个东西，可以放入缓存因为每次获取都有两个小时有效期
	*/
    private String getAccessToken() {
        // 查询redis 是否有存放access_token避免过多次请求
        Object redisRes = redisUtil.get(REDIS_KEY_ACCESS_TOKEN);
        if (Objects.nonNull(redisRes)) {
            return redisRes.toString();
        }
        // 请求ACCESS_TOKEN
        StringBuilder accessTokenUrl = new StringBuilder(WX_ACCESE_TOKEN_URL);
        accessTokenUrl.append("?grant_type=client_credential");
        accessTokenUrl.append("&appid=").append(appId);
        accessTokenUrl.append("&secret=").append(appSecret);
        ResponseEntity accessTokenRes = restTemplate.getForEntity(accessTokenUrl.toString(), HashMap.class);
        if (accessTokenRes.getStatusCodeValue() != 200 || Objects.isNull(accessTokenRes.getBody()) || Objects.nonNull(accessTokenRes.getBody().get("errcode"))) {
            throw new RuntimeException("Token接口调用异常~");
        }
        log.info("=== 微信手机授权请求AccessToken返回：{} ",accessTokenRes.getBody());
        String accessToken = accessTokenRes.getBody().get("access_token").toString();
        // 存放redis 设置两个小时超时时间
        redisUtil.set(REDIS_KEY_ACCESS_TOKEN,accessToken,2L, TimeUnit.HOURS);
        return accessToken;
    }
    /**
	*	获取用户OpenId
	*/
    private HashMap getUserOpenId(ThirdPartyWxLoginDto params) {
        StringBuilder openIdUrl = new StringBuilder(OPEN_ID_URL);
        openIdUrl.append("?grant_type=").append("authorization_code");
        openIdUrl.append("&appid=").append(appId);
        openIdUrl.append("&secret=").append(appSecret);
        openIdUrl.append("&js_code=").append(params.getCode());
        ResponseEntity openIdRes = restTemplate.getForEntity(openIdUrl.toString(), String.class);
        if (openIdRes.getStatusCodeValue() != 200 || Objects.isNull(openIdRes.getBody())) {
            throw new RuntimeException("OpenId接口调用异常~");
        }
        HashMap parse = JSON.parseObject(openIdRes.getBody(),HashMap.class);
        if (Objects.nonNull(parse.get("errcode"))) {
            throw new RuntimeException("OpenId接口调用异常~");
        }
        return parse;
    }
}

               

              4、实体类
               

              @Data
public class ThirdPartyWxLoginDto {
    /**
     * 用户uni.login登录凭证code
     * */
    private String code;
    /**
     * 手机号Code
     * */
    private String mobileCode;
}

               

              希望对你有所帮助，谢谢阅读！如果代码有哪些地方有错误或者能改进欢迎评论留言。
               
               上一篇：投springer的期刊时，遇到的一些latex模板使用问题
               下一篇：Python+MySQL爬取船讯网AIS静态数据
              网站优化运营
               
              整站seo优化
               
              网络营销运营
               
              成功案例
               
              品牌创意网站
               
              营销型网站
               
              小程序
               
              微信小程序
               
              微信公众号
               
              百度熊掌号
               
              网站优化分享
               
              关于我们
               
              公司概况
               
              公司新闻
               
              公司文化
               
              结构体系
               
              企业资质
               
              加入我们
               
              关注我们
              扫描二维码
              获取更多信息
              精彩一手掌握
              Copyright © 2014-2019 seo,上海网站优化_网络制作_网站seo排名_网站建设推广_上海网络公司 版权所有
沪ICP备19022315号