java实现第三方微信登录
程序员文章站
2023-12-23 09:41:10
...
使用微信进行第三方登录总共分为三步；
准备：在微信开发平台，创建网站应用
appId值，appsecret值和回调域名
1.获取code
-
1). 首先展示二维码，让用户进行扫描授权
两种方式（选一）：-
直接使用a标签进行链接二维码（方便）
- 我们要填写的信息有:
- appId(微信开发平台创建应用后提供)
- redirect_uri(回调域名,必须是开发平台的创建应用的回调域名之下)
- state(唯一凭证，随便填)
- 我们要填写的信息有:
-
直接使用a标签进行链接二维码（方便）
//请求路径，需更改
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=应用ID&redirect_uri=回调地址&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect"
>微信登录</a>
- 1
- 2
- 3
-
跳转自定义页面进行二维码展示
定义一个a标签跳转到自定义的页面，在页面导入js文件- 我们要填写的信息有:
- id(二维码展示的容器)
- appId(微信开发平台创建应用后提供)
- redirect_uri(回调域名,必须是开发平台的创建应用的回调域名之下)
- state(唯一凭证，随便填)
- style(二维码样式，已填)
- href(样式，不填)
- 我们要填写的信息有:
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
- 1
<body>
<div id="login_container"></div>
<script type="text/javascript">
var obj = new WxLogin({
self_redirect:true,
id:"login_container",
appid: "应用ID",
scope: "snsapi_login",
redirect_uri: "回调地址",
state: "STATE",
style: "white",
href: ""
});
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.在回调中根据code获取token和openid并获取微信用户信息
- 1). 准备java发送http请求的工具类
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.5.7</version>
</dependency>
//阿里的json转换工具
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.4</version>
</dependency>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
public static String get(String uri){
CloseableHttpClient httpClient = HttpClients.createDefault();
HttpGet get = new HttpGet(uri);
CloseableHttpResponse response = null;
try {
response = httpClient.execute(get);
int statusCode = response.getStatusLine().getStatusCode();
if(statusCode==200){
HttpEntity entity = response.getEntity();
String result = EntityUtils.toString(entity,"UTF-8");
return result;
}else {
return null;
}
}catch (Exception e){
e.printStackTrace();
}
return null;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 2). 准备url请求
//获取token和openid请求路径，需更改其APPID和**，其他的代码中动态修改
public String GETTOKEN = "" +
"https://api.weixin.qq.com/sns/oauth2/access_token?appid=应用ID&secret=应用**&code=CODE&grant_type=authorization_code";
//用户信息请求路径，代码中动态修改
public String USERINFO = “” +
“https://api.weixin.qq.com/sns/userinfo?access_token=TOKEN&openid=OPENID”
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 3). 最终集成的回调后台代码：
@RequestMapping("/callBack")
public ModelAndView callBack(String code, String state){
//回调获得code，通过用户授权的code去获取微信令牌
String token = HttpClientUtil.get(GETTOKEN.replaceAll("CODE", code));
Map map = JSON.parseObject(token);
//获取到了关键的令牌和openid后，
//就可以正式开始查询微信用户的信息，完成我们要做的微信绑定
String access_token = (String) map.get("access_token");
String openid = (String) map.get("openid");
String userInfo = HttpClientUtil.get(USERINFO.replaceAll("TOKEN", access_token).replaceAll("OPENID", openid));
Map info = JSON.parseObject(userInfo);
//返回一个登录成功后的页面，携带微信用户信息
return new ModelAndView("personal","userInfo",info);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 4). 登录成功后的页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
微信名称：${userInfo.nickname}
微信头像：<img src="${userInfo.headimgurl}"/>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
最后在页面看到微信登录成功后的信息
这样我们就得到了微信登录用户的个人信息，完成微信第三方登录！
项目Demo地址：https://github.com/wl1006/WeChat-Login-Demo
</div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
<div class="more-toolbox">
<div class="left-toolbox">
<ul class="toolbox-list">
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#csdnc-thumbsup"></use>
</svg><span class="name">点赞</span>
<span class="count">3</span>
</a></li>
<li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-Collection-G"></use>
</svg><span class="name">收藏</span></a></li>
<li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{"mod":"1582594662_002"}"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-fenxiang"></use>
</svg>分享</a></li>
<!--打赏开始-->
<!--打赏结束-->
<li class="tool-item tool-more">
<a>
<svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
</a>
<ul class="more-box">
<li class="item"><a class="article-report">文章举报</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/qq_44575680">
<img src="https://profile.csdnimg.cn/C/4/E/3_qq_44575680" class="avatar_pic" username="qq_44575680">
<img src="https://g.csdnimg.cn/static/user-reg-year/2x/1.png" class="user-years">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_44575680" data-report-click="{"mod":"popu_379"}" target="_blank">Dragon_King_admin</a></span>
</div>
<div class="text"><span>发布了29 篇原创文章</span> · <span>获赞 25</span> · <span>访问量 1万+</span></div>
</div>
<div class="right-message">
<a href="https://im.csdn.net/im/main.html?userName=qq_44575680" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
</a>
<a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a>
</div>
</div>
</div>