微信开发——前期配置

  本文讲前端如何独立的进行微信开发(没有搭建后台,如何通过config接口注入权限验证配置)。

  1、申请微信公众号成功后,进入微信公众平台(https://mp.weixin.qq.com/),登录。

  2、在开发者工具中选择公众平台测试账号,点击进入,微信扫码授权登录。

  3、进入测试号页面,得到测试号信息:

  4、完成JS-SDK使用权限签名算法。

  首先获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):打开链接https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET,链接中的APPID和APPSECRET用步骤3中得到的测试号信息对应的替换,即可成功返回access_token,比如我的返回数据如下:

{
access_token: "br8H90LtER9bYV2X6w21gn2ncpNsk47jJqlunDxYHVVLqsjjP99OJd3cLTxrNg_xp7Pxry_aZ5JBVClfjrXE07m9j3LkSkFRDvDhmSK3Lp0BwsafdgTD0ZrnaDnkd0RuUCMjAJANVF",
expires_in: 7200
}

  然后获取jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):打开链接https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi,链接中的ACCESS_TOKEN用上一步获取的access_token替换,即可成功返回jsapi_ticket,比如我的返回数据如下:

{
errcode: 0,
errmsg: "ok",
ticket: "kgt8ON7yVITDhtdwci0qefauZHtIntmVAA1tkdyuhJBV868ar6VeAiJpPeg-hDCbtfKfWaHOGS28YeeeqPyHTQ",
expires_in: 7200
}

  然后按照微信文档说明的签名算法获取signature。

  下面我们分解一下该签名算法:

  首先准备原材料,一共需要四个原料:noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。jsapi_ticket在我们完成以上步骤后就得到了,url就是我们开发的页面的url,那么我们实际上只差随机字符串和时间戳。

  现在我们通过以下代码制造一个随机字符串:

function generateRandomString() {
     return (Math.random().toString(36).substr(2));
}

var noncestr = encodeURIComponent(generateRandomString());

  通过微信文档示例,发现时间戳单位为秒,于是我们通过以下代码实现:

var timestamp1 = new Date().getTime()/1000;
var timestamp = timestamp1.toFixed(0);

  那么现在原材料备齐!

  接下来按照规则处理原材料。首先完成拼接:

var array = new Array(jsapi_ticket, noncestr, timestamp, url);
var str = ‘jsapi_ticket=‘ + array[0] + ‘&‘ +
          ‘noncestr=‘ + array[1] + ‘&‘ +
          ‘timestamp=‘ + array[2] + ‘&‘ +
          ‘url=‘ + array[3];

  然后对上面拼接完的字符串进行sha1加密,即可得到signature。但是怎么加密呢?经过实践发现,我们可以使用cryptoJS,参考cryptoJS(https://github.com/brix/crypto-js)在github上的说明,通过以下代码加密:

var sign = CryptoJS.SHA1(str).toString();

  5、参考微信文档JSSDK使用步骤,前2步就不说了,主要说一下步骤三,通过config接口注入权限验证配置。通过本文以上步骤,我们可以直接配置如下:

wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: ‘你的测试号appid‘, // 必填,公众号的唯一标识
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: noncestr, // 必填,生成签名的随机串
        signature: sign, // 必填,签名,见附录1
        jsApiList: [‘chooseImage‘] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

  6、开启服务器,访问页面,just enjoy your coding!

  附录:

一、注意事项:

  1、开发页面的url要配置到上文3中提到的js接口安全域名中(否则config配置时会报错invalid url domain);

  2、手机微信要关注测试公众号,否则访问页面后无法体验设计到微信接口的功能。

二、参考文献:

  1、微信JS-SDK说明文档(http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html);

  2、crypto-js(https://github.com/brix/crypto-js)。

三、感谢老大cyn的指导。

四、demo代码如下.

html文件:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
    <title>test</title>
    <link rel="stylesheet" href="../../dist/css/index.css" />
    <script src="../../dist/lib/jquery/jquery-2.2.0.min.js"></script>
    <script src="../../dist/lib/wx/jweixin-1.0.0.js"></script>
    <script src="../../dist/lib/crypto-js.js"></script>
    <script src="../../dist/js/main.js"></script>
</head>

<body>
hello world!
</body>
</html>

js文件:

/**
 *
 * @authors lovelyun
 *
 */
$(function () {
    var data = {
        token: {
            access_token: "your token",
            expires_in: 7200
        },
        ticket: {
            errcode: 0,
            errmsg: "ok",
            ticket: "your ticket",
            expires_in: 7200
        }
    };

    var noncestr = encodeURIComponent(generateRandomString());
    var timestamp1 = new Date().getTime()/1000;
    var timestamp = timestamp1.toFixed(0);
    var jsapi_ticket = data.ticket.ticket;
    var url = ‘http://192.168.2.109:3000/dist/html/index.html‘;
    var array = new Array(jsapi_ticket, noncestr, timestamp, url);
    var str = ‘jsapi_ticket=‘ + array[0] + ‘&‘ +
        ‘noncestr=‘ + array[1] + ‘&‘ +
        ‘timestamp=‘ + array[2] + ‘&‘ +
        ‘url=‘ + array[3];
    var sign = CryptoJS.SHA1(str).toString();

    function generateRandomString() {
        return (Math.random().toString(36).substr(2));
    }

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: ‘your appid‘, // 必填,公众号的唯一标识
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: noncestr, // 必填,生成签名的随机串
        signature: sign, // 必填,签名,见附录1
        jsApiList: [‘chooseImage‘] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });

});

