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

漂泊的城 發表於 2022-3-31 17:18:00

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

<div>
好久又没有更新文章了，最近又在忙项目，开发中遇到了一个需求，就是用户扫码二维码之后没有关注公众号,要先关注之后才能登陆，如果已经关注了就直接跳登陆成功，其实这个功能应用场景还是蛮多的，包括腾讯自己的应用也使用了这样的功能。下面开始分享给需要的伙伴们，当然，这我自己的摸索实现的，可能还有更好的方案，如果小伙伴们有更好的方法，欢迎分享交流，话不多说开干！
一.思路分析: 
1.使用公众号接口生成二维码。 
2.系统接收微信推送过来的事件(关注/扫码)。 
3.用户点击关注或者扫码二维码后台都会接收到推送通知,然后根据通知实现自己的业务就可以了。
二.开发环境: 
1.idea 
2.redis 
3.springboot2.x
三.基础环境搭建: 
1.新建一个springboot项目 
2.添加一个控制器，并运行，保证项目正常。
四.业务开发：
  1.让系统和微信系统对接上，能够接收微信推送事件，在控制器上面新增两个方法
<div class="cnblogs_code">
<pre>/***
* 微信服务器触发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";

}</pre>
</div>
 
</div>
2.在公众号后台设置URL和token,为了方面演示，我使用了公众号测试账号,同时使用了natapp做了外网映射,保存验证成功即可：
 
<img src="https://img2022.cnblogs.com/blog/1838865/202203/1838865-20220331170941306-726301205.png">
 
 
 3.用手机扫一下自己的公众号测试专用二维码:
 
<img src="https://img2022.cnblogs.com/blog/1838865/202203/1838865-20220331170956271-254999659.png">
 
 
 点击关注看看控制台是否有接收到通知,接收到即可继续往下：
<img src="https://img2022.cnblogs.com/blog/1838865/202203/1838865-20220331171012640-1216328823.png">
 
 
 
 2.注入RestTemplate用于http请求 :
<div class="cnblogs_code">
<pre>/**
* 注入restTemplate用于http请求
*/
@Configuration
public class RestTemplateConfig {

@Resource
private RestTemplateBuilder templateBuilder;

@Bean
public RestTemplate restTemplate(){

 return templateBuilder.build();
}

}</pre>
</div>
 
3.新增一个微信服务接口，用于调用微信公众号接口
<div class="cnblogs_code">
<pre>public interface WxService {
//获取token
 String getAccessToken();
//获取生成二维码参数
Map<String,Object> getQrCode();
}</pre>
</div>
 
4.实现接口调用, 不清楚请看微信公众号开发文档。
yml中配置公众号参数
<div class="cnblogs_code">
<pre>spring:
# 模版配置
thymeleaf:
cache: false
#redis 配置
redis:
host: 127.0.0.1
database: 1
password: 123456

#公众号参数配置
wx:
gz:
appid:你的appid
secret: 你的appsecret</pre>
</div>
 
接口服务实现:
<div class="cnblogs_code">
<pre>@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;
}
} </pre>
</div>
 
5.ok，接下来就是在控制器中新增一个首页和一个登陆和登陆成功方法
<div class="cnblogs_code">
<pre> @GetMapping("")
public String index(){

 return "index";
}

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

 return "login";
}

@GetMapping("/success")
public String loginSuccess(){

 return "登陆成功";
}</pre>
</div>
 
简单html页面
index.html
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信公众号扫码关注登陆实现</title>
</head>
<body>
<a href="/login">扫码登陆</a>

</body>
</html></pre>
</div>
 
login.html
<div class="cnblogs_code">
<pre><!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></pre>
</div>
 
用到的maven依赖
<div class="cnblogs_code">
<pre> <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></pre>
</div>
 
自己用dom4j简单解析xml
<div class="cnblogs_code">
<pre>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;
}

}</pre>
</div>
 
自己简单包装的redis缓存工具
<div class="cnblogs_code">
<pre>@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);
}
}</pre>
</div>
 
改造controller
<div class="cnblogs_code">
<pre>@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";
}

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

</div>

<img src="https://img2022.cnblogs.com/blog/1838865/202203/1838865-20220331171745941-933561404.jpg"> 
 
 扫码登陆成功
<img src="https://img2022.cnblogs.com/blog/1838865/202203/1838865-20220331171538805-197921252.png">
 
 
<div>
<div>
因为这个测试不好演示，我就简单的模拟结果了。
总结：公众号扫码登陆就简简单单的完成了，当然这只是一个模拟流程,具体的业务 
还需要自己实现。这也是我在做项目中遇到的一个实际需求,这里分享出来，如果有不对的地方欢迎大家指正，如果喜欢我的文章，记得关注不迷路,后续会分享更多干货😊！

</div>

</div>
</div> 
来源：https://www.cnblogs.com/xingmatong/p/16082852.html

頁: [1]

琼殿技术论坛's Archiver

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