Wechat third party login
First of all, the solution: wrong redirect uuri parameter
Set the callback address in the open platform, for example, the address is www.niezhiliang.com. When generating the QR code, the callback can only write the address under the domain name
You must add http or https to the callback address (your redirect URI) of the application QR code page, and you must also perform transcoding
Usually we are http://www.niezhiliang/callback You have to go to http%3a%2f%2fwww.niezhiliang.com%2fcallback
Also, the callback address and port number cannot be as follows: http://www.niezhiliang.com:8080/callback That's not going to work
Your redirect URI will be reported as incorrect
Step one:
Application QR code page code:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Wechat login page</title>
<style>
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}
</style>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
<div id="obj" style="text-align: center">
</div>
</body>
<script>
var obj = new WxLogin({
self_redirect:false,//true put page Jump in ifream false jump directly to the page to jump
id:"obj",
appid: "wx0c05ce174cd624b7",
scope: "snsapi_login",
redirect_uri: "http%3a%2f%2fwww.niezhiliang.com%2fcallback",
state: "",
style: "",
href: ""
});
</script>
</html>
The second step:
After the mobile phone scans the QR code, it will access the callback address we set before. You can get the code of the requested token, and then you can request it through the token
The basic information of the user is as follows:
{
"openid": "oRFVX0i662JO-p1o_jnqPEU88ahc",
"nickname": "Su Yuyu",
"sex": 1,
"language": "zh_CN",
"city": "Yichun",
"province": "Jiangxi",
"country": "CN",
"headimgurl": "http:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTKlDY7yfJB1ZehJECjLQ8d89rVkX3sZFGB7ry1Q720yU5qAc2rFJfcG6gMibXwN6QnZTRIQyiaeMm8Q\/132",
"privilege": [],
"unionid": "of_IS5sWN3Ah0JdJ7O1LvDFT_4l0"
}
Callback method:
@RequestMapping(value = "/callback")
public String callBack(Model model) {
String code = request.getParameter("code");
if (code != null) {
StringBuffer url = new StringBuffer();
/*********Get token************/
url.append(request_url)
.append("appid=")
.append(appid)
.append("&secret=")
.append(secret)
.append("&code=")
.append(code)
.append("&grant_type=")
.append(grant_type);
JSONObject jsonObject =
JSON.parseObject(HttpUtil.getResult(url.toString()));
String openid =jsonObject.get("openid").toString();
String token = jsonObject.get("access_token").toString();
/*********Get userinfo************/
url = new StringBuffer();
url.append(userinfo_url)
.append("access_token=")
.append(token)
.append("&openid=")
.append(openid);
String result = HttpUtil.getResult(url.toString());
model.addAttribute("wxinfo",result);
model.addAttribute("username",map.get("username"));
model.addAttribute("password",map.get("password"));
//Jump to the page to jump after getting the user information
return "index";
}
return "index";
}
I'm just a demo, so it's very simple. Let's do it according to our business needs