uniapp 前端

uniapp登录按钮: (在button加上这俩个参数)

open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"

<button class="cu-btn bg-green margin-tb-sm lg" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信授权登录</button>

methods方法区

getPhoneNumbe(e) 这个e 就是登录用户小程序的code值

code值后续用于请求小程序官方接口来获取用户手机号

methods: {

getPhoneNumber(e){
			console.log(e)

			
		uni.showLoading({
					title: "加载中"
				});
			
			var data = {code:e.detail.code}
			console.log("请求参数",data)
			Net.request({ //请求自己的后台
				url: API.userApi(), //后台地址 
				data:JSON.stringify(data), //code值参数
				header:{'Content-Type':'application/json;charset=UTF-8'}, 
				method: "post",
				success: function(res) {
					// setTimeout(function () {
					// 	uni.hideLoading();
						
					// }, 1000);
					if (res.data.code == 200) {
						localStorage.setItem("accessToken",res.data.token);
						localStorage.setItem("userInfo",res.data.userInfo.phonenumber);
						localStorage.setItem("nickName",res.data.userInfo.nickName);
						localStorage.setItem("jf",res.data.userInfo.jf);
						localStorage.setItem("je",res.data.userInfo.je);
						uni.showToast({
							title: '登录成功', //显示的文字
							icon: 'success' ,//显示的图标
							success:function(){
								setTimeout(function () {
									uni.switchTab({
										url:'/pages/home/home'
									});
								}, 1000);
								
							}
						});
						
					}else {
						
					}
					
				
					console.log(res);
				}
			})
			
		}
}

后端调用逻辑  大致逻辑分为以下几个步骤 

                2023-03-08: 后续还是要关注微信官方提供的最新接口文档来调整参数

(固定值: key:grant_type  value: client_credential 具体看下面代码的getWxAccessToken) 

(个人appId + 个人secret 密匙 在微信公众平台获取 )微信公众平台微信公众平台，给个人、企业和组织提供业务服务与用户管理能力的全新服务平台。https://mp.weixin.qq.com/

步骤: 

1. 准备参数 :  前台请求的code + 个人appId + 个人secret 密匙  + 一个固定值

2. 请求 https://api.weixin.qq.com/cgi-bin/token 接口地址 获取小程序提供的一个access_token

3. 用小程序返回的access_token 拼接一个url 并请求 这个url就是获取当前访问小程序的用户手机号

4.请求 https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=2步骤返回值

5. 获取手机号后再做个人后台登录逻辑处理

       

个人后台登录逻辑示例(参考):

1.系统或小程序用户登录账号都是以手机号为唯一标识 即手机号为账号

2.为小程序写入独立登录方法 为了3步骤中不与其他登录端冲突

3.独立方法在 获取手机号之后 用户表中查询一下用户是否存在 如果不存在 则自动注册用户 并设置初始密码 123456  并返回token

4.如果已存在用户则赋值初始密码后自动登录 并返回token

                

后台接口调用代码 工具类.

import com.alibaba.fastjson2.JSONObject;
import java.util.HashMap;
import java.util.Map;


public class WxAuthUtils {
    //获取手机号
    private static final String getPhoneNumberInterface = "https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=";

    // 个人appid
    public static final String WX_LOGIN_APPID = "wxcd115789468a32aa4";
    // 个人secret 密匙
    public static final String WX_LOGIN_SECRET = "5117d6a34d8c789997177d8b4e82";

    public static UserPhoneInfo getPhoneNumberByAccessToken(String userCode) {
        Map<String,String> params = new HashMap<>();
        params.put("code",userCode);
        String url =getPhoneNumberInterface + getWxAccessToken();
        JSONObject jsonObject = WxAuthHttpSend.httpPost(url, params);
        if (jsonObject!=null && jsonObject.get("phone_info")!=null) {
            JSONObject result = jsonObject.getJSONObject("phone_info");
            UserPhoneInfo phoneInfo =  new UserPhoneInfo();
            phoneInfo.setPhoneNumber(result.getString("phoneNumber"));
            phoneInfo.setCountryCode(result.getString("countryCode"));
            phoneInfo.setPurePhoneNumber(result.getString("purePhoneNumber"));
            return phoneInfo;
        }
        return null;
    }

    public static String getWxAccessToken() {
        Map<String,String> params = new HashMap<>();
        params.put("grant_type","client_credential");
        params.put("appid",WX_LOGIN_APPID);
        params.put("secret",WX_LOGIN_SECRET);
        JSONObject jsonObject = JSONObject.parseObject(WxAuthHttpSend.doGet("https://api.weixin.qq.com/cgi-bin/token", params));
        return jsonObject.getString("access_token");
    }

controller/service层 调用示例 

 UserPhoneInfo getLoginByUser = WxAuthUtils.getPhoneNumberByAccessToken(wxLoginBody.getCode());

 entity/domain实体类(小程序返回值封装)

package com.system.common.utils.wx;

public class UserPhoneInfo {
    private String phoneNumber; 
    private String purePhoneNumber;
    private String countryCode;

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }

    public String getPurePhoneNumber() {
        return purePhoneNumber;
    }

    public void setPurePhoneNumber(String purePhoneNumber) {
        this.purePhoneNumber = purePhoneNumber;
    }

    public String getCountryCode() {
        return countryCode;
    }

    public void setCountryCode(String countryCode) {
        this.countryCode = countryCode;
    }
}