uni-app 微信小程序手机号一键登录（java 后端）

女爷i 2022-12-24 00:50 534阅读 0赞

## uni-app 微信小程序 手机号 一键登录 ##

实现思路 非常简单

1.button 按钮设置 获取手机号的类型。  
2.**code 需要提前提前提前提前获取**。写在onshow 或者 onload中 ，从缓存中获取登录状态，如未登录就获取code。  
3.执行 bindPhone 时，带着code 、iv、encryptedData 一起去后端请求接口 。解密后返回token 即可。

<button  open-type="getPhoneNumber" @getphonenumber="bindPhone">微信一键登陆</button>

data() { 
    			return { 
    				code： ''
    			}
    	},
    	onShow() { 
    			// 已经登陆 获取用户信息
    
    			// 如未登录 获取code
    			let _this = this;
    			
    				uni.showLoading({ 
    					title: '登录中...'
    				});
    				// 1.wx获取登录用户code
    				uni.login({ 
    					provider: 'weixin',
    					success: function(loginRes) { 
    						console.log("登录", loginRes.code)
    						_this.code = loginRes.code;
    						uni.hideLoading();
    					},
    				})
    	}，
    	methods: { 
    	
    		// 绑定手机号码
    		bindPhone(e) { 
    			let that = this;
    
    			let param = { 
    				"iv": e.detail.iv,
    				"encryptedData": e.detail.encryptedData,
    				code: this.code
    			}
    			// 执行后端接口 这里就是请求后端接口
    			loginService.bindPhone(param).then(result => { 
    
    					if (result !== '' && result.errno === 0) { 
    						uni.showToast({ 
    							title: '登录成功',
    							icon: 'none'
    						})
    						// 存储登录信息 修改登录状态 登录成功
    					}
    				}).catch((error) => { 
    					
    				});
    		}
    	}

**java 后端代码**

pom 引入 三方工具类

<dependency>
         <groupId>com.github.binarywang</groupId>
         <artifactId>weixin-java-miniapp</artifactId>
         <version>3.9.0</version>
     </dependency>

实现类

@Autowired
    	private WxMaService wxService;
    
    
        /** * 微信手机号码绑定 * @param body * @return */
        @PostMapping("bindPhone")
        public Object bindPhone(@RequestBody String body) { 
    
    		// code 可换取openId 用于账户的创建 查询 等操作
            String code = JacksonUtil.parseString(body, "code");
    
            WxMaJscode2SessionResult result = null;
            try { 
                result = this.wxService.getUserService().getSessionInfo(code);
            } catch (WxErrorException e) { 
                e.printStackTrace();
            }
            // 也能获取opneId result.getOpoenId();
            String sessionKey = result.getSessionKey();
    
            String encryptedData = JacksonUtil.parseString(body, "encryptedData");
            String iv = JacksonUtil.parseString(body, "iv");
            
     		//获取手机号码
            WxMaPhoneNumberInfo phoneNumberInfo = this.wxService.getUserService().getPhoneNoInfo(sessionKey, encryptedData, iv);
           
            String phone = phoneNumberInfo.getPhoneNumber();
            // 这里处理你的用户逻辑，具体的自己写叭。 我这里是演示 直接返回 phone 就行
    		
            return ResponseUtil.ok(phone);
        }

注意事项：code 一直要在之前获取，在页面初始化的时候获取，用户点了登录的时候，一块将code 和手机还要信息传递给后端，不然后端必然会报错，报错示例如下。

com.google.gson.JsonSyntaxException: java.lang.IllegalStateException: Expected BEGIN\_OBJECT but was STRING at line 1 column 1 path $