时间: 2024-10-22 05:41:36

微信开发——前期配置的相关文章

企业微信开发基础配置

企业微信,这玩意和钉钉基本没区别,主打企业移动办公,弱化了社交,强化了企业服务 起步比钉钉晚,格局分布基本一样,自建应用和第三方应用 开发第三方应用就不说了,下面说说开发配置自建应用吧: 1.注册登录企业微信,创建公司(这里面会有个企业id需要记下来,这个id后面掉微信接口要用): 2.创建自建应用,填写相关信息,(名称,图标,可见用户群体)如下: 3.创建好应用进来以后,有两个参数(后面和微信接口对接要用的)和两个设置非常重要:  至此等到了三个id分别如下: CorpID(企业id)----

微信开发测试号配置

1.进入微信测试平台 2.配置接口信息 URL:开发模式下的验证token的url token:‘token’ 3.网页服务-->网页账号 --> 修改授权回调页面域名:[此处的回调域名是你的域名,不能添加http://字样,只需要写域名就可以了] 这时候在手机微信平台就可以看到开发的网页内容了

.NET 微信开发 JSSDK配置 wx.config调用 invalid signature签名错误分析

官方文档 要认真看一遍之后,开始搞 JSSDK是网页调用微信功能的配置文件.在这里浪费了大量时间  所以记录一下.(吐槽下微信返回的错误信息,也是没谁了...) 页面先配置一下.注释里几个参数,可以用ajax会获取. <script type="text/javascript"> wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端

(一)微信公众号开发基本配置

作为用代码进行微信开发者或要实现事件响应等功能,微信开发基本配置是必不可少的环节,本文大致梳理开发配置的流程. 1.登入微信公众平台:开发 ---> 基本配置   2.在基本配置页面有“服务器配置”,默认是未启用状态,需要我们先点击“修改配置”进行相关项目填写 3.填写以下项目内容 URL:必须以http://开头,目前仅支持80端口,服务器地址必须是可访问的有效地址(注:用本文中URL举例,曾经看到一篇博文将URL地址填为http://tx.heivr.com/token,但亲测实际开发中无法

微信开发(五)微信消息加解密 (EncodingAESKey)

div#cpmenu {height:200px;float:left;} div#cpcontent {height:200px;width:150px;float:left;} 文章作者:松阳 原文链接:http://blog.csdn.net/fansongy/article/details/44005301 消息体加密 随着微信服务开发在越来越多的领域应用,应用的安全性逐渐被重视起来.本文主要阐述如何为微信的消息加密的原理与Java版本的实现. 原理 做过微信开发的朋友们都知道,微信使用

Force.com - 微信接口后台开发与配置

为寻找国内免费云资源作为微信后台,花了一天时间试用SinaAppEngine(SAE),调试太不方便用户体验差.新浪作为媒体公司技术功底经不起考验,亚马逊能推出AWS,新浪还不行!更好选项是百度BaiduAppEngine(BAE),但最近尽然开始收费,还是安心回到force.com,至少老外承诺免费的东西一直免费且可靠. 第一步,申请force.com账号,请至developer.force.com申请,如是www.salesforce.com申请下来的是作为客户的账号,不适合开发人员:第二步

微信开发配置JSSDK,注入权限验证,以及invalid signature签名错误解决

在微信开发中很多功能都要用到微信JSSDK,关于JSSDK的使用,微信官方的文档已经比较详细,一定要仔细去看文档. <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 我们先进入微信SDK的JS文件.在页面中使用ajax注入权限验证,关于后台的验证以及签名算法,官方文档写的很详细,也有demo可以查看. $(function(){ //var url = window.lo

微信开发配置文档

微信开发配置文档 请求SDK接口 1, 绑定域名 公众号设置 菜单 --> 功能设置 绑定域名 : http://www.xxxxx.com2, 记录应用ID : AppID(应用ID)wxd9c94eba232190a1 应用密码: 8ff9f1fd268bdb643fc27354811d973a3, 找到开发者工具 --> 开发者文档 -->微信网页开发 -->JS-SDK说明文档 页面底部 下载 sample.php 示例DEMO 打开sample.php 设置 APPID

微信支付开发1 微信支付URL配置

本文介绍微信支付申请时如何设置授权目录及URL. 一.选择支付类型 目前有两种支付类型 JS API网页支付 Native原生支付 如果没有特殊要求,两种都勾选. 二.支付授权目录 目前可以选择http还是https协议,没有特别要求,选择http.对安全要求比较高的企业,请选择https. 支付授权目录填写自己公司的域名加上目录,目录可以是不存在的目录,例如wxpay. 一个完整的目录参考如下: http://www.doucube.com/wxpay/ 蓝色部分表示要选择的. 红色部分表示要