JAVA实现微信公众号扫一扫

最新推荐文章于 2023-11-06 14:34:42 发布
最新推荐文章于 2023-11-06 14:34:42 发布
阅读量1.7k 收藏 5
点赞数
文章标签： 微信 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37247664/article/details/120274572
版权

准备环境

1.微信测试公众号申请：

微信公众平台http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

2.记录下申请的测试公众号的appid和appsecret

3.配置内网穿透：本篇使用的是natapp NATAPP-内网穿透 基于ngrok的国内高速内网映射工具

设置本机的内网穿透代理，使用免费版。

4.配置js安全域名：其中js安全域名的设置不能携带http://。

5.扫码关注测试公众号：因为测试公众号，在手机端测试时要关注公众号。

 开发环境

1.vue前端框架

2.jdk 1.8

3.springboot

后端代码

1.后端代码逻辑主要是：根据appid及appsecret获取token,再根据token获取jsapi_ticket，然后再根据jsapi_ticket，noncestr、timestamp、url拼接成字符串，然后加密生成签名，然后将url（调用扫一扫的页面地址）、jsapi_ticket、nonceStr、timestamp、signature、appId封装后传给前端进行微信验证。

首先微信获取token实体类

 http工具类

import org.apache.http.NameValuePair;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.utils.URIBuilder;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;

