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;
}
}
WxAuthHttpSend (Http请求工具类)
package com.system.common.utils.wx;
import com.alibaba.fastjson2.JSONObject;
import okhttp3.MediaType;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.utils.URIBuilder;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import java.io.IOException;
import java.net.URI;
import java.util.Iterator;
import java.util.Map;
public class WxAuthHttpSend {
public static JSONObject httpPost(String url, Map<String,String> data) {
try {
OkHttpClient client = new OkHttpClient();
JSONObject paramsByMap = getParamsByMap(data);
RequestBody body = RequestBody.create(MediaType.parse("application/json"), paramsByMap.toJSONString()); //将请求参数对象传入
Request request = new Request.Builder()
.post(body) //请求方式 .post ; .get; .put; ...
.url(url) // 请求地址
.addHeader("Content-Type", "application/json")
.addHeader("Transfer-Encoding", "chunked")
.addHeader("Accept", "*/*")
.addHeader("Cache-Control", "no-cache")
.addHeader("Host", "sjzx.hebfda.gov.cn")
.addHeader("Accept-Encoding", "gzip, deflate")
.addHeader("Content-Length", "123")
.addHeader("Connection", "keep-alive")
.addHeader("cache-control", "no-cache")
.build();
JSONObject jsonObject = JSONObject.parseObject //开始请求
(client.newCall(request)
.execute()
.body()
.string());
if (jsonObject!=null) {
return jsonObject;
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public static JSONObject httpPost(String url) {
try {
OkHttpClient client = new OkHttpClient();
RequestBody body = RequestBody.create(MediaType.parse("application/json"),""); //将请求参数对象传入
Request request = new Request.Builder()
.post(body) //请求方式 .post ; .get; .put; ...
.url(url) // 请求地址
.addHeader("Content-Type", "application/json")
.addHeader("Transfer-Encoding", "chunked")
.addHeader("Accept", "*/*")
.addHeader("Cache-Control", "no-cache")
.addHeader("Host", "sjzx.hebfda.gov.cn")
.addHeader("Accept-Encoding", "gzip, deflate")
.addHeader("Content-Length", "123")
.addHeader("Connection", "keep-alive")
.addHeader("cache-control", "no-cache")
.build();
JSONObject jsonObject = JSONObject.parseObject //开始请求
(client.newCall(request)
.execute()
.body()
.string());
if (jsonObject!=null && jsonObject.get("phone_info")!=null) {
return jsonObject;
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public static String doGet(String url, Map<String, String> param) {
// 创建Httpclient对象
CloseableHttpClient httpclient = HttpClients.createDefault();
String resultString = "";
CloseableHttpResponse response = null;
try {
// 创建uri
URIBuilder builder = new URIBuilder(url);
if (param != null) {
for (String key : param.keySet()) {
builder.addParameter(key, param.get(key));
}
}
URI uri = builder.build();
// 创建http GET请求
HttpGet httpGet = new HttpGet(uri);
// 执行请求
response = httpclient.execute(httpGet);
// 判断返回状态是否为200
if (response.getStatusLine().getStatusCode() == 200) {
resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (response != null) {
response.close();
}
httpclient.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return resultString;
}
private static JSONObject getParamsByMap(Map<String,String> params) {
JSONObject result = new JSONObject();
params.forEach(result::put);
return result;
}
}