WeChat payment development (7) Receiving address sharing interface V2, v2

Keywords: WeChat public platform JSSDK Send to friends Receiving address sharing interface openAddress
Author: Fangbei Studio
Original text: http://www.cnblogs.com/txw1958/p/weixin-openaddress.html

In this WeChat public platform development tutorial, we will introduce how to implement the function of obtaining the delivery address on the web page.

The shipping address sharing interface was upgraded on April 13, 2016. Only the new interface can be used on May 20, 2016. This tutorial is a tutorial for the new version of the interface!

This article is divided into the following two parts:

1. WeChat JS-SDK

1. Obtain Access Token

The method of obtaining access token is introduced earlier. For details, see WeChat Public Platform Development (26) ACCESS TOKEN

2. Get jsapi_ticket

Before generating a signature, you must first understand jsapi_ticket. jsapi_ticket is a temporary ticket used by public accounts to call the WeChat JS interface. Under normal circumstances, the validity period of jsapi_ticket is 7200 seconds, which is obtained through access_token. Since the number of api calls to obtain jsapi_ticket is very limited, frequent refresh of jsapi_ticket will result in restricted api calls and affect their own business. Developers must cache jsapi_ticket globally in their own services.

Refer to the following document to obtain the access_token (validity period is 7200 seconds, developers must cache access_token globally in their own services):
Use the access_token obtained in the first step to request jsapi_ticket using http GET method (validity period is 7200 seconds, developers You must cache jsapi_ticket globally in your own service), the interface address is as follows

https:<span>//</span><span>api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi</span>

Successfully returns the following JSON:

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

After obtaining jsapi_ticket, you can generate a signature for JS-SDK permission verification.

3. Signature algorithm implementation