import java.io.IOException;
import java.net.URI;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class HttpClient {
    public static String doGet(String url, Map<String, String> param) {

        // 创建Httpclient对象
        CloseableHttpClient httpclient = HttpClients.createDefault();

        String resultString = "";
        CloseableHttpResponse response = null;
        try {
            // 创建uri
            URIBuilder builder = new URIBuilder(url);
            if (param != null) {
                for (String key : param.keySet()) {
                    builder.addParameter(key, param.get(key));
                }
            }
            URI uri = builder.build();

            // 创建http GET请求
            HttpGet httpGet = new HttpGet(uri);

            // 执行请求
            response = httpclient.execute(httpGet);
            // 判断返回状态是否为200
            if (response.getStatusLine().getStatusCode() == 200) {
                resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (response != null) {
                    response.close();
                }
                httpclient.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return resultString;
    }

    public static String doGet(String url) {
        return doGet(url, null);
    }

    public static String doPost(String url, Map<String, String> param) {
        // 创建Httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        CloseableHttpResponse response = null;
        String resultString = "";
        try {
            // 创建Http Post请求
            HttpPost httpPost = new HttpPost(url);
            // 创建参数列表
            if (param != null) {
                List<NameValuePair> paramList = new ArrayList<>();
                for (String key : param.keySet()) {
                    paramList.add(new BasicNameValuePair(key, param.get(key)));
                }
                // 模拟表单
                UrlEncodedFormEntity entity = new UrlEncodedFormEntity(paramList);
                httpPost.setEntity(entity);
            }
            // 执行http请求
            response = httpClient.execute(httpPost);
            resultString = EntityUtils.toString(response.getEntity(), "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                response.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return resultString;
    }

    public static String doPost(String url) {
        return doPost(url, null);
    }

    public static String doPostJson(String url, String json) {
        // 创建Httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();
        CloseableHttpResponse response = null;
        String resultString = "";
        try {
            // 创建Http Post请求
            HttpPost httpPost = new HttpPost(url);
            // 创建请求内容
            StringEntity entity = new StringEntity(json, ContentType.APPLICATION_JSON);
            httpPost.setEntity(entity);
            // 执行http请求
            response = httpClient.execute(httpPost);
            resultString = EntityUtils.toString(response.getEntity(), "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                response.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return resultString;
    }
}

此工具主要用于请求微信链接获取数据

微信工具类-获取accessToken及获取jsApiTicket

import cn.px.base.pojo.page.LayuiPageFactory;
import cn.px.blh.core.wx.WxTokenEntity;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import java.util.HashMap;
import java.util.Map;

@Component
public class WxUtil {

    //获取token
    private static final String TOKEN_URL  = "https://api.weixin.qq.com/cgi-bin/token";
    //微信APPID
    public static String APP_ID;
    //微信秘钥
    private static String SECRET;

    //微信公众号token在redis中存储时的key值
    public static final String GZH_TOKEN = "wxgzh-access-token";

    //获取JSAPI_TICKET
    private static final  String JSAPI_TICKET = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";

    //微信公众号jsapi_ticket在redis中存储的key值
    public static final String JSAPI_KEY = "wxgzh-jsapi-ticket";
    //JSAPI_KEY在redis中的失效时间
    public static final Integer JSAPI_KEY_EXPIRED_TIME = 7000;


    @Value("${wx.appId}")
    public void setAppId(String appId) {
        WxUtil.APP_ID = appId;
    }

    @Value("${wx.secret}")
    public void setSecret(String secret) {
        WxUtil.SECRET = secret;
    }
    /**
     * 获取微信token
     * @return
     */
    public static WxTokenEntity getAccessToken() {

        Map<String, String> param = new HashMap<>(16);
        param.put("grant_type", "client_credential");
        param.put("appid", APP_ID);
        param.put("secret", SECRET);
        String wxResult = HttpClient.doGet(TOKEN_URL,param);
        WxTokenEntity model = JSON.toJavaObject(JSONObject.parseObject(wxResult),WxTokenEntity.class);
        return model;
    }

    /**
     * 获得jsapi_ticket
     */
    public static String getJsApiTicket(String token) {
        String url = JSAPI_TICKET
                + "?access_token=" + token
                + "&type=jsapi";

        String response = HttpClient.doGet(url);
        if (StringUtils.isBlank(response)) {
            return null;
        }
        JSONObject jsonObject = JSONObject.parseObject(response);
        String ticket = jsonObject.getString("ticket");
        return ticket;
    }

}

根据url来获取js_api_ticket然后返回结果的实现类

import cn.px.base.util.CacheUtil;
import cn.px.blh.core.util.WxUtil;
import cn.px.blh.core.wx.WxTokenEntity;
import cn.stylefeng.roses.core.util.ToolUtil;
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;
import org.springframework.stereotype.Service;

import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@Service
public class WxJsApiService {

    protected Logger logger = LogManager.getLogger();

    /**
     * 获取签名
     * @param url
     * @return
     */
    public Map<String, String> sign(String url) {
        Map<String, String> resultMap = new HashMap<>(16);
        //这里的jsapi_ticket是获取的jsapi_ticket。
        String jsapiTicket = this.getJsApiTicket();
        //这里签名中的nonceStr要与前端页面config中的nonceStr保持一致，所以这里获取并生成签名之后，还要将其原值传到前端
        if(ToolUtil.isEmpty(jsapiTicket)){
            return resultMap;
        }
        String nonceStr = createNonceStr();
        //nonceStr
        String timestamp = createTimestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapiTicket +
                "&noncestr=" + nonceStr +
                "&timestamp=" + timestamp +
                "&url=" + url;
        System.out.println("string1:"+string1);

        try
        {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        }
        catch (NoSuchAlgorithmException e)
        {
            e.printStackTrace();
        }
        catch (UnsupportedEncodingException e)
        {
            e.printStackTrace();
        }
        resultMap.put("url", url);
        resultMap.put("jsapi_ticket", jsapiTicket);
        resultMap.put("nonceStr", nonceStr);
        resultMap.put("timestamp", timestamp);
        resultMap.put("signature", signature);
        resultMap.put("appId", WxUtil.APP_ID);
        return resultMap;
    }

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash)
        {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }

    private static String createNonceStr() {
        return UUID.randomUUID().toString();
    }

    private static String createTimestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }

    public String getJsApiTicket(){
        String ticket = (String) CacheUtil.getCache().get(WxUtil.JSAPI_KEY);
        if(ToolUtil.isEmpty(ticket)){
            if(ToolUtil.isEmpty(getToken())){
                logger.error(String.format("获取token出错"));
            }else{
                ticket = WxUtil.getJsApiTicket(getToken());
                CacheUtil.getCache().set(WxUtil.JSAPI_KEY,ticket,WxUtil.JSAPI_KEY_EXPIRED_TIME);
            }
        }
        return ticket;
    }

    private String getToken(){
        //此处获取token先判断缓存中是否存在，如果没有则调取放入缓存
        String token = (String) CacheUtil.getCache().get(WxUtil.GZH_TOKEN);
        if(ToolUtil.isEmpty(token)){
            WxTokenEntity wxTokenEntity = WxUtil.getAccessToken();
            if(ToolUtil.isEmpty(wxTokenEntity.getAccess_token())){
                //获取token出错
                logger.error(String.format("获取token出错，错误编码：{%s};错误提示：{%s}",wxTokenEntity.getErrcode(),wxTokenEntity.getErrmsg()));
            }else{
                token = wxTokenEntity.getAccess_token();
                CacheUtil.getCache().set(WxUtil.GZH_TOKEN,token,Integer.parseInt(wxTokenEntity.getExpires_in()));
            }

        }
        return token;
    }

}

其中token及jsApiTicket需放入缓存中，防止过多调用微信链接造成资源浪费，缓存工具类大家可以根据自己项目来实现，这里不再贴出。

Controller控制类

/**
     * 获取微信公众号信息
     */
    @ApiOperation("获取微信公众号信息")
    @PostMapping(value = "/getSign")
    @ResponseBody
    public Object scanJsApi(@Param("tokenUrl") String tokenUrl) {
        Map<String, String> res = wxJsApiService.sign(tokenUrl);
        if(ToolUtil.isEmpty(res)){
            return setModelMap(HttpCode.BAD_REQUEST,"获取公众号信息失败");
        }else{
            return super.setSuccessModelMap(res);
        }

    }

vue前端代码

1.首先使用到微信的wexin-jsapi:

        安装：npm install weixin-jsapi --save

        页面引入：import wx from "weixin-jsapi";

2.初始化微信参数

 //初始化微信参数
      wxLoadConfig:function(){
        var vm = this;
        return new Promise((resolve, reject) => {
          // alert(window.location.href.split("#")[0]);
          vm.$root.api.getSign(window.location.href.split("#")[0]).then(res => {
            //获取数据
            if (res.httpCode == 200 || res.httpCode == '200') {
              var timestamp = res.data.timestamp;
              var noncestr = res.data.nonceStr;
              var signature = res.data.signature;
              var appId = res.data.appId;
              wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名
                jsApiList: [
                  "scanQRCode"
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });
              wx.checkJsApi({
                jsApiList:['scanQRCode'],
                success:function (res) {
                      alert(res);
                }
              });
            } else {

            }
            resolve();
          }).catch(err => {
            reject(err);
          })
        })
      },

3.调取扫一扫

    //调取扫一扫
      takeScan:function(){
        wx.ready(function() {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function(res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              alert(res);
            },
            error: function(res) {
              alert(res);
            }
          });
        });
      },

vue前端页面代码

/* eslint-disable no-undef */
<!--样式引入-->


<!--模版引入-->
<template>
  <div>
    <div>
      <input type="button" value="调取扫一扫" @click="takeScan"/>
    </div>
  </div>
</template>

<script>
  import wx from "weixin-jsapi";
  // 在man.js中注册 weixin-jsapi
  export default {
    name: 'index',
    data() {
      return {

      }
    },
    watch: {
      '$route'(to, from) {
        // 更新当前页面导航

      }
    },
    components: {},
    mounted: function() {
      this.wxLoadConfig();
    },
    methods: {
      //绑定证件，跳转绑定证件页面
      bindCertificate:function(){
        this.$router.push('/bind');
      },
      //初始化微信参数
      wxLoadConfig:function(){
        var vm = this;
        return new Promise((resolve, reject) => {
          // alert(window.location.href.split("#")[0]);
          vm.$root.api.getSign(window.location.href.split("#")[0]).then(res => {
            //获取数据
            if (res.httpCode == 200 || res.httpCode == '200') {
              var timestamp = res.data.timestamp;
              var noncestr = res.data.nonceStr;
              var signature = res.data.signature;
              var appId = res.data.appId;
              wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名
                jsApiList: [
                  "scanQRCode"
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });
              wx.checkJsApi({
                jsApiList:['scanQRCode'],
                success:function (res) {
                      alert(res);
                }
              });
            } else {

            }
            resolve();
          }).catch(err => {
            reject(err);
          })
        })
      },
      //调取扫一扫
      takeScan:function(){
        wx.ready(function() {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function(res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              alert(res);
            },
            error: function(res) {
              alert(res);
            }
          });
        });
      },



    }
  };
