Micro letter JSSdk achieve sharing

1 Overview

Micro-channel sharing server role is to provide services for users to show a more friendly when the client from the website and page links in the secondary share micro-channel browser. To achieve the second micro-channel sharing feature requires JS-SDK to develop.

Micro letter JS-SDKis micro-channel public platform for Web developers to provide web-based development within the micro-channel kits. Micro-channel JS-SDKmany functions.
By using micro letter JS-SDK, Web developers can make use of micro-channel efficient use of the ability to take pictures, pick, voice, location, and other mobile phone systems, and can be used directly micro-channel sharing, sweep the ability of card coupons, payments and other micro-channel-specific , provide a better web experience for users of micro letter.

2. A flowchart

Step 3. The specific functions implemented secondary micro channels share

Step one: binding domain (micro-channel public platform configuration)

Micro-channel public platform to be logged into the "public number is set," the "feature set" in fill "JS interface security domain."

Note: Sign in to see the corresponding interface privileges "Developer Center."

We need to configure white list

Step two: the introduction of JSfile (need to share the page)

The need to call JSthe introduction of the following interfaces page JSfile, (support https): http://res.wx.qq.com/open/js/jweixin-1.4.0.js

To further enhance the stability of services, when these resources are not accessible, you can change the access: http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (support https).

    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

Step Three: The configauthentication configuration interface injection permission (micro-channel sharing server provides the following main parameter generation)

All need to use JS-SDKthe page must first injection configuration information, otherwise it will not call

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

Signature Algorithm see text at the end of Appendix 1 , all the JSlist of interfaces see the end of this document Appendix 2

Step Four: ready interface process successfully authenticated by (page configuration to be sharing the second page information sharing, such as a title, a thumbnail, description, etc.)

    wx.ready(function(){
      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        # 分享到朋友圈按钮点击状态及自定义分享内容
        wx.onMenuShareTimeline({
          title: '', // 分享标题
          link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: '', // 分享图标
          success: function () {
          // 用户点击了分享后执行的回调函数
            }
        });
    
        # 分享到QQ按钮点击状态及自定义分享内容
        wx.onMenuShareQQ({
          title: '', // 分享标题
          desc: '', // 分享描述
          link: '', // 分享链接
          imgUrl: '', // 分享图标
          success: function () {
          // 用户确认分享后执行的回调函数
          },
          cancel: function () {
          // 用户取消分享后执行的回调函数
          }
        });
    
        # 分享到腾讯微博按钮点击状态及自定义分享内容
        wx.onMenuShareWeibo({
          title: '', // 分享标题
          desc: '', // 分享描述
          link: '', // 分享链接
          imgUrl: '', // 分享图标
          success: function () {
          // 用户确认分享后执行的回调函数
          },
          cancel: function () {
          // 用户取消分享后执行的回调函数
          }
        });
    
        # 分享到QQ空间按钮点击状态及自定义分享内容
        wx.onMenuShareQZone({
          title: '', // 分享标题
          desc: '', // 分享描述
          link: '', // 分享链接
          imgUrl: '', // 分享图标
          success: function () {
          // 用户确认分享后执行的回调函数
          },
          cancel: function () {
          // 用户取消分享后执行的回调函数
          }
        });
    
    });

4. How to verify the configuration for permission (micro-channel sharing server business functions)

I.e., the following parameters

    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: [] // 必填，需要使用的JS接口列表这里我们使用微信分享相关的js接口列表["checkJsApi","onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo"] 
    });

It is mainly explained signaturethe generation process

1. Obtainaccess_token

2. Using the acquired access_tokenacquisitionjsapi_ticket

3. The parameters of the URL of the sorted key format (i.e. key1=value1&key2=value) spliced to a string, sha1a signature, to givesignature

4.1 Gettingaccess_token

access_tokenIs a globally unique interface call number of public credentials are required to use public call number for each interface access_token. Developers need to be properly preserved. access_tokenTo preserve the memory of at least 512 characters of space. access_tokenThe validity period is currently two hours, to be regularly updated, repeat the acquisition will lead to the last acquisition of access_tokenfailure.

Interface call requesting explanation

## https请求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

Parameter Description

parameter	Do you have to	Explanation
grant_type	Yes	Get access_tokento fill inclient_credential
appid	Yes	Third-party users only certificate
secret	Yes	The only third-party user credential key thatappsecret

Returning to the description

Under normal circumstances, the following micro-channel return JSONdata packet to the public number:

    {
        "access_token":"ACCESS_TOKEN",
        "expires_in":7200
    }

Parameter Description

parameter	Explanation
access_token	To obtain credentials
expires_in	Certificate valid time, unit: seconds

4.2 Getsjsapi_ticket

jsapi_ticketIt is calling for public micro-channel number JSinterim bills interface. Under normal circumstances, jsapi_ticketvalid for 7200 seconds through access_tokento get. Since the acquisition jsapi_ticketof apithe number of calls is very limited, frequently refreshed jsapi_ticketlead to apicalling restricted, affecting their business, the developer must in their service global cache jsapi_ticket.

1. Refer to the following documentation for access_token(valid for 7200 seconds, the developer must own service in the global cache access_token): https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
2. The first step is to get with access_tokenthe use of http GETways to request jsapi_ticket(valid for 7200 seconds, the developer must own service in the global cache jsapi_ticket): https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type = jsapi

Success returns the following JSON:

    {
      "errcode":0,
      "errmsg":"ok",
      "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
      "expires_in":7200
    }

Get jsapi_ticketafter, you can generate JS-SDKa signature verification of the authority.

4.3 generates a signature

The signature generation rules are as follows: Field participating signatures comprises noncestr(random string), valid jsapi_ticket, timestamp(timestamp), url(the URL of the current page to be shared, and does not include # later). After all of the parameters to be signed in ascending order (lexicographical) the ASCII code field name, value pairs using the format of the URL (i.e. key1=value1&key2=value2…) spliced into the string string1. It should be noted that all parameter names are lowercase characters. To string1make sha1encryption, field names and field values have adopted the original value, not URLescaped.

Ie signature=sha1(string1). Example:

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=当前待分享网页URL

Step 1. for all parameters to be signed in accordance with the field name ASCIIformat code in ascending order (lexicographic), the key-value pairs using the URL (i.e. key1=value1&key2=value2…) spliced to a string string1:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

Step 2. to string1be sha1signed to obtain signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

Precautions

1. The signature noncestrand timestampmust be wx.configin nonceStrand timestampthe same.
2. The signature urlmust be a call to JSthe interface of a full page URL.
3. For security reasons, developers must implement logic signature on the server side.

The final results are as follows