web程序使用微信验证登录

是这样的一个功能需求从微信公众号点一个链接时，能获取到微信用户的信息，然后核实是不是系统用户，并以此做为登录的凭定

本人博客.lixiang.red

• 经过认证的微信公众号（没有认证过的还没实验，以后实验了会回来更新的）

• 微信开发者工具

• 中台spring boot

• 前端html+vue

• 交互跨域调用接口

• 附录 本文不是eb教程，有关于spring boot的知识，以及跨域的知识在本文中没有放出来。

• 开启开发模式，获取到appid , AppSecret

 开发模式

• 添加微信开发账号，需要被绑定人微信同意

 微信开发者账号      需要绑定人的同意

• 修改接口权限，并按照相关说明中的步骤放置好文件

 接口权限      相关说明      验证文件放在根目录

• 两种授权模式（本示例选用第1个，因为只用openID做用户名校验就可以了）
  1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
  2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

• 微信开发者工具
  下载地址
  请选择自己电脑对应的版本

在ebStome中随便写一个界面（我用的是登录界面为例），代码很简单，就几个input。

 登录界面

现在是一进来就是登录界面，和我们的预期并不符合，我们想要的是进来就获取当前微信号的信息。
所以需要我们在js中发一个请求进入到后台。

 js请求

• 在Controller中添加对应的请求路径

@Controller @CrossOrigin public class WXController extends baseController{     @GetMapping(value = "x/getAessCode")     @ResponseBody     public String getAessCode( HttpServletRequest request, HttpServletResponse response){         baseInfo baseInfo = ne baseInfo("0","Come in Controller");         return JSON.toJSonString(baseInfo);     }   }

     请求路径

在页面刷新登录页面可看到说明我们成功进入到了 Controller

     进入controller

• 在Controller中请求微信（用modelAndVie做）

@GetMapping(value = "x/getAessCode")     @ResponseBody     public ModelAndVie getAessCode(HttpServletRequest request, HttpServletResponse response) {         String callBackUrl = "http://m.yourebsite./x/getAessCodeR";         String url = "https://open.eixin.qq./connect/oauth2/authorize?appid="+appID                 +"&redirect_uri="+ URLEncoder.encode(callBackUrl)                 +"&response_type=code&scope=snsapi_base&state=STATE#echat_redirect";         return ne ModelAndVie("redirect:" + url);     }

记得要改下host , 因为我们现在的项目用的不是自己在公众号里面配的域名，而是用的localhost 。 这时候需要我们改一下host

 改host

因为我这里是页面和中端分离，没有配springMVC的页面解析，所以还需要一个nginx服务器，把我的页面丢进去，如果是用的SpringMVC，改完host就可以请求了。

• nginx配置
  下载indos版的nginx ，然后修改conf目录下的nginx.conf文件

 nginx

运行nginx，并访问m.nongjihongshu.，可以看到登录页面

 运行Nginx      可以看到登录页面

然后执行我们的js , 到Controller，再通过modelAndVie 向微信服务器发请求。
可以看到如下结果
404不重要！！  因为/x/getAessCodeR是写在Controller里面的方法，不是一个页面。重要的是拿到了微信返回的code ， 成功了一半。

 向微信请求

PS 如果是用SpringMVC的同学，这里可以直接写对应的Controller , 如果是和我一样前后端分离的，还需要在Nginx里面进行配置。

• nginx 配置微信回调

改完配置后要重启nginx

     nginx配置      成功进入Controller

在Controller中取出url中的code 。
然后进行URL拼接。相关代码如下，使用httpClient发送请求
pom依赖如下

                              .apache.httpponents             httpclient             4.5.3         

@GetMapping(value = "x/getAessCodeR")     @ResponseBody     public String getAessCodeR( HttpServletRequest request, HttpServletResponse response) thros NoSuchAlgorithmException, KeyManagementException, IOException {         String x_code = request.getParameter("code");         baseInfo baseInfo = ne baseInfo("0","Come in Controller");         String url ="https://api.eixin.qq./sns/oauth2/aess_token?appid="+appID+"&secret="+appSecret+"&code="+x_code+"&grant_type=authorization_code";         HttpRequestbase httpRequestbase = ne HttpGet(url);         CloseableHttpResponse http_response = null;         SSLContext sslcontext = SSLContext.getInstance("TLS");         X509TrustManager tm = ne X509TrustManager() {             public X509Certificate[] getAeptedIssuers() {                 return null;             }             public void checkClientTrusted(X509Certificate[] arg0, String arg1) thros CertificateException {}             public void checkServerTrusted(X509Certificate[] arg0, String arg1) thros CertificateException {}         };         sslcontext.init(null, ne TrustManager[] { tm }, null);         HttpClient httpClient = HttpClientBuilder.create().setSslcontext(sslcontext).build();         http_response=(CloseableHttpResponse) httpClient.execute(httpRequestbase);         HttpEntity entity= http_response.getEntity();         String result =HttpUtils.entityToStr(entity);         System.out.println(result);         return JSON.toJSonString(baseInfo);     }

返回结果如下图所示为
这个时候再拿用户的openid 去和数据库比较，即可判断是否是预期用户。

     微信返回

作者微笑的小小刀
链接https://.jianshu./p/cd837a75bd43