微信JSSDK使用签名算法

第一步：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。

第二步：引入js文件

在页面里引入微信的jssdk文件：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

第三步：调用config接口注入权限

整体就是页面通过ajax请求后台生成签名，将生成的签名和生成签名时用的参数返回，在通过wx.config接口调用验证，这个验证大概就是微信拿到wx.config接口你配的参数也生成一个签名，然后和你生成的签名比较，一样验证成功，不一样验证失败。

前台：

$(function() {var data = {};data.htmlUrl = location.href.split('#')[0];$.ajax({url: SUrl+"/wechatUtils/getSignature",type: 'post',dataType: 'json',contentType: "application/json;charset=utf-8",data: JSON.stringify(data),success: function(data) {debuggerif(data.resCode == "200") {wx.config({debug:true,appId: data.obj.appid,timestamp: data.obj.timestamp,nonceStr: data.obj.noncestr,signature: data.obj.signature,jsApiList: ['scanQRCode']});}},error: function(jqXHR, textStatus, errorThrown) {if(textStatus == "timeout") {uTip.showDialog({"tip_content": "连接超时，请检查网络"});} else {uTip.showDialog({"tip_content": "加载失败，请稍后再试"});}}});wx.ready(function() {wx.checkJsApi({jsApiList: ['scanQRCode'],success: function(res) {if(res.checkResult.scanQRCode) {return true;} else {mui.toast('您的设备不支持扫码！');}}});});wx.error(function(res) {mui.toast('初始化失败！');});
});

wx.config验证成功会执行wx.ready里面的代码，我这里主要就是执行了wx.checkJsApi，这就是验证当前的设备是否支持扫二维码的功能。如果进入wx.error，就是wx.config验证失败了。具体的接口内容可以查看微信公众平台文档。

后台：controller

package com.xtpt.frontend.modules.wechat.web;import java.util.HashMap;
import java.util.Map;import com.lpcode.modules.dto.wechat.WxAccessTokenDto;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import com.alibaba.fastjson.JSONObject;
import com.framework.core.result.Result;
import com.framework.osp.common.utils.JedisClusterUtils;
import com.lpcode.modules.dto.wechat.WxJsapiTicketDto;
import com.lpcode.modules.dto.wechat.WxSignatureDto;
import com.lpcode.modules.dto.wechat.WxTemplateMessageDto;
import com.lpcode.modules.service.impl.wechat.WeChatUtilsServiceImpl;
import com.xtpt.frontend.util.wechat.WeChatUtils;@Controller
@RequestMapping(value="/wechatUtils")
public class WxUtilsController {private static final String NONCESTR = "szrq";@Value("${wechat.appid}")private String appid;@Value("${wechat.appsecret}")private String appsecret;@ResponseBody@RequestMapping(value="/getSignature" ,method = RequestMethod.POST,produces = "application/json;charset=UTF-8", consumes = "application/json;charset=UTF-8")public Result<WxSignatureDto> getSignature(@RequestBody JSONObject requestObject){Result<WxSignatureDto> result = new Result<WxSignatureDto>();WxSignatureDto signatureDto = new WxSignatureDto();String timestamp = (System.currentTimeMillis() / 1000) + "";signatureDto.setTimestamp(timestamp);signatureDto.setAppid(appid);signatureDto.setNoncestr(NONCESTR);String accessToken = WeChatUtils.getAccessToken(appid, appsecret).getAccesstoken();    //获取access_tokenString jsapiTicket = WeChatUtils.getJsapiTicket(accessToken).getJsapiticket();         //获取jsapi_ticketsignatureDto.setSignature(WeChatUtils.getSignature(timestamp, NONCESTR, requestObject.getString("htmlUrl"), jsapiTicket)result.setResCode("200");result.setMsg("签名成功");result.setObj(signatureDto);return result;}
}

签名时是需要jsapi_ticket的，这个值是调用微信接口获取的，这个接口入参需要access_token。

access_token是通过调用微信调口获取的，这个接口入参需要appid和appsecret（微信公众号里的基本配置里可以拿到）。

后台：WeChatUtils.getSignature()生成签名的方法

 public static String getSignature(String timestamp, String nonceStr, String url, String jsapiTicket) {MessageDigest md = null;String string1 = "jsapi_ticket=" + jsapiTicket+ "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url="+ url;String signature = "";try {md = MessageDigest.getInstance("SHA");byte[] digest = md.digest(string1.getBytes());signature = byteToStr(digest);} catch (NoSuchAlgorithmException e) {e.printStackTrace();}return signature;}

这个方法就是把timestamp, nonceStr，url，jsapiTicket拼接起来生一个SHA的签名，这里注意，这几个参数不是随便拼接的，是根据参数key首字母a-z拼接的，因为参数位置不一样生成的签名也是不一样的，我这里是正确的顺序。

后台：依赖方法

    private static String byteToStr(byte[] digest) {String strDigest = "";for (int i = 0; i < digest.length; i++) {strDigest = strDigest + byteToHexStr(digest[i]);}return strDigest;}

第四步：config验证成功会执行ready

wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

微信JSSDK使用签名算法相关推荐

微信jssdk ajax 获取签名,【Golang版】微信access_token、jsapi_ticket、signature签名算法生成示例，开箱即用...
# WXToken 项目地址:[https://github.com/henson/WXToken](https://github.com/henson/WXToken) 因为手上有一个项目需要用到微 ...
介绍weixin4j实现微信JS-SDK签名算法
微信JS-SDK开发微信JS-SDK说明文档官方文档链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 ...
如何正确的在项目中接入微信JS-SDK
微信JS-SDK的功能如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...
H5与企业微信jssdk集成
H5与企业微信jssdk集成一.公众号设置注册企业微信,在应用与小程序栏目中,设置可信域名,配置公众号菜单.可信域名不得不说下,在最初开发时,认为设置并验证后,微信认证接口会实现跨域请求,其实并没 ...
微信公众号开发--微信JS-SDK扫一扫功能
首先请阅读微信JS-SDK说明文档,了解微信JS的相关说明. 根据官方的使用步骤,关键的有以下几步绑定域名(很关键) 引入JS文件(很简单) 通过config接口注入权限验证配置(很重要) ...
微信JSSDK invalid signature签名错误的解决方法
导致签名错误的原因: 微信文档给出以下原因. invalid signature签名错误:建议按如下顺序检查: 确认签名算法正确,可用 http://mp.weixin.qq.com/debug/cg ...
使用微信js-sdk上传语音并将语音下载到服务器
JSSDK使用步骤步骤一:绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在&qu ...
C# 微信JS-SDK之config接口注入权限验证invalid signature签名错误
文章目录 1.开发环境 2.我的代码 3.问题描述 4.问题分析 5.问题根源 6.解决办法记一次使用微信JS-SDK分享接口,config接口注入权限验证失败, 提示invalid signatu ...
前端vue+后台node实现获取微信用户基本信息+调用微信JS-SDK（下篇）
1. 获取微信用户基本信息 2. vue接入微信JS-SDK 环境: 前端:vue2.0 后台:node.js 公众号:微信提供的测试号以分享至微信和分享至朋友圈为例. 微信网页接入微信JS-SDK ...

微信JSSDK使用签名算法

微信JSSDK使用签名算法相关推荐

最新文章

热门文章