Idea使用Maven和Tomcat实现微信授权

登录方式

  1. 微信开放平台登录
  2. 微信公众号登录

账号体系

  1. 没有自己的账号体系,直接拉取用户信息来授权登录
  2. 有自己的账号体系,授权成功后需要绑定自己的账号

微信网页授权官方开发文档

微信网页授权

网页授权流程

  1. 引导用户进入授权页面同意授权，获取code
  2. 通过code换取网页授权access_token（与基础支持中的access_token不同）
  3. 如果需要，开发者可以刷新网页授权access_token，避免过期
  4. 通过网页授权access_token和openid获取用户基本信息（支持UnionID机制)

这里以微信公众号授权流程为例

微信公众号授权流程

微信公众号测试号申请

针对普通开发者，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。

申请网址： 微信公众号测试号申请

Java和Maven环境

前提：

系统已经配置好Java和Maven环境（Windows环境下具体怎么配置可以参考百度上的教程，这个有很多）。这里我用的Java版本是1.8，Maven版本是3.6.1

测试：

通过运行（Windows+R），输入cmd打开Dos命令环境。输入javac打印出一系列用法提示和输入mvn -v打印出Maven版本代表环境配置成功。

配置文件修改：

因为在国内使用Maven默认的远程仓库地址下载的比较慢，所以一般都会换成国内的淘宝镜像。
找到maven安装路径下的conf文件夹里的settings.xml文件
打开，修改镜像地址为

  <mirrors>
    <mirror>
      <id>alimaven</id>
      <name>aliyun maven</name>
      <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
      <mirrorOf>central</mirrorOf>        
    </mirror>
  </mirrors>

同时一并替换了本地仓库地址,因为默认仓库地址在C盘,时间久了包会越来越多,占用C盘空间

 <localRepository>你的非C盘地址</localRepository>

使用Idea创建Maven工程

在Idea中新建工程，选择Maven工程，创建web-app的archetype


Maven工程创建

选择好了后，下一步。根据下图中提示配置项目信息。

项目信息填写

下一步

Maven配置

点击Finish。首次创建Maven会从远程仓库开始下jar包，需要等待一会儿。
maven自动执行完成后,你的项目根目录中就会有pom.xml这个文件,可以把这个文件理解为前端项目中的package.json文件,主要用于映射远程仓库的包,配置完后,运行maven命令会自动帮你下包(此处注意Idea右下角提示，选择自动运行导包),配置如下(主要是引入Junit测试和http访问,以及一些maven插件)

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.hzmeurasia</groupId>
  <artifactId>WxAuth</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>WxAuth Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>org.apache.httpcomponents</groupId>
      <artifactId>httpclient</artifactId>
      <version>4.5.5</version>
    </dependency>

    <dependency>
      <groupId>com.hynnet</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>WxAuth</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

配置Tomcat服务器

下载：

进入官网，选择Tomcat 8.5.50版本进行下载。https://tomcat.apache.org/download-80.cgi

Tomcat 8.5.50下载

注：最好下载Tomcat7或8的版本，版本太新出错不好调试

Tomcat的手动启动和关闭

下载完成后，直接解压。找到bin目录下的startup.bat和shutdown.bat，分别用于手动打开和关闭Tomcat服务。
双击startup.bat，打开浏览器地址栏输入：http://localhost:8080/，能显示出Tomcat默认网页就表示成功

Tomcat环境变量配置

安装完成后，右击我的电脑，点击属性，选择高级系统设置，点击环境变量

配置环境变量

在系统变量中添加
变量名：CATALINA_BASE
变量值：D:\Tomcat\apache-tomcat-8.5.50 （Tomcat安装目录）
变量名：CATALINA_HOME
变量值：同Tomcat安装目录

系统变量

修改ClassPath和Path变量
ClassPath变量值加入：%CATALINA_HOME%\lib\servlet-api.jar;
Path变量加入：%CATALINA_HOME%\bin;和%CATALINA_HOME%\lib

ClassPath

Path

点击确定，Tomcat就配置好了。

验证：

点击"开始"->"运行"，键入"cmd"（或快捷键win+R）；键入命令:startup，出现以下信息，说明环境变量配置成功

Tomcat启动

关闭窗口，即可关闭Tomcat服务

Idea配置Tomcat

打开刚才创建的Maven项目，点击Run---Edit Configurations...


Idea配置Tomcat

点击左侧“+”号，找到Tomcat Server---Local（若是没有找到Tomcat Server 可以点击最后一行 34 items more）

Idea配置Tomcat

Idea配置Tomcat

在Tomcat Server -> Unnamed -> Server -> Application server项目下，点击 Configuration ，找到本地 Tomcat 服务器，再点击 OK按钮。


