亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

web程序使用微信驗證登錄

標簽:
JavaScript

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

本人博客www.lixiang.red


准备工作

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

  • 微信开发者工具

  • 中台spring boot

  • 前端html+vue

  • 交互:跨域调用接口

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

公众号准备

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

https://img1.sycdn.imooc.com//5d574bf3000174ce08560215.png  开发模式

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

https://img1.sycdn.imooc.com//5d574bf60001fe5a08810450.png  微信开发者账号     https://img1.sycdn.imooc.com//5d574c27000191e808190132.png  需要绑定人的同意

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

https://img1.sycdn.imooc.com//5d574c2f000177c009070337.png  接口权限     https://img1.sycdn.imooc.com//5d574c380001616906600745.png  相关说明     https://img1.sycdn.imooc.com//5d574c3f0001e77008940063.png  验证文件放在根目录

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

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

前端

在webStome中随便写一个界面(此外我用的是登录界面为例),代码很简单,就几个input。

https://img1.sycdn.imooc.com//5d574c460001c67506230673.png  登录界面

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

https://img1.sycdn.imooc.com//5d574d2c0001830c08850426.png  js请求

中台Controller

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

@Controller @CrossOrigin public class WXController extends BaseController{     @GetMapping(value = "wx/getAccessCode")     @ResponseBody     public String getAccessCode( HttpServletRequest request, HttpServletResponse response){         BaseInfo baseInfo = new BaseInfo("0","Come in Controller");         return JSON.toJSONString(baseInfo);     }   }

   https://img1.sycdn.imooc.com//5d574d31000113c709040230.png  请求路径

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


   https://img1.sycdn.imooc.com//5d574d36000113c709040230.png  进入controller

  • 在Controller中请求微信(用modelAndView做)

@GetMapping(value = "wx/getAccessCode")     @ResponseBody     public ModelAndView getAccessCode(HttpServletRequest request, HttpServletResponse response) {         String callBackUrl = "http://m.yourwebsite.com/wx/getAccessCodeR";         String url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appID                 +"&redirect_uri="+ URLEncoder.encode(callBackUrl)                 +"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";         return new ModelAndView("redirect:" + url);     }


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

https://img1.sycdn.imooc.com//5d574d710001bc6704470176.png  改host

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

https://img1.sycdn.imooc.com//5d574d7500012b2d06910339.png  nginx

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

https://img1.sycdn.imooc.com//5d574d790001a10d03240073.png  运行Nginx     https://img1.sycdn.imooc.com//5d574d7e0001afd008980437.png  可以看到登录页面

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

https://img1.sycdn.imooc.com//5d574d820001f0c308960189.png  向微信请求

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

  • nginx 配置微信回调

改完配置后要重启nginx


   https://img1.sycdn.imooc.com//5d574d890001716a08840408.png  nginx配置     https://img1.sycdn.imooc.com//5d574d8f0001520f08640350.png  成功进入Controller

根据Code拿微信用户信息

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

        <!--httpclient-->         <dependency>             <groupId>org.apache.httpcomponents</groupId>             <artifactId>httpclient</artifactId>             <version>4.5.3</version>         </dependency>


@GetMapping(value = "wx/getAccessCodeR")     @ResponseBody     public String getAccessCodeR( HttpServletRequest request, HttpServletResponse response) throws NoSuchAlgorithmException, KeyManagementException, IOException {         String wx_code = request.getParameter("code");         BaseInfo baseInfo = new BaseInfo("0","Come in Controller");         String url ="https://api.weixin.qq.com/sns/oauth2/access_token?appid="+appID+"&secret="+appSecret+"&code="+wx_code+"&grant_type=authorization_code";         HttpRequestBase httpRequestBase = new HttpGet(url);         CloseableHttpResponse http_response = null;         SSLContext sslcontext = SSLContext.getInstance("TLS");         X509TrustManager tm = new X509TrustManager() {             public X509Certificate[] getAcceptedIssuers() {                 return null;             }             public void checkClientTrusted(X509Certificate[] arg0, String arg1) throws CertificateException {}             public void checkServerTrusted(X509Certificate[] arg0, String arg1) throws CertificateException {}         };         sslcontext.init(null, new 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://img1.sycdn.imooc.com//5d574d94000117e208950109.png  微信返回

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


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消