一、準備作業

建議在已經學會基礎的Servlet和Maven、IDEA的使用方法的情況下閱讀此博客，如果不會的話參考下面的操作步驟也是可以實作相關功能的，

1.1 開發環境和工具

Java 1.8
IDEA 2020.3
Maven 3.6.3
uTools（或者其他內網穿透工具）

1.2 登錄微信公眾平臺介面測驗賬號

微信公眾平臺介面測驗賬號地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=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修改maven.compiler.source和maven.compiler.target的值為1.8

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.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="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
          http://xmlns.jcp.org/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 {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //自己公眾號的appid和appsecret
        String appid = "換成自己的appid";
        String appsecret = "換成自己的appsecret";
        //獲取微信回傳的code
        String code = request.getParameter("code");
        //通過code換取網頁授權access_token
        String tokenApi = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appid +
                "&secret=" + appsecret +
                "&code=" + code +
                "&grant_type=authorization_code";
        JsonNode tokenNode = JsonUtil.parse2json(HttpClientUtil.doGet(tokenApi));
        //獲取openid
        String openid = tokenNode.get("openid").asText();
        //獲取access_token
        String accessToken = tokenNode.get("access_token").asText();
        //拉取用戶資訊
        String userinfoApi = "https://api.weixin.qq.com/sns/userinfo" +
                "?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);
    }

    @Override
    protected 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() {
        // 公眾號appid
        var appid = "換成自己的appid";
        // 授權介面地址
        var redirect_uri = "換成自己的授權回呼地址";
        // 狀態標識
        var state = "wx";
        // 以snsapi_userinfo為scope發起的網頁授權
        var scope = "snsapi_userinfo";
        // 回傳型別，請填寫code
        var response_type = "code";
        // 微信登錄URL
        var loginUrl = "https://open.weixin.qq.com/connect/oauth2/authorize" +
            "?appid=" + appid +
            "&redirect_uri=" + redirect_uri +
            "&response_type=" + response_type +
            "&scope=" + scope +
            "&state=" + state +
            "#wechat_redirect";
        window.location.href = loginUrl;
    }
</script>
</html>