web程序使用微信验证登录

简介: 是这样的一个功能需求:从微信公众号点一个链接时,能获取到微信用户的信息,然后核实是不是系统用户,并以此做为登录的凭定个人广告时间本人博客:www.lixiang.red对程序或者代码有问题,可参见博客上的联系方式~~谢谢大家支持准备工作经过认证的微信公众号(没有认证过的还没实验,以后实验了会回来更新的)微信开发者工具中台spring boot前端html+vue交互:跨域调用接口附录: 本文不是web教程,有关于spring boot的知识,以及跨域的知识在本文中没有放出来。

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


个人广告时间
本人博客www.lixiang.red
对程序或者代码有问题,可参见博客上的联系方式~~
谢谢大家支持


准备工作

  • 经过认证的微信公众号(没有认证过的还没实验,以后实验了会回来更新的)
  • 微信开发者工具
  • 中台spring boot
  • 前端html+vue
  • 交互:跨域调用接口
  • 附录: 本文不是web教程,有关于spring boot的知识,以及跨域的知识在本文中没有放出来。

公众号准备

  • 开启开发模式,获取到appid , AppSecret
img_8c6be8b07df0384263e7d545a451b978.png
开发模式
  • 添加微信开发账号,需要被绑定人微信同意
img_48196d5bdcc9cf2d0bfe5e0f63d45c5c.png
微信开发者账号
img_c0638893e52c03ee64e82391bc03f949.png
需要绑定人的同意
  • 修改接口权限,并按照相关说明中的步骤放置好文件
img_5d3e886d5934cfcbd711c3d6bae8ac44.png
接口权限
img_6a1fc9ba3e11b06ddf9443636af91370.png
相关说明
img_5f767b4a331a24f898d433c31e60a99e.png
验证文件放在根目录
  • 两种授权模式:(本示例选用第1个,因为只用openID做用户名校验就可以了)
    1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)
    2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

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

前端

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

img_4a2178ba8d8a2f4242f3e9af3cec2ff0.png
登录界面

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

img_fbc3a173119b4a28310baa172cb544ed.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);
    }
  }
img_8dbf39057f5dcfd6763a76ec098cdcae.png
请求路径

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


img_3b75c6692d4d3ed44a8e4d2e5698f4b5.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

img_033e52734d956389d3aa440b1ff0abf3.png
改host

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

img_ad2df80ef845d71f0cde4c838b5eee86.png
nginx

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

img_ae49b84f5b46ac954b073d04bc67da9a.png
运行Nginx
img_ced83cca591daae17dc14b8fe69200a2.png
可以看到登录页面

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

img_3652de6e8fc59176b45a34709633ce5d.png
向微信请求

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

  • nginx 配置微信回调

改完配置后要重启nginx


img_6b8139477dd7f733e3808b1bb1b4801f.png
nginx配置
img_c9c277ae636597c5a6e3634bdc42ee5e.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 去和数据库比较,即可判断是否是预期用户。


img_1e8b7b311f290b3514022d9431fcf6ca.png
微信返回
相关文章
|
27天前
|
安全 JavaScript Java
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
34 12
AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
|
3天前
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
29 0
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
|
12天前
|
自然语言处理 安全 测试技术
HCL AppScan Standard 10.8.0 (Windows) - Web 应用程序安全测试
HCL AppScan Standard 10.8.0 (Windows) - Web 应用程序安全测试
33 0
HCL AppScan Standard 10.8.0 (Windows) - Web 应用程序安全测试
|
1月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
361 12
|
4月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
184 62
|
4月前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
74 6
|
4月前
|
小程序 前端开发 算法
|
4月前
|
数据可视化 数据库 开发者
使用Dash构建交互式Web应用程序
【10月更文挑战第16天】本文介绍了使用Python的Dash框架构建交互式Web应用程序的方法。Dash结合了Flask、React和Plotly等技术,让开发者能够快速创建功能丰富的数据可视化应用。文章从安装Dash开始,逐步介绍了创建简单应用程序、添加交互元素、部署应用程序以及集成更多功能的步骤,并提供了代码示例。通过本文,读者可以掌握使用Dash构建交互式Web应用程序的基本技巧和高级功能。
169 3
|
5月前
|
移动开发 前端开发 Android开发
开发指南059-App实现微信扫描登录
App是用uniapp开发的,打包为apk,上传到安卓平板中使用
|
5月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序

热门文章

最新文章