Idea配置Tomcat

这里尤其要注意一下端口号，建议先填80端口。如果要修改端口号，之后在微信的回调域名的必须要加上端口号，因为微信授权默认回调域名端口号为80端口

引入servlet的api

点击项目右上角打开工程结构的按钮


Project Structure

选择Library，如图所示添加

引入servlet-api

选择Tomcat安装路径下的lib中的servlet-api.jar
servlet-api

之后一路点Ok，完成。

配置内网穿透

内网穿透，即NAT穿透，网络连接时术语，计算机是局域网内时，外网与内网的计算机节点需要连接通信，有时就会出现不支持内网穿透。就是说映射端口，能让外网的电脑找到处于内网的电脑

本文中采用的是NATAPP提供的内网穿透服务，作为案例。
NATAPP官网： https://natapp.cn/
NATAPP1分钟快速新手图文教程：https://natapp.cn/article/natapp_newbie
参考以上教程，从官网下载客户端，得到natapp.exe运行程序
windows ,点击开始->运行->命令行提示符 后进入 natapp.exe的目录
运行 natapp -authtoken=你的密钥
运行成功,都可以得到如下界面:

启动内网穿透服务

做完了这些配置信息后，就可以开始正式写代码了。

配置工具类

在src/main/java/com/wx/auth/util下新建AuthUtil.java文件，写网络请求访问工具方法，例：

package com.wx.auth.util;

import net.sf.json.JSONObject;
import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.config.RequestConfig;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.impl.client.HttpClientBuilder;
import org.apache.http.ssl.SSLContextBuilder;
import org.apache.http.util.EntityUtils;

import javax.net.ssl.SSLContext;
import java.io.IOException;

/**
 * @author HZM
 * @className AuthUtil
 * @description 微信授权网络请求工具类
 * @date 2019/12/29 20:56
 **/
public class AuthUtil {
    public static final String APPID = "wxbdcb94341d5c7aa4";
    public static final String APPSECRET = "1a4b4530dcbe3a0b0a65e58636bd93c6";
    public static JSONObject doGetJson(String url) throws IOException {
        JSONObject jsonObject = null;
        HttpGet httpGet = new HttpGet(url);
        HttpResponse response = httpClient.execute(httpGet);
        HttpEntity entity = response.getEntity();
        if (entity != null) {
            String result = EntityUtils.toString(entity, "UTF-8");
            jsonObject = JSONObject.fromObject(result);

        }
        // 释放链接
        httpGet.releaseConnection();
        return jsonObject;
    }

    /**
     * 忽略https证书
     */
    private static CloseableHttpClient httpClient;
    //jdk1.8用此代码
    static {
        try {
            SSLContext sslContext = SSLContextBuilder.create().useProtocol(SSLConnectionSocketFactory.SSL).loadTrustMaterial((x, y) -> true).build();
            RequestConfig config = RequestConfig.custom().setConnectTimeout(5000).setSocketTimeout(5000).build();
            httpClient = HttpClientBuilder.create().setDefaultRequestConfig(config).setSSLContext(sslContext).setSSLHostnameVerifier((x, y) -> true).build();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

APPID和APPSECRET在微信公众号测试号网页获取


APPID和APPSECRET

微信校验第一步：用户同意授权，获取code

微信网页授权开发文档
首先公众号需具备网页H5授权权限，我们在文章开头申请的微信公众号测试号已具备H5授权权限。
之后，要引导用户跳转到微信指定的网页并配置回调地址。
在src/main/java/com/wx/auth/servlet下新建LoginServelet.java文件，例：

package com.wx.auth.servlet;


import com.wx.auth.util.AuthUtil;

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 java.io.IOException;
import java.net.URLEncoder;

/**
 * @author HZM
 * @className LoginServlet
 * @description 登录验证
 * @date 2019/12/29 21:05
 **/
@WebServlet("/wxLogin")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 回调地址
        String  backUrl = "http://8dfh4m.natappfree.cc/WxAuth/wxCallBack";
        String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
                "appid=" + AuthUtil.APPID +
                "&redirect_uri=" + URLEncoder.encode(backUrl) +
                "&response_type=code" +
                "&scope=snsapi_userinfo" +
                "&state=STATE#wechat_redirect";
        resp.sendRedirect(url);
    }
}

此处注意参数顺序，因为微信的地址是对传参顺序正则强校验。
回调地址的域名是我们之前开启NATAPP服务得到的公网地址

微信校验第二步：通过code换取网页授权access_token

在src/main/java/com/wx/auth/servlet下新建CallBackServelet.java文件，例：

package com.wx.auth.servlet;

import com.wx.auth.util.AuthUtil;
import net.sf.json.JSONObject;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;

/**
 * @author HZM
 * @className CallBackServlet
 * @description 授权回调
 * @date 2019/12/29 22:08
 **/
public class CallBackServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 取到返回的code
        String code = req.getParameter("code");
        String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
                "appid=" + AuthUtil.APPID +
                "&secret=" + AuthUtil.APPSECRET +
                "&code=" + code +
                "&grant_type=authorization_code";
        JSONObject jsonObject = AuthUtil.doGetJson(url);
        String openid = jsonObject.getString("openid");
        String token = jsonObject.getString("access_token");
}