The signature generation rules are as follows: fields involved in the signature include noncestr (random string), valid jsapi_ticket, timestamp (timestamp), url (URL of the current web page, excluding # and its following parts). After sorting all the parameters to be signed according to the ASCII code of the field name from small to large (lexicographic order), use the URL key-value pair format (i.e. key1=value1&key2=value2...) to concatenate them into a string string1. It should be noted here that all parameter names are lowercase characters. Perform sha1 encryption on string1, use original values ??for field names and field values, and do not perform URL escaping.

That is, signature=sha1(string1). Example:

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

Step 1. Sort all the parameters to be signed according to the ASCII code of the field name from small to large (lexicographic order), and use the URL key-value pair format (i.e. key1=value1&key2=value2...) to concatenate them into a string. string1：

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

Step 2. Sign string1 with sha1 and get signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

The complete code is as follows

<?<span>php
</span><span>class</span><span> JSSDK {
  </span><span>private</span> <span>$appId</span><span>;
  </span><span>private</span> <span>$appSecret</span><span>;

  </span><span>public</span> <span>function</span> __construct(<span>$appId</span>, <span>$appSecret</span><span>) {
    </span><span>$this</span>->appId = <span>$appId</span><span>;
    </span><span>$this</span>->appSecret = <span>$appSecret</span><span>;
  }

  </span><span>public</span> <span>function</span><span> getSignPackage() {
    </span><span>$jsapiTicket</span> = <span>$this</span>-><span>getJsApiTicket();

    </span><span>//</span><span> 注意 URL 一定要動態(tài)獲取，不能 hardcode.</span>
    <span>$protocol</span> = (!<span>empty</span>(<span>$_SERVER</span>['HTTPS']) && <span>$_SERVER</span>['HTTPS'] !== 'off' || <span>$_SERVER</span>['SERVER_PORT'] == 443) ? "https://" : "http://"<span>;
    </span><span>$url</span> = "<span>$protocol$_SERVER</span>[HTTP_HOST]<span>$_SERVER</span>[REQUEST_URI]"<span>;

    </span><span>$timestamp</span> = <span>time</span><span>();
    </span><span>$nonceStr</span> = <span>$this</span>-><span>createNonceStr();

    </span><span>//</span><span> 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序</span>
    <span>$string</span> = "jsapi_ticket=<span>$jsapiTicket</span>&noncestr=<span>$nonceStr</span>&timestamp=<span>$timestamp</span>&url=<span>$url</span>"<span>;

    </span><span>$signature</span> = <span>sha1</span>(<span>$string</span><span>);

    </span><span>$signPackage</span> = <span>array</span><span>(
      </span>"appId"     => <span>$this</span>->appId,
      "nonceStr"  => <span>$nonceStr</span>,
      "timestamp" => <span>$timestamp</span>,
      "url"       => <span>$url</span>,
      "signature" => <span>$signature</span>,
      "rawString" => <span>$string</span><span>
    );
    </span><span>return</span> <span>$signPackage</span><span>; 
  }

  </span><span>private</span> <span>function</span> createNonceStr(<span>$length</span> = 16<span>) {
    </span><span>$chars</span> = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"<span>;
    </span><span>$str</span> = ""<span>;
    </span><span>for</span> (<span>$i</span> = 0; <span>$i</span> < <span>$length</span>; <span>$i</span>++<span>) {
      </span><span>$str</span> .= <span>substr</span>(<span>$chars</span>, <span>mt_rand</span>(0, <span>strlen</span>(<span>$chars</span>) - 1), 1<span>);
    }
    </span><span>return</span> <span>$str</span><span>;
  }

  </span><span>private</span> <span>function</span><span> getJsApiTicket() {
    </span><span>//</span><span> jsapi_ticket 應(yīng)該全局存儲與更新，以下代碼以寫入到文件中做示例</span>
    <span>$data</span> = json_decode(<span>file_get_contents</span>("jsapi_ticket.json"<span>));
    </span><span>if</span> (<span>$data</span>->expire_time < <span>time</span><span>()) {
      </span><span>$accessToken</span> = <span>$this</span>-><span>getAccessToken();
      </span><span>//</span><span> 如果是企業(yè)號用以下 URL 獲取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";</span>
      <span>$url</span> = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=<span>$accessToken</span>"<span>;
      </span><span>$res</span> = json_decode(<span>$this</span>->httpGet(<span>$url</span><span>));
      </span><span>$ticket</span> = <span>$res</span>-><span>ticket;
      </span><span>if</span> (<span>$ticket</span><span>) {
        </span><span>$data</span>->expire_time = <span>time</span>() + 7000<span>;
        </span><span>$data</span>->jsapi_ticket = <span>$ticket</span><span>;
        </span><span>$fp</span> = <span>fopen</span>("jsapi_ticket.json", "w"<span>);
        </span><span>fwrite</span>(<span>$fp</span>, json_encode(<span>$data</span><span>));
        </span><span>fclose</span>(<span>$fp</span><span>);
      }
    } </span><span>else</span><span> {
      </span><span>$ticket</span> = <span>$data</span>-><span>jsapi_ticket;
    }

    </span><span>return</span> <span>$ticket</span><span>;
  }

  </span><span>private</span> <span>function</span><span> getAccessToken() {
    </span><span>//</span><span> access_token 應(yīng)該全局存儲與更新，以下代碼以寫入到文件中做示例</span>
    <span>$data</span> = json_decode(<span>file_get_contents</span>("access_token.json"<span>));
    </span><span>if</span> (<span>$data</span>->expire_time < <span>time</span><span>()) {
      </span><span>//</span><span> 如果是企業(yè)號用以下URL獲取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";</span>
      <span>$url</span> = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=<span>$this</span>->appId&secret=<span>$this</span>->appSecret"<span>;
      </span><span>$res</span> = json_decode(<span>$this</span>->httpGet(<span>$url</span><span>));
      </span><span>$access_token</span> = <span>$res</span>-><span>access_token;
      </span><span>if</span> (<span>$access_token</span><span>) {
        </span><span>$data</span>->expire_time = <span>time</span>() + 7000<span>;
        </span><span>$data</span>->access_token = <span>$access_token</span><span>;
        </span><span>$fp</span> = <span>fopen</span>("access_token.json", "w"<span>);
        </span><span>fwrite</span>(<span>$fp</span>, json_encode(<span>$data</span><span>));
        </span><span>fclose</span>(<span>$fp</span><span>);
      }
    } </span><span>else</span><span> {
      </span><span>$access_token</span> = <span>$data</span>-><span>access_token;
    }
    </span><span>return</span> <span>$access_token</span><span>;
  }

  </span><span>private</span> <span>function</span> httpGet(<span>$url</span><span>) {
    </span><span>$curl</span> =<span> curl_init();
    curl_setopt(</span><span>$curl</span>, CURLOPT_RETURNTRANSFER, <span>true</span><span>);
    curl_setopt(</span><span>$curl</span>, CURLOPT_TIMEOUT, 500<span>);
    curl_setopt(</span><span>$curl</span>, CURLOPT_SSL_VERIFYPEER, <span>false</span><span>);
    curl_setopt(</span><span>$curl</span>, CURLOPT_SSL_VERIFYHOST, <span>false</span><span>);
    curl_setopt(</span><span>$curl</span>, CURLOPT_URL, <span>$url</span><span>);

    </span><span>$res</span> = curl_exec(<span>$curl</span><span>);
    curl_close(</span><span>$curl</span><span>);

    </span><span>return</span> <span>$res</span><span>;
  }
}</span>

2. Receiving address sharing interface

1. Introduction

WeChat delivery address sharing means that users open a webpage in the WeChat browser and fill in the address. They can then quickly select without filling in the address, and can also add and edit it. This address is a user attribute and can be shared on the web pages of various merchants. Support native controls to fill in addresses, and the address data will be passed to the merchant.

Address sharing is based on the WeChat JavaScript API and can only be used in the WeChat built-in browser. Calls from other browsers are invalid. At the same time, WeChat version 5.0 is required to support it. It is recommended to use the user agent to determine the user's current version number before calling the address interface. Taking the iPhone version as an example, you can obtain the following WeChat version example information through useragent: "Mozilla/5.0(iphone;CPU iphone OS 5_1_1 like Mac OS For the version number of WeChat installed by the user, the merchant can determine whether the version number is higher than or equal to 5.0.

Address format
The data fields used for WeChat address sharing include:

• Consignee’s name
• Regions, provinces and municipalities at three levels
• Detailed address
• Postcode
• Contact number

Among them, the region corresponds to the national standard three-level area code, such as "Guangdong Province-Guangzhou City-Tianhe District", and the corresponding postal code is 510630. Reference link for details: http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201401/t20140116_501070.html

2. Bind domain name

First log in to the WeChat public platform and enter the "Function Settings" of "Official Account Settings" to fill in the "JS Interface Security Domain Name".

3. Obtain signature package

<?<span>php
</span><span>require_once</span> "jssdk.php"<span>;
</span><span>$jssdk</span> = <span>new</span> JSSDK("yourAppID", "yourAppSecret"<span>);
</span><span>$signPackage</span> = <span>$jssdk</span>-><span>GetSignPackage();
</span>?>

4. Import JS files

Introduce the following JS file into the page that needs to call the JS interface:

Special note: The JS-SDK version requires http://res.wx.qq.com/open/js/jweixin-1.1.0.js

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

5. Inject permission verification configuration through the config interface

All pages that need to use JS-SDK must first inject configuration information, otherwise they will not be called.

        <script><span>
          wx.config({
            debug: </span><span>false</span><span>,
            appId: </span>'<?php echo $signPackage["appId"];?>'<span>,
            timestamp: </span><?php echo $signPackage["timestamp"];?><span>,
            nonceStr: </span>'<?php echo $signPackage["nonceStr"];?>'<span>,
            signature: </span>'<?php echo $signPackage["signature"];?>'<span>,
            jsApiList: [
              </span><span>//</span><span> 所有要調(diào)用的 API 都要加到這個列表中</span>
                'checkJsApi'<span>,
                </span>'openAddress'<span>,
              ]
          });
        </span></script>

5. Handle successful verification through ready interface

需要在頁面加載時就調(diào)用，需要把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行

wx.ready(<span>function</span><span> () {
});</span>

5.1 通過checkJsApi判斷當(dāng)前客戶端版本是否支持分享參數(shù)自定義

<span> wx.checkJsApi({
                jsApiList: [
                    </span>'openAddress'<span>,
                ],
                success: </span><span>function</span><span> (res) {
                    alert(JSON.stringify(res));
                }
            });</span>  

5.3. 實現(xiàn)收貨地址共享

<span>            wx.openAddress({
              trigger: </span><span>function</span><span> (res) {
                alert(</span>'用戶開始拉出地址'<span>);
              },
              success: </span><span>function</span><span> (res) {
                alert(</span>'用戶成功拉出地址'<span>);
                alert(JSON.stringify(res));
                document.form1.address1.value         </span>=<span> res.provinceName;
                document.form1.address2.value         </span>=<span> res.cityName;
                document.form1.address3.value         </span>=<span> res.countryName;
                document.form1.detail.value           </span>=<span> res.detailInfo;
                document.form1.national.value         </span>=<span> res.nationalCode;
                document.form1.user.value            </span>=<span> res.userName;
                document.form1.phone.value            </span>=<span> res.telNumber;
                document.form1.postcode.value         </span>=<span> res.postalCode;
                document.form1.errmsg.value         </span>=<span> res.errMsg;
                document.form1.qq.value             </span>= 1354386063<span>;
              },
              cancel: </span><span>function</span><span> (res) {
                alert(</span>'用戶取消拉出地址'<span>);
              },
              fail: </span><span>function</span><span> (res) {
                alert(JSON.stringify(res));
              }
            });</span>

?

返回說明

?

三、實現(xiàn)效果

????

?