all articles

WeChat js sdkを使ってみた

2016-01-12 @sunderls

wechat jssdk 微信 js

guide(中国語): https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

guide(英語): http://admin.wechat.com/wiki/index.php?title=JS_SDK_DOCUMENT#Step_1:_Binding_Official_Account_to_Domains

正式にいうと、WeChat js sdkを利用するには、「公式アカウント」が必要です。 でもそれを申請するには大変で、WeChatがテストアカウントを提供してて、つまり、公式アカウントがなくてもapiテストすることができる。

さー始めようー

まずWeChatを入手

appstoreで、「WeChat」とか「微信」を検索してアカウント作ってください

テストアカウントを作る

http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 上記のurlで、QRcodeをWeChatでスキャンしたら、新規の疑似公式アカウントは作られます。

終わったあと、ページにapp と secretは表示される。

疑似アカウントと友達になる

上記ページに一つのQRコードがあって、WeChatでスキャンしたら、疑似アカウントと友達になれる。

domainをbind

「JS借口安全域名」のところでテストしたいdomainを入力してください。これからの開発はこのdomainに限ります。

htmlを変更

htmlにjs sdkを入れます。guideにも書いてありますけど、自分のコードを貼っときます

wx.config({
    debug: false,// trueにしたらwechatのapiは全部アラートでレスポンスが来る
    appId: '', // テストアカウントページのappID
    timestamp: 1452576776, // signature生成するときのtimestamp
    nonceStr: 'abcde', // signature生成するときのrandom string
    signature: '???', // signature生成するのは下になります。
    jsApiList: ['scanQRCode'] // とりあえずQRスキャンを喚起する
});
wx.ready(function(){
    wx.scanQRCode({
        needResult: 0,
        scanType: ["qrCode","barCode"]
        success: function (res) {
            var result = res.resultStr;
        }
    });

});

signatureを生成するには

1. まずaccess tokenを取得

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

APPIDとAPPSECRETは上記の疑似アカウントページで見れる

2. access tokenを利用してapi_ticketを取得

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

レスポンスにあるticketはapi_ticketです

3. signatureを生成

四つの文字列が必要

  • nonceStr: 任意で
  • jsapi_ticket: 上記のステップで取得できたapi_ticket
  • timestamp: 任意で
  • url: テストするためのfull url, location.href.split('#')[0]と完全一致しないといけない slashあるかどうかに注意が必要

上記の四つパラメーターをGET paramの形で一つstringに連結して

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

さらに sha1を実行すればsignatureはゲット

確認するには

これで開発完了、確認するのは簡単です。WeChatの誰か(生成された疑似アカウントにも大丈夫)にsignature中のfull urlを送信したあとそのリンクをタップしたら、WeChatのwebviewが開く。 うまくいけば、ページが表示したあとすぐQRスキャナーが表示されるはずです。

以上。