微信校验第三步：刷新access_token（如果需要）

这里我们不需要刷新token，如果需要大家可看官网文档。

微信校验第四步：拉取用户信息(需scope为 snsapi_userinfo)

对第二步的CallBackServelet.java代码进行扩充，用获取到的token换取用户信息，例：

package com.wx.auth.servlet;

import com.wx.auth.util.AuthUtil;
import net.sf.json.JSONObject;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;

/**
 * @author HZM
 * @className CallBackServlet
 * @description 授权回调
 * @date 2019/12/29 22:08
 **/
public class CallBackServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 取到返回的code
        String code = req.getParameter("code");
        String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" +
                "appid=" + AuthUtil.APPID +
                "&secret=" + AuthUtil.APPSECRET +
                "&code=" + code +
                "&grant_type=authorization_code";
        JSONObject jsonObject = AuthUtil.doGetJson(url);
        String openid = jsonObject.getString("openid");
        String token = jsonObject.getString("access_token");
        String infoUrl = "https://api.weixin.qq.com/sns/userinfo?" +
                "access_token=" + token +
                "&openid=" + openid +
                "&lang=zh_CN";
        JSONObject userInfo = AuthUtil.doGetJson(infoUrl);
        System.out.println(userInfo);

        // 情况1:直接使用微信用户信息直接登录,无需注册和绑定
        req.setAttribute("info", userInfo);
        req.getRequestDispatcher("/loginSuccess.jsp").forward(req, resp);
}

配置入口和成功页面

在src/main/webapp下新建index.jsp（首次进入，网页默认访问index.jsp文件）

<%--
  Created by IntelliJ IDEA.
  User: HZM
  Date: 2019/12/29
  Time: 22:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<head>
    <title>微信授权</title>
</head>
<body style="font-size: 40px;text-align: center">
<a href="/WxAuth/wxLogin">微信公众号授权</a>
</body>
</html>

在src/main/webapp下新建loginSuccess.jsp（这是授权成功后显示获取到的用户个人信息页面）

<%--
  Created by IntelliJ IDEA.
  User: HZM
  Date: 2019/12/29
  Time: 22:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--JSP和Servlet版本导致el功能默认关闭，加入<%@page isELIgnored="false"%>标签手动开启el功能--%>
<%@ page isELIgnored="false"%>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<head>
    <title>登录结果</title>
</head>
<body>
    <div>登录成功</div>
    <div>用户昵称: ${info.nickname}</div>
    <div>用户头像: <img src="${info.headimgurl}" style="vertical-align: top" width="100" height="100"></div>

</body>
</html>

最后需要把NATAPP生成的域名在微信公众号测试号设置为安全域名

修改JS接口安全域名

在体验接口权限表里，找到网页服务项里的网页账号项，点击修改
体验接口权限表

至此，可以启动Tomcat服务了。在Idea工具中可以快捷启动
Tomcat启动

访问localhost/WxAuth/出现如下页面表示本地项目成功启动。
微信公众号授权

访问项目的线上地址http://你申请到的临时域名/WxAuth/，如果出现同样的页面表示内网穿透成功，本地地址已经成功映射到线上。
在微信中点击该链接（如果在非微信浏览器点击，授权时会提示“请在微信访问该网页”）
首次点击会出现是否授权页面。
是否授权

同意之后，获取到用户信息
用户信息

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,732评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,496评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,264评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,807评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,806评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,675评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,029评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,683评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,704评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,413评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,016评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2赞 343

推荐阅读更多精彩内容

  • 关于说话：
    说别人爱听的话，不说别人不爱听的话； 不要在别人背后议论别人，要也只能表扬别人； 尖锐的直接说出来，这是容易的事；...
    石板头阅读 137评论 0赞 0
  • 关于烦恼
    近来多事扰心，不胜烦恼。就在我写文字这档口，楼上又传来了婴儿的啼哭声，平添了一阵乱。 想来人从呱呱...
    有晴也无晴阅读 285评论 0赞 3