微信公众号网页登录，获取用户信息
0、参考
wechat登录前端代码.zip 下载
后端java代码 下载
1、接口信息配置
请填写接口配置信息，此信息需要你有自己的服务器资源，填写的URL需要正确响应微信发送的Token验证
URL=http://自己的域名/rest/WeChat/verify
Token=12345679
2、JS接口安全域名
域名=自己的域名
3、网页授权获取用户基本信息配置
网页服务>网页帐号>网页授权获取用户基本信息
授权回调页面域名=自己的域名
4、前端页面
获取用户信息，需点击确认
$(function () {
let appid = "appid的值";
let redirect_uri = window.location.href;
let scope = "snsapi_userinfo"; //snsapi_userinfo snsapi_base
let code = getQueryString('code');
if (code == null) {
let url_authorize = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid
+ '&redirect_uri=' + redirect_uri + '&response_type=code&scope=' + scope + '&state=123#wechat_redirect';
console.log("url_authorize", url_authorize);
window.location.href = url_authorize;
} else {
$.ajax({
url: "http://自己的域名/rest/WeChat/userInfo", //要请求的后端地址
type: "GET", //数据发送的方式(POST或者GET)
data: { code: getQueryString('code') }, //需要传递的参数
dataType: "json", //后端返回的数据格式
success: function (result) {//ajax请求成功后触发的方法
console.log("userInfo", result); //result为响应内容
},
error: function () {//ajax请求失败后触发的方法
console.log('Send Request Fail..');
}
});
}
});
function getQueryString(name) {
// const url_string = "https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
const url_string = window.location.href;
const url = new URL(url_string);
return url.searchParams.get(name);
}
获取用户openid，静默
$(function () {
let appid = "appid的值";
let redirect_uri = window.location.href;
let scope = "snsapi_base"; //snsapi_userinfo snsapi_base
let code = getQueryString('code');
if (code == null) {
let url_authorize = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid
+ '&redirect_uri=' + redirect_uri + '&response_type=code&scope=' + scope + '&state=123#wechat_redirect';
console.log("url_authorize", url_authorize);
window.location.href = url_authorize;
} else {
$.ajax({
url: "http://自己的域名/rest/WeChat/userBase", //要请求的后端地址
type: "GET", //数据发送的方式(POST或者GET)
data: { code: getQueryString('code') }, //需要传递的参数
dataType: "json", //后端返回的数据格式
success: function (result) {//ajax请求成功后触发的方法
console.log("userBase", result); //result为响应内容
},
error: function () {//ajax请求失败后触发的方法
console.log('Send Request Fail..');
}
});
}
});
function getQueryString(name) {
// const url_string = "https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
const url_string = window.location.href;
const url = new URL(url_string);
return url.searchParams.get(name);
}
5、后端代码
@GetMapping("/userInfo")
public Result userInfo(String code) {
if (StringUtils.isBlank(code))
return Result.error("code为空");
Map<String, Object> cc22 = new LinkedHashMap<>();
//点击链接直接返回过来的code,第二步获取access_token
String format_url_access_token = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code";
String url_access_token = String.format(format_url_access_token, APP_ID, APP_SECRET, code);
String data_access_token = HttpUtil.get(url_access_token);
JSONObject jsonObject_access_token = JSONObject.parseObject(data_access_token);
cc22.put("jsonObject_access_token", jsonObject_access_token);
String accessToken = jsonObject_access_token.getString("access_token");
//用户唯一标识,后续用于微信支付
String openId = jsonObject_access_token.getString("openid");
//第三步可以不用，直接用第四步
String format_url_userinfo = "https://api.weixin.qq.com/sns/userinfo?access_token=%s&openid=%s&lang=zh_CN";
String url_userinfo = String.format(format_url_userinfo, accessToken, openId);
String data_userinfo = HttpUtil.get(url_userinfo);
JSONObject jsonObject_userinfo = JSONObject.parseObject(data_userinfo);
cc22.put("jsonObject_userinfo", jsonObject_userinfo);
//这是返回的就是用户信息,这里就可以将用户信息解析。然后保存到数据库
//还有要考虑的问题,就是每次或者看你要不要更新用户信息,比如用户姓名,头像
//map.put("nickName", jsonObject_userinfo.getString("nickname"));
//map.put("imgUrl", jsonObject_userinfo.getString("headimgurl"));
return Result.OK(cc22);
}
@GetMapping("/userBase")
public Result userBase(String code) {
if (StringUtils.isBlank(code))
return Result.error("code为空");
//点击链接直接返回过来的code,第二步获取access_token
//https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
String format_url_access_token = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code";
String url_access_token = String.format(format_url_access_token, APP_ID, APP_SECRET, code);
String data_access_token = HttpUtil.get(url_access_token);
JSONObject jsonObject_access_token = JSONObject.parseObject(data_access_token);
return Result.OK(jsonObject_access_token);
}
6、验证
http://自己的域名/wechat
http://自己的域名/wechat/index_userBase.html
http://自己的域名/wechat/index_userInfo.html
