基本信息实现微信登录"/>
【微信开发】微信公众号网页授权获取用户基本信息实现微信登录
微信公众号网页授权获取用户基本信息实现微信登录
- 一、准备工作
- 1.1 开发环境和工具
- 1.2 登录微信公众平台接口测试账号
- 1.3 创建项目
- 二、添加需要的依赖并启动项目
- 2.1 修改 pom.xml
- 2.2 修改 web.xml
- 2.3 创建servlet和基本的工具类
- 三、代码效果
- 四、GitHub仓库地址
一、准备工作
建议在已经学会基础的Servlet和Maven、IDEA的使用方法的情况下阅读此博客。如果不会的话参考下面的操作步骤也是可以实现相关功能的。
1.1 开发环境和工具
- Java 1.8
- IDEA 2020.3
- Maven 3.6.3
- uTools（或者其他内网穿透工具）
1.2 登录微信公众平台接口测试账号
微信公众平台接口测试账号地址：=sandbox/login
用微信登录即可，然后记下自己的appid和appsecret
然后在下面找一下这个修改按钮
然后填写一个回调页面的域名，注意这里是要写域名，不要加http://www.或者https://www.，直接从域名开始写，这里安利一个非常非常好用的软件uTools，这个软件里有一个内网穿透的功能，可以直接在自己电脑上本地测试微信公众号的接口，不用再找一个服务器部署了，十分方便。
1.3 创建项目
使用maven创建一个java web项目
- 选择左侧maven选项
- 勾选Create from archetype
- 选择maven-archetype-webapp
- 下一步 next
起一个项目名，选择项目的存放位置，下面三个选项保持默认即可
此处保持默认即可，点击finish项目创建完成
项目创建完成后补全项目结构，按下图步骤在main文件夹下创建java和resources两个文件夹。
需要注意的是New Directory的时候不需要手动打这两个单词，直接在下面选，两个都创建上。
二、添加需要的依赖并启动项目
2.1 修改 pom.xml
在pom.xml的properties修改mavenpiler.source和mavenpiler.target的值为1.8
<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><mavenpiler.source>1.8</mavenpiler.source><mavenpiler.target>1.8</mavenpiler.target>
</properties>
在pom.xml的dependencies中添加servlet、httpclient、jackson三个依赖
<dependencies><!--servlet--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version><scope>provided</scope></dependency><!-- httpclient --><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.12</version></dependency><!-- jackson --><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.11.1</version></dependency>
</dependencies>
修改完pom.xml后，点击右上角的按钮更新项目
2.2 修改 web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns=""xmlns:xsi=""xsi:schemaLocation="://xmlns.jcp/xml/ns/javaee/web-app_4_0.xsd"version="4.0">
</web-app>
2.3 创建servlet和基本的工具类
创建完成之后项目结构如下
这里只贴出关键部分的代码，其余部分可从我的GitHub仓库中下载
WechatServlet.java
package servlet;import com.fasterxml.jackson.databind.JsonNode;
import util.HttpClientUtil;
import util.JsonUtil;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;/*** 微信登录控制器** @author hui* @date 2021-01-15 18:26:42*/
@WebServlet("/wechat")
public class WechatServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//自己公众号的appid和appsecretString appid = "换成自己的appid";String appsecret = "换成自己的appsecret";//获取微信返回的codeString code = request.getParameter("code");//通过code换取网页授权access_tokenString tokenApi = "=" + appid +"&secret=" + appsecret +"&code=" + code +"&grant_type=authorization_code";JsonNode tokenNode = JsonUtil.parse2json(HttpClientUtil.doGet(tokenApi));//获取openidString openid = tokenNode.get("openid").asText();//获取access_tokenString accessToken = tokenNode.get("access_token").asText();//拉取用户信息String userinfoApi = "" +"?access_token=" + accessToken +"&openid=" + openid +"&lang=zh_CN";JsonNode userinfoNode = JsonUtil.parse2json(HttpClientUtil.doGet(userinfoApi));//页面跳转request.setAttribute("nickname", userinfoNode.get("nickname").asText());request.setAttribute("avatar", userinfoNode.get("headimgurl").asText());request.setAttribute("province", userinfoNode.get("province").asText());request.setAttribute("city", userinfoNode.get("city").asText());request.setAttribute("openid", openid);request.getRequestDispatcher("index.jsp").forward(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
}wx.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>微信登录</title><style>#wx {height: 100%;width: 100%;}#wx #login {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background-color: #2ecc71;color: #ffffff;padding: 10px 15px;border: 0;border-radius: 5px;}</style>
</head>
<body><div id="wx"><button id="login" onclick="wechatLogin()">微信登录</button></div>
</body>
<script>function wechatLogin() {// 公众号appidvar appid = "换成自己的appid";// 授权接口地址var redirect_uri = "换成自己的授权回调地址";// 状态标识var state = "wx";// 以snsapi_userinfo为scope发起的网页授权var scope = "snsapi_userinfo";// 返回类型，请填写codevar response_type = "code";// 微信登录URLvar loginUrl = "" +"?appid=" + appid +"&redirect_uri=" + redirect_uri +"&response_type=" + response_type +"&scope=" + scope +"&state=" + state +"#wechat_redirect";window.location.href = loginUrl;}
</script>
</html>
回调成功后的返回值如下：
用access_token和openid拉取用户的基本信息返回值如下：
三、代码效果
在微信里访问登录按钮所在页面的地址，我这里是/wx_demo/wx.html，在手机上的实际运行效果如下
四、GitHub仓库地址
最后致谢我温柔可爱、秀外慧中的姐姐在学习过程中给予我的鼓励和帮助
更多推荐
【微信开发】微信公众号网页授权获取用户基本信息实现微信登录
发布评论