</script>

向大之路
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5网页如何调用微信扫一扫功能？
**My Coding Family**
05-23 1149
ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。码字不易，如果这篇文章对你有所帮助，帮忙给bugj菌来个，您的支持就是我坚持写作分享知识点传播技术的最大动力。「猿圈奇妙屋」；
微信公众号开发纪要(4)-调用微信扫一扫功能
weixin_34413065的博客
07-16 410
在微信公众号页面中调用微信扫一扫功能，就是调用微信JS-SDK。让JS-SDK完成调用摄像头扫描，然后我们将扫描结果进行业务操作。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提...
手把手教程用Java实现微信公众号扫码登录功能
黑夜开发者的博客
03-28 4119
微信现今是我们必不可少的社交工具了，围绕微信这个生态实际上有很多东西可以做，今天就通过`Java SpringBoot`项目来用微信公众号参数二维码实现扫码登录。实现的方式很多，今天介绍一下我的思路。
Java中IDEA报错 “cannot access xxx“的解决办法
山路曲折盘旋，但毕竟朝着顶峰延伸
12-15 4198
使用IDEA在项目中，偶尔会出现报错"cannot access xxx",项目爆红,但是看来看去代码当中没有任何问题.重启电脑和IDEA仍然报错.用下面这种方式清除缓存试试.问题解决.
通过微信公众号H5开发（js-SDK）实现扫一扫
最新发布
李潇潇de猫
11-06 1174
在使用uniapp开发H5的过程中，有用到定位，扫码等功能。开发过程中发现，uniapp提供的uni.scanCode扫码api不支持H5，uniapp提供的uni.getLocation(OBJECT)也不能正常使用。此时就需要通过微信公众号提供的js-sdk来实现这些功能。
微信公众号H5页面实现扫一扫功能
fuguanyan的博客
05-19 2371
微信公众号H5实现扫码功能
Java实现微信公众号扫码登录
PengLes
02-22 2834
Java实现微信公众号扫码登录
java实现微信公众号扫一扫
08-27
主要为大家详细介绍了java实现微信公众号扫一扫，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot实现web端微信扫码登录项目（基于微信开放平台）
09-18
在本文中，我们将深入探讨如何使用SpringBoot框架来实现一个基于微信开放平台的Web端扫码登录功能。微信扫码登录是一种安全、便捷的用户身份验证方式，它允许用户通过扫描二维码来授权登录，而无需输入用户名和密码...
snsjava源码-wechat-login:基于SpringBoot和WxJava实现网站接入微信扫码登录
06-18
实现网站接入微信扫码登录 1. 概述 项目源码： 如果项目存在什么问题，欢迎大家提 ，期待你的来访 demo 使用了Spring Boot 和 (微信开发 Java SDK，支持包括微信支付、开放平台、小程序、企业微信/企业号和公众号等...
微信JS-SDK调用扫一扫功能的DEMO
02-07
如何在H5页面调用微信的扫一扫功能来识别二维码。
微信扫一扫登录
11-19
导入即可使用，初学者易懂，里面有工具源码以及操作手册。
attend:基于Java的第三方服务器微信公众号考勤管理系统
05-10
#简介本项目是一个基于Java的第三方微信公众号管理系统，可用于微型企业人事管理、考勤管理、部门通知留言、员工查看考勤记录等，项目前台为微信公众号，员工关注该公众号可以查询考勤记录、部门主管留言等信息；...
微信公众号(事件回调&生成带参数二维码&扫码关注事件&消息模板推送)java版
全栈羊的搬砖日常
04-20 3916
1.业务处理(全部业务) import com.alibaba.fastjson.JSONObject; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.util.HashMap; import java.util.Map; @RestCont.
JAVA实现调用微信js-sdk扫一扫
dsn727455218的博客
09-21 1695
喜欢的朋友可以关注下。 已经很久没有给大家分享一片技术文章了，今天抽了点时间来，给大家说一说如何调用微信提供的扫一扫接口。 前提： 需要申请一个公众号：申请公众号需要的资料我就不说了，去申请微信会提示需要哪些。 准备appid（公众号的id） AppSecret （公众号的密钥） 正文： 首先，我们先来简单了解一下流程，详细的微信文档有说明。 获取Token→根据token获取Ti...
微信调用jssdk在网页端实现调用扫一扫，java+jsp
热门推荐
学习使我快乐
12-31 5万+
这篇文章以讲解的方式，帮助大家来理解微信官方的文档，同时给出调用扫一扫的例子。 微信官方技术文档jssdk：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 打开技术文档，看到一个大目录，我们只需要关注下面几部分目录即可。
Java微信网页调用扫一扫
Gene Xu
07-04 1939
这章主要记录下调用微信JS-SDK中的扫一扫踩到的坑 一、引入JS文件 首先我们先引入js文件，地址为 http://res.wx.qq.com/open/js/jweixin-1.0.0.js，当然你也可以下载到本地，使用本地路径进行引入...
java微信扫一扫_java实现微信扫一扫详解
weixin_42509964的博客
02-13 515
import java.util.UUID;import java.util.Map;import java.util.HashMap;import java.util.Formatter;import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;import java.io.Unsupport...
java实现微信公众号扫码登录功能
08-09
要实现微信公众号的扫码登录功能，首先需要了解微信提供的开放平台接口。 1. 注册开发者账号和创建公众号：首先，我们需要在微信开放平台注册一个开发者账号，并创建一个公众号。在公众号设置中，开启网页授权登录...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值