首页 > 其他分享 >微信公众号开发之扫码关注并登陆实战

微信公众号开发之扫码关注并登陆实战

时间:2022-10-14 10:14:13浏览次数:82  
标签:实战 map 扫码 return String 微信 ticket 之扫码 public

一.思路分析:
1.使用公众号接口生成二维码。
2.系统接收微信推送过来的事件(关注/扫码)。
3.用户点击关注或者扫码二维码后台都会接收到推送通知,然后根据通知实现自己的业务就可以了。

二.开发环境:
1.idea
2.redis
3.springboot2.x

三.基础环境搭建:
1.新建一个springboot项目
2.添加一个控制器,并运行,保证项目正常。

四.业务开发:


 1.让系统和微信系统对接上,能够接收微信推送事件,在控制器上面新增两个方法

/***
     * 微信服务器触发get请求用于检测签名
     * @return
     */
    @GetMapping("/handleWxCheckSignature")
    @ResponseBody
    public String handleWxCheckSignature(HttpServletRequest request){


        //todo 严格来说这里需要做签名验证,我这里为了方便就不做了
        String echostr = request.getParameter("echostr");
        
        return echostr;

    }
   /**
     * 接收微信推送事件
     * @param request
     * @return
     */
    @PostMapping("/handleWxCheckSignature")
    @ResponseBody
    public String handleWxEvent(HttpServletRequest request){

        try {
             InputStream inputStream = request.getInputStream();

            Map<String, Object> map = XmlUtil.parseXML(inputStream);

            String userOpenId = (String) map.get("FromUserName");
            String event = (String) map.get("Event");
            if("subscribe".equals(event)){

                logger.info("用户关注:{}",userOpenId);
            }else if("SCAN".equals(event)){

                logger.info("用户扫码:{}",userOpenId);
            }
            logger.info("接收参数:{}",map);

        } catch (IOException e) {
            e.printStackTrace();
        }
        return "success";

    }

2.在公众号后台设置URL和token,为了方面演示,我使用了公众号测试账号,同时使用了natapp做了外网映射,保存验证成功即可:

 

 

 3.用手机扫一下自己的公众号测试专用二维码:

 

 

 

 点击关注看看控制台是否有接收到通知,接收到即可继续往下:

 2.注入RestTemplate用于http请求 :

/**
 * 注入restTemplate用于http请求
 */
@Configuration
public class RestTemplateConfig {

    @Resource
    private RestTemplateBuilder templateBuilder;

    @Bean
    public RestTemplate restTemplate(){

        return templateBuilder.build();
    }

}

 

3.新增一个微信服务接口,用于调用微信公众号接口

public interface WxService {
    //获取token
    String getAccessToken();
   //获取生成二维码参数
   Map<String,Object> getQrCode();
}

4.实现接口调用, 不清楚请看微信公众号开发文档

yml中配置公众号参数

spring:
# 模版配置
  thymeleaf:
    cache: false
 #redis 配置
  redis:
    host: 127.0.0.1
    database: 1
    password: 123456

#公众号参数配置
wx:
  gz:
    appid:  你的appid
    secret: 你的appsecret

接口服务实现:

@Service
public class WxServiceImpl implements WxService {

    Logger logger = LoggerFactory.getLogger(WxServiceImpl.class);

    @Value("${wx.gz.appid:''}")
    private String appid;
    @Value("${wx.gz.secret:''}")
    private String secret;
    @Resource
    private RestTemplate restTemplate;
    @Resource
    private RedisCacheManager redisCacheManager;

    @Override
    public String getAccessToken() {


        String key = "wx_access_token";

        //从redis缓存中获取token
        if(redisCacheManager.hasKey(key)){

            return (String) redisCacheManager.get(key);
        }


        String url = String.format("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=%s&secret=%s",appid,secret);

        ResponseEntity<String> result = restTemplate.getForEntity(url, String.class);

        if(result.getStatusCode()== HttpStatus.OK){

            JSONObject jsonObject = JSON.parseObject(result.getBody());

            String access_token = jsonObject.getString("access_token");
            Long expires_in = jsonObject.getLong("expires_in");
           //缓存toekn到redis
           redisCacheManager.set(key,access_token,expires_in);
            return access_token;
        }


        return null;
    }

    @Override
    public Map<String, Object> getQrCode() {


        //获取临时二维码
        String url = String.format("https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=%s",getAccessToken());
        ResponseEntity<String> result = restTemplate.postForEntity(url, "{\"expire_seconds\": 604800, \"action_name\": \"QR_STR_SCENE\", \"action_info\": {\"scene\": {\"scene_str\": \"test\"}}}", String.class);

        logger.info("二维码:{}",result.getBody());

        JSONObject jsonObject = JSON.parseObject(result.getBody());
        Map<String,Object> map=new HashMap<>();
        map.put("ticket",jsonObject.getString("ticket"));
        map.put("url",jsonObject.getString("url"));

        return map;
    }
} 

 

