文章目录

前言
一、NATAPP内网穿透
二、微信公众平台设置
- 1.服务器配置
- 2.网页授权
三、springboot后台代码
四、测试
五、关于前台
- 1.前台配置网页授权
- 2.页面校验登录，解决登录后没机会localStorage.setItem

前言

准备好微信公众平台提供的的APPID、APPSECRET。编译器idea、webstorm。

一、NATAPP内网穿透

微信的后台服务器配置的时候需要使用备案的安全域名，需要使用到内网穿透。
NATAPP：https://natapp.cn/
首先注册登录身份认证后购买免费通道，将通道springboot的端口和ip配置通道，记住通道的authtoken。

在下载位置右键另存为的方式下载NATAPP，下载解压后在同目录下创建一个config.ini文件配置一下通道。
config.ini内容如下：

#将本文件放置于natapp同级目录 程序将读取 [default] 段
#在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
#命令行参数 -config= 可以指定任意config.ini文件
[default]
authtoken= 刚才购买的通道的authtoken             #对应一条隧道的authtoken
clienttoken=                    #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
log=none                        #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=DEBUG                  #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy=                     #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空

配置好后点开exe并启动Springboot就好了。

NATAPP官方使用教程：https://natapp.cn/article/natapp_newbie

二、微信公众平台设置

1.服务器配置

开发——基本配置——服务器配置

这里的URL是微信要去调用这个接口去验证是否能下方设置的Token相对应。

接口代码如下：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;/*** Created by Administrator on 2020/12/28.* @author Luffykaiyuan* @class WX_Util 类；*/
@Controller
@RequestMapping("/wxt")
public class WeixinInterfaceController extends HttpServlet {/*** 配置微信公众号基本url，使其获取到token* */@ResponseBody@RequestMapping("/xc")public void weixininter(HttpServletRequest request, HttpServletResponse response) throws Exception {//微信获取解析信息String str = WX_Util.check_Url(request);PrintWriter out = response.getWriter();//输出out.print(str);//刷新out.flush();//关闭流out.close();}
}

工具类代码如下：

import javax.servlet.http.HttpServletRequest;
import java.security.MessageDigest;
import java.util.Arrays;/*** Created by Administrator on 2020/12/28.* @author Luffykaiyuan* @class WX_Util 类；*/
public class WX_Util {//验证服务器地址public static String check_Url(HttpServletRequest request){//获取参数配置String signature = request.getParameter("signature");//获取时间托String timestamp = request.getParameter("timestamp");String nonce = request.getParameter("nonce");//获取echostr 字符String echostr   = request.getParameter("echostr");//获取token 此token跟需跟微信公众号的token一致；String token = "csnd";String str = "";// try ---- catch 捕捉异常try {//判断是否为空if (null != signature) {//声明一个存储数据字符数组String[] ArrTmp = { token, timestamp, nonce };Arrays.sort(ArrTmp);StringBuffer sb = new StringBuffer();for (int i = 0; i < ArrTmp.length; i++) {sb.append(ArrTmp[i]);}//获取消息对象MessageDigest md = MessageDigest.getInstance("SHA-1");//声明一个字节流数组；byte[] bytes = md.digest(new String(sb).getBytes());//声明一个字符流StringBuffer buf = new StringBuffer();for (int i = 0; i < bytes.length; i++) {if (((int) bytes[i] & 0xff) < 0x10) {buf.append("0");}buf.append(Long.toString((int) bytes[i] & 0xff, 16));}if (signature.equals(buf.toString())) {str = echostr;}}} catch (Exception e) {e.printStackTrace();}//返回消息return str;}
}

2.网页授权

接口权限的网页服务中心进入。

下载此文件放在springboot的static中，确保kthip6.natappfree.cc/XXX.txt能访问到此文件。404的话检查一下target是否有这个文件。

三、springboot后台代码

首先根据APPID和APPSECRET获取code
接口代码如下：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.websocket.server.PathParam;
import java.io.IOException;
import java.net.URLEncoder;@CrossOrigin
@RestController
@RequestMapping("/wxLogin")
public class WxLoginCon {@RequestMapping("/doLogin")public void doLogin(HttpServletRequest request, HttpServletResponse response, HttpSession session) throws IOException {//回调接口String backUrl = "http://kthip6.natappfree.cc/wxBack/callBack";String url = "https://open.weixin.qq.com/connect/oauth2/authorize?" +"appid=" + 你的APPID +"&redirect_uri=" + backUrl +"&response_type=code" +"&scope=snsapi_userinfo" +"&state=STATE#wechat_redirect";response.sendRedirect(url);}
}

回调接口代码如下：

import net.sf.json.JSONObject;
import org.apache.catalina.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.thymeleaf.util.StringUtils;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;@CrossOrigin
@RestController
@RequestMapping("/wxBack")
public class CallBackCon {@RequestMapping("/callBack")public void callBack(HttpServletRequest request, HttpServletResponse response, HttpSession session) throws IOException {String code = request.getParameter("code");String url = "https://api.weixin.qq.com/sns/oauth2/access_token?" +"appid=" + 你的APPID +"&secret=" + 你的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 wxInfo = AuthUtil.doGetJson(infoUrl);System.out.println(wxInfo);//你的业务逻辑处理//页面跳转}
}

四、测试

在微信直接访问http://kthip6.natappfree.cc/wxLogin/doLogin，这时候后台的控制台会打印用户信息。

{"openid":"oZ012344252423188TRKcVPHgLBFo","nickname":"csnd","sex":1,"language":"zh_CN","city":"成都","province":"四川","country":"中国","headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/uwb6xyNtOqLBGXYYomw25O4vSjnE1XbVy4RVmiapXIBouPG5klMEGoxfuvnsLmxfSEUescIAgyBmuOsYTPvuytQ/132","privilege":[]}

如果没有正常打印可以通过微信开发者工具访问接口，可以看看console、network有什么报错。

五、关于前台

1.前台配置网页授权

内网穿透前台端口，操作步骤借鉴上文。将微信下载的txt文件放在vue根目录的static中，这时候由于无法直接通过域名访问到txt，中间会有一个static的路径，导致页面无法授权。解决方法，利用代码将txt复制到根目录下使得可以访问。

安装copy-webpack-plugin

npm install --save-dev copy-webpack-plugin

webpack.dev.config.js的plufs中添加

new CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetsSubDirectory,ignore: ['.*']},{from: path.resolve(__dirname, '../static/你的文件名.txt'), // static文件下的xx.txtto: '你的文件名.txt',toType: 'file'}])

这时候就可以配置成功了

2.页面校验登录，解决登录后没机会localStorage.setItem

vue的路由中的route.beforeEach方法校验localStorage.getItem(“id”)是否有值没有通过

window.location.href =  "http://kthip6.natappfree.cc/wxLogin/doLogin";

访问后台微信登录接口，后台处理完请求后页面跳转到中间跳转页。在中间跳转页setItem之后跳转到正式页面。

SpringBoot+Vue本地实现微信公总号web端的微信登录获取用户信息，前后端分离相关推荐

node.js egg框架接入微信公总号
接入流程首先申请一个微信公总号,点击左侧菜单的开发>>基本配置下点击启用服务器配置这里url为你自己的后台服务地址,注意是get请求,token可以随便填作为验签使用,提交后后台接口 ...
教你快速推广微信公总号
随着互联网科技的飞速发展,自媒体平台正在发挥着越来越大的影响力,企业进行互联网的品牌建设,一定会通过网络媒体,推广自己在网络中的知名度以及品牌内容,从而形成公众认识的企业品牌形象.同事个人自媒体也在发 ...
java获取微信公总号推送的所有信息的url,用于爬取微信推送的文章内容
场景描述: 在用户提出需要爬取微信公总号推送消息的时候,感觉是懵逼的,之前从来没爬取过,无从下手,没办法顾客是上帝,既然用户提出了需求,我们只能想法去解决问题. 然后根据用户提供微信公总号安泰科现 ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...
java对接微信小程序（登录获取用户信息）
需求说明: 用户通过小程序登录,进入到平台系统,进行各功能操作: 解决方案: 首先通过对接小程序,用户通过小程序登录及授权获取用户信息,后端调用接口获取微信用户信息,进行保存到数据库,然后返回toke ...
微信小程序授权登录获取用户信息详解
今天来说一下微信小程序的授权登录获取用户信息,首先我们看微信提供的小程序开发文档: https://blog.csdn.net/qq_41971087/article/details/82466647 ...
java实现微信公众号授权登录获取用户信息(一)
参考文章:https://blog.csdn.net/Santiago_M/article/details/79109154 : https://www.cnblogs.com/jilu/p/6123 ...
基于Spring Boo微信公众号授权登录获取用户信息（附带完整源码）
简介微信公众号开发中,必不少可少的一环:公众号授权登录.获取微信用户信息. 本地完整运行环境准备内网渗透=>生成本地指定端口映射的外网域名传送门:内网渗透工具Natapp使用详解域名生成 ...
根据微信公众号关注/取消关注事件，获取用户信息
第一步:微信公众平台->基本配置->服务器配置->配置接收地址第二步:接收微信服务器推送过来的事件微信文档地址: 关注/取消关注事件用户在关注与取消关注公众号时,微信会把这个事 ...
公众号h5获取手机号权限_微信公众号开发之网页授权（获取用户信息）
这次暑假留在学校参与工作室的项目,对微信公众号比较感兴趣,所以参与这方面的学习研究. 昨天完成了关于网页授权,获取用户信息方面的功能,所以乘热打铁,写上一篇.实现本篇涉及的功能,还需要完成一些基础. ...

SpringBoot+Vue本地实现微信公总号web端的微信登录获取用户信息，前后端分离