微信小程序,微信授权手机号码

uniapp中index.vue:

复制代码
<template>
	<view class="content">
		<button 
		  open-type="getPhoneNumber" 
		  @getphonenumber="getPhoneNumber"
		  type="primary"
		>
		  授权手机号登录 
		</button>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			 
		},
		methods: {
			getPhoneNumber(e) {
			if (e.detail.errMsg  === 'getPhoneNumber:ok') {
			      const { encryptedData, iv } = e.detail; 
				  
				wx.login({
				  	success: (res) => {
				  		console.log('====>'+res.code);
				  		wx.request({
				  		  url: 'http://localhost:8089/wx/user/wx-login',  // 替换为你的后端接口 
				  		  method: 'POST',
				  		  data: {
				  		    code: res.code, 
				  		    encryptedData,
				  		    iv 
				  		  },
				  		  success: (res) => {
				  			console.log(res);
				  		    // 3. 登录成功处理 
				  		    if (res.data.code  === 200) {
				  				console.log(res.data.msg);
				  		    }
				  		  }
				  		});
				  	}
				});
			      
			    } else {
			      console.error(' 获取手机号失败:', e.detail.errMsg); 
			    }
			  },
			

			
		}
	}
</script>

<style>

</style>

后端代码:

依赖

html 复制代码
<dependency>
	<groupId>com.github.binarywang</groupId>
	<artifactId>weixin-java-miniapp</artifactId>
	<version>4.3.0</version>
</dependency>

controller:

复制代码
    @PostMapping("/wx-login")
    public R<String> wxLogin(@RequestBody WxUserInfo userInfo) {
        return userInfoService.getPhoneNumber(userInfo);
    }

serviceImpl:

java 复制代码
    @Override
    public R<String> getPhoneNumber(WxUserInfo userInfo) {
        try {
            WxMaJscode2SessionResult session = wxMaService.getUserService().getSessionInfo(userInfo.getCode());
            log.info(session.getSessionKey());
            log.info(session.getOpenid());
            //TODO 可以增加自己的逻辑,关联业务相关数据
            WxMaPhoneNumberInfo phoneInfo = wxMaService.getUserService().getPhoneNoInfo(session.getSessionKey(), userInfo.getEncryptedData(), userInfo.getIv());
            String phoneNumber = phoneInfo.getPhoneNumber();

            return R.ok(phoneNumber);
        } catch (WxErrorException e) {
            log.error(e.getMessage(), e);
            return R.fail(e.toString());
        } finally {
            WxMaConfigHolder.remove();//清理ThreadLocal
        }
    }
复制代码
WxUserInfo
java 复制代码
package com.example.demo.domain.dto;

import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;

@Data
@Accessors(chain = true)
public class WxUserInfo implements Serializable {
    private String appid;
    private String sessionKey;
    /**
     * 签名信息
     */
    private String signature;
    /**
     * 非敏感的用户信息
     */
    private String rawData;
    /**
     * 加密的数据
     */
    private String encryptedData;
    /**
     * 加密密钥
     */
    private String iv;

    private String code;
}
相关推荐
油丶酸萝卜别吃6 小时前
utils.js 说明文档
开发语言·javascript·ecmascript
zyplayer-doc8 小时前
VuePress类静态文档站和动态知识库怎么选:两种技术路线的适用场景
javascript·人工智能·后端·安全·智能手机
leisoo80978 小时前
100GBA股股票数据怎么存ClickHouseRedisMySQLJSON完整对比
大数据·linux·服务器·开发语言·python
不会代码的小猴9 小时前
21. 泛型编程上
开发语言·c++·笔记·算法
一只旭宝10 小时前
细讲C加加【9】C++ std::function与std::bind详解|仿函数、绑定器、类成员绑定、占位符、成员偏移指针
开发语言·c++·算法
coder!mq12 小时前
说几个常见的语法糖?
java·开发语言·算法
gugucoding12 小时前
38. 【Java】Stream API(下):高级操作与性能
java·开发语言
Lhan.zzZ12 小时前
在 Visual Studio 2022 中打造可扩展的动态链接库模块:从零搭建到原理解析
开发语言·c++·visual studio
心平气和量大福大12 小时前
android-实例-蒲公英-更新与安装-5-签名与生成APK
android·java·开发语言
码哥DFS13 小时前
构造函数、实例对象、对象原型 ----三者关系
开发语言·javascript·原型模式