5.ok,接下来就是在控制器中新增一个首页和一个登陆和登陆成功方法

   @GetMapping("")
    public String index(){

        return "index";
    }

    @GetMapping("/login")
    public String login(){

       return "login";
    }
    
    @GetMapping("/success")
    public String loginSuccess(){
        
        return "登陆成功";
    }

简单html页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信公众号扫码关注登陆实现</title>
</head>
<body>
<a href="/login">扫码登陆</a>

</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
</head>
<body>

<div style="width: 200px;margin: 50px auto">
     <div id="qrcode"></div>
</div>

<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
    $(function () {
        //获取二维码参数
        $.get('/getQrCode',function (res) {
            //生成二维码
            $('#qrcode').qrcode(res.url);

            //轮训获取用户扫码登陆状态
            var task = setInterval(function () {

                $.post('/checkLogin',{ticket:res.ticket},function (ok) {

                    //扫码成功登陆成功
                    if(ok){

                     clearInterval(task)
                     location.href='/success'

                    }

                })
            },2000)
        })
    })

</script>
</body>
</html>

用到的maven依赖

       <dependency>
            <groupId>dom4j</groupId>
            <artifactId>dom4j</artifactId>
            <version>1.6.1</version>
        </dependency>

       <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.68</version>
        </dependency>

 

自己用dom4j简单解析xml

public class XmlUtil {

    /**
     * 简单解析xml
     * @param in
     * @return
     */
    public static Map<String,Object> parseXML(InputStream in){
        Map<String,Object> map=new HashMap<>();
        try {
            SAXReader saxReader = new SAXReader();
            Document document = saxReader.read(in);
            Element root = document.getRootElement();
            Iterator iterator = root.elementIterator();
            while (iterator.hasNext()){

                Element element = (Element) iterator.next();
                map.put(element.getName(),element.getStringValue());

            }
        } catch (DocumentException e) {
            e.printStackTrace();
        }

        return map;
    }

}

自己简单包装的redis缓存工具

@Component
public class RedisCacheManager {

    @Resource
    private RedisTemplate<String,Object> redisTemplate;


    public void set(String key,Object value,long expire){

        redisTemplate.opsForValue().set(key,value,expire, TimeUnit.SECONDS);
    }

    public Object get(String key){

        return redisTemplate.opsForValue().get(key);
    }


    public Boolean delete(String key){

       return redisTemplate.delete(key);
    }

    public boolean hasKey(String key) {

        return redisTemplate.hasKey(key);
    }
}

改造controller

@Controller
public class HomeController {
  Logger logger = LoggerFactory.getLogger(HomeController.class);


  @Resource
  private WxService wxService;
  @Resource
  private RedisCacheManager redisCacheManager;


    /**
     * 首页
     * @return
     */

    @GetMapping("/")
    public String index(){

        return "index";
    }

    /**
     * 登陆页面
     * @return
     */
    @GetMapping("/login")
    public String login(){

       return "login";
    }

    /**
     * 用于检测扫码和关注状态
     * @return
     */
    @PostMapping("/checkLogin")
    @ResponseBody
    public Object checkLogin(String ticket){
        //如果redis中有ticket凭证则说明用户已扫码说明登陆成功
        if(redisCacheManager.hasKey(ticket)){
            //扫码通过则删除
            redisCacheManager.delete(ticket);
            return true;
        }
        return false;
    }

    /**
     * 获取二维码参数
     * @return
     */
    @GetMapping("/getQrCode")
    @ResponseBody
    public Object getQrCode(){
        return wxService.getQrCode();
    }


    /**
     * 登陆成功跳转
     * @return
     */
    @GetMapping("/success")
    @ResponseBody
    public String loginSuccess(){
        return "登陆成功";
    }

    /***
     * 微信服务器触发get请求用于检测签名
     * @return
     */
    @GetMapping("/handleWxCheckSignature")
    @ResponseBody
    public String handleWxCheckSignature(HttpServletRequest request){
        //todo 严格来说这里需要做签名验证,我这里为了方便就不做了
        String echostr = request.getParameter("echostr");
        return echostr;
    }
    /**
     * 接收微信推送事件
     * @param request
     * @return
     */
    @PostMapping("/handleWxCheckSignature")
    @ResponseBody
    public String handleWxEvent(HttpServletRequest request){
        try {
             InputStream inputStream = request.getInputStream();

            Map<String, Object> map = XmlUtil.parseXML(inputStream);

            String userOpenId = (String) map.get("FromUserName");
            String event = (String) map.get("Event");
            if("subscribe".equals(event)){

                // TODO:获取openid判断用户是否存在,不存在则获取新增用户,自己的业务

                //自己生成的二维码不管是关注还是扫码都能取到ticket凭证,这里我使用Ticket作为每次二维码的唯一标识
                String ticket = (String) map.get("Ticket");
                redisCacheManager.set(ticket,"",10*60);

                logger.info("用户关注:{}",userOpenId);
            }else if("SCAN".equals(event)){

                //自己生成的二维码不管是关注还是扫码都能取到ticket凭证
                String ticket = (String) map.get("Ticket");
                redisCacheManager.set(ticket,"",10*60);
                logger.info("用户扫码:{}",userOpenId);
            }
            logger.info("接收参数:{}",map);

        } catch (IOException e) {
            e.printStackTrace();
        }
        return "success";
    }

}

说明: 通过微信获取二维码参数时里面有ticket和用户扫码之后都会携带这个参数,所以我就将就使用这个凭证作为用户是否扫码的判断了。即,当用户扫我们生成的二维码,收到关注或者扫码事件时,说明用户已扫码或关注,此时将这个二维码的ticket存到redis中, 与前端传过来的ticket对比,如果一致则说明扫码成功,跳转到登陆成功页面!

6.测试效果:
扫码


 

 扫码登陆成功

 

 

因为这个测试不好演示,我就简单的模拟结果了。

标签:实战,map,扫码,return,String,微信,ticket,之扫码,public
From: https://www.cnblogs.com/stry/p/16790676.html

相关文章

  • 实战!工作中常用到哪些设计模式
    前言大家好,我是捡田螺的小男孩。平时我们写代码呢,多数情况都是流水线式写代码,基本就可以实现业务逻辑了。如何在写代码中找到乐趣呢,我觉得,最好的方式就是:使用设计模式优化......
  • prometheus监控实战
    第一节、环境和软件版本1.1、操作系统环境主机ip操作系统部署软件备注192.168.10.10Centos7.9Grafana、Pushgateway、BlackboxExporter监控ui192.168.......
  • 【云原生】Elasticsearch + kibana on k8s 讲解与实战操作
    目录一、概述二、Elasticsearch编排部署1)添加源并下载编排部署包2)构建镜像3)修改yaml编排4)开始部署5)测试验证6)elasticsearch-head7)卸载三、Kibana编排部署1)添加源并下载编......
  • 微信小程序 —— 保留两位小数
    两种方法一:在utils文件夹中新建一个filters.wxs文件将下面代码写入varfilters={toFix:function(value){returnvalue.toFixed(2)//此处2为保留两位小......
  • 【Vue 开发实战】实战篇 # 31:如何将菜单和路由结合
    说明【Vue开发实战】学习笔记。实现效果BasicLayout.vue<template><div:class="[`nav-theme-${navTheme}`,`nav-layout-${navLayout}`]"><a-layoutid="comp......
  • 【GUI视频教程】GUI综合实战视频教程第1期:综合UI项目规划以及AppWizard和ThreadX GUIX
    ​之前一直打算录制GUI视频教程,但是没有想好该如何录制,经过这段时间的考虑和网友的建议,准备做成综合实战视频,每个功能都是独立的应用。视频:​​https://www.bilibili.com/vi......
  • 微信公众号推送消息
     使用条件:微信认证的服务号发送对象:全部粉丝、粉丝分组发送发送规则:不占用公众号规定的群发次数功能描述:可以对公众号内全部的粉丝进行群发,支持按分组发送;发送模板消息不......
  • 配置alertmanager通过webhook告警到企业微信群
    1、在alertmanager服务器部署webhook代理程序,可使用docker部署,命令如下dockerrun-d--nameqywechat-webhook-adapter--restartalways-p8080:80-v/usr/local/ale......
  • Spring实战笔记二(bean的作用域、运行时注入、)
    一、bean的作用域      默认情况下,Spring应用上下文中所有bean都是以单例(singleton)的形式创建的。      Spring定义的多种作用域,可以基于这些作用域创建be......
  • kafka实战最佳经验(文末福利)
    Kafka由于高吞吐量、可持久化、分布式、支持流数据处理等特性而被广泛应用。但当前关于Kafka原理及应用的相关资料较少,在我打算编写本文时,还没有见到中文版本的Kafka相关书......