微信のウェブページの開発の検証とインタフェースの経験の共有を呼び出します

微信共有のタイトル、アイコンなどをカスタマイズするには、微信対応のインタフェースを呼び出す必要があります.本稿では、主に微信インタフェース権限の検証とその後のインタフェースの呼び出しの過程について説明します.
全体的な考え方.
まず、微信公衆バックグラウンドでjsインタフェースセキュリティドメイン名を構成し、次に、フロントエンドのWebページにjsファイルを導入する必要がある:http://res.wx.qq.com/open/js/jweixin-1.2.0.js.
その後、微信ドキュメントは、権限検証のためのconfigインタフェースを提供し、その後、フロントエンドのWebページで参照する必要があります.

wx.config({
    debug: true, //       ,     api         alert  ，         ，   pc   ，       log  ，  pc      。
    appId: '', //   ，        
    timestamp: , //   ，        
    nonceStr: '', //   ，        
    signature: '',//   ，  ，   1
    jsApiList: [] //   ，     JS    ，  JS       2
});

ただし、上記の内容は、サーバ側で微信提供の特定のアルゴリズムを実行して生成し、フロントエンドのWebページに戻る必要があります.
コード全体論理部
次に、サーバ側とフロントエンドを含む検証ロジック全体について説明します.

公衆番号のappIdとappSecretに従って、まずマイクロ通信サーバからaccessを取得する.tokenは、7200秒ごとに再取得するグローバルキャッシュが必要です.

access_によるtokenは微信サーバからjsapiを取得するticketは、プログラム変数にグローバルにキャッシュし、7200秒ごとに再取得する必要があります.

jsapi_によるとticketや他のランダム文字列、タイムスタンプ、urlアドレスなどは、微信が提供するアルゴリズムを実行し、signatureを生成します.

このとき、タイムスタンプ、ランダム文字列、署名などの情報を上のフロントエンドのjsに書き込み、フロントエンドのWebページを参照すればよい.

フロントエンドのWebページが微信のブラウザで開くと、微信は私たちが与えた署名、ランダム文字列、タイムスタンプなどの情報を通じてアルゴリズムを実行するに違いありません.結果が一致すれば、wx.readyインタフェースで処理した後、論理的になります.結果が一致しない場合は、wx.errorインタフェースが呼び出されます.

の検証に成功すると、微信が持参した各種インタフェース、例えば共有、スキャンなどを呼び出すことができる.

コード詳細共有-node
私のバックエンドはnodeで実現されているので、nodeのコードを紹介します.
ステップ1、アクセスの取得token
注意appIdとappSecretは、自分の公衆番号の対応する文字に置き換える必要があります.

var wxAssToken = {
    appId: appId,
    appSecret: appSecret,
    assToken: '',
    timeStamp: Date.now(),
    getAssToken: function(cb){
        if (this.assToken && (Date.now() - this.timeStamp < 7000000)) {
            console.log('       assToken');
            cb(this.assToken);
        } else {
            console.log('    assToken');
            var link = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + this.appId + '&secret=' + this.appSecret;
            var that = this;
            https.get(link, function(res){
                var body = [];
                res.on('data', function(chunk){
                    body.push(chunk);   
                });
                res.on('end', function(){
                    body = Buffer.concat(body).toString();
                    that.assToken = JSON.parse(body).access_token;
                    that.timeStamp = Date.now();
                    cb(that.assToken);
                });
            });
        }
    }
};

私は直接新しいオブジェクトを作成しました.オブジェクトの中で微信をキャッシュできるaccessです.tokenは、呼び出し時にこのオブジェクトのgetAssTokenメソッドを直接使用し、コールバック関数の最初のパラメータがaccess_である.token.7000秒間隔ごとに、微信サーバから再要求されます.
ステップ2、jsapiを取得するticket
最初のステップでアクセスを取得tokenロジックは完全に同じであり、以下のコードでは署名を生成する関数signを参照して後述する.

var wxJsTic = {
    jsTic: '',
    timeStamp: Date.now(),
    sign: {},
    getJsTic: function(assToken, cb){
        if (this.jsTic && (Date.now() - this.timeStamp < 7000000)) {
            console.log('       sign');
            cb(this.sign);
        } else {
            console.log('    sign');
            var link = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + assToken + '&type=jsapi';
            var that = this;
            https.get(link, function(res){
                var body = [];
                res.on('data', function(chunk){
                    body.push(chunk);   
                });
                res.on('end', function(){
                    body = Buffer.concat(body).toString();
                    that.jsTic = JSON.parse(body).ticket;
                    that.timeStamp = Date.now();
                    that.sign = sign(that.jsTic, 'https://www.84games.com/jike/');
                    cb(that.sign);
                });
            });

        }
    }
};

ステップ3、署名アルゴリズムセクション
この部分の微信公式にはphp、java、nodejs、pythonのコードを含むインスタンスコードが提供されており、ドキュメントに直接アクセスしてダウンロードすればよい.私は直接引用した微信公式の関数です.

var sign = require('./sign.js');

ステップ4、Webリクエスト時にsignオブジェクトのパラメータをフロントエンドに戻せばよい
まず、関数getSignを定義します.この関数では、最初のステップと2番目のステップの関数が呼び出され、コールバック関数の最初のパラメータであるアルゴリズムによって生成されたsignオブジェクトが呼び出されます.

function getSign(cb){
    wxAssToken.getAssToken(function(assToken){
        wxJsTic.getJsTic(assToken, function(sign){
            cb(sign);
        });
    });
}

module.exports = getSign;

次に、ルーティング関数で特定のjsファイルをフロントエンドに直接返すとよい.次のgetWeixinKey関数は、上記のコードから導出されたgetSignメソッドであり、以下はexpressを用いてサーバ側プログラムを行い、main.jsファイルを要求する場合、上記のアルゴリズムで生成された部分を先にこのファイルに置き換えてからデータを返すことを示す.

var getWeixinKey = require('./getWeixinKey');

router.get('/main.js', function(req, res){
    getWeixinKey(function(sign){
        fs.readFile(path.join(__dirname, './main.js.txt'), function(err, data){
            if (err) throw err;
            data = data.toString().replace('{{noncestr}}', sign.nonceStr).replace('{{timestamp}}', sign.timestamp).replace('{{signature}}', sign.signature);
            res.send(data);
        });
    });
});

ステップ5およびステップ6、フロントエンド検証セクション
前の4つのセクションはサーバ側で行われ、5番目のステップと6番目のステップはフロントエンドのWebページに戻ります.

//     ，                          
wx.config({
    debug: true,
    appId: 'wx175e7902f419b624',
    timestamp: '{{timestamp}}',
    nonceStr: '{{noncestr}}',
    signature: '{{signature}}',
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
});

//       ，           ，                     
wx.ready(function(){
    console.log('ready');           
    wx.onMenuShareTimeline({
        title: '         ',
        link: '    url  ',
        imgUrl: '    ',
        success: function(){ //           
            console.log('share success');
        },
        cancel: function(){ //          
            console.log('share cancel');
        }
    });

    wx.onMenuShareAppMessage({
        title: '        ',
        desc: '        ',
        link: '    url  ',
        imgUrl: '    '
    });
});

//             ，          
wx.error(function(res){
    console.log('error');
    console.log(res);       
});

リファレンス
WeChatドキュメント