1. ホーム
  2. Web制作
  3. html5

Html5は、エンタープライズWeChatの実装を呼び出す

2022-01-21 09:53:17

プリアンブル

H5ベースのページチューニング Enterprise WeChat API (チューニングデモ)

I. 環境

エンタープライズWeChatの管理者は、アプリケーションを追加し、アドレスは、H5プログラムのアドレスにポイントします。(エンタープライズWeChatは、内部ツアーを介して、モバイルプロジェクトのWeb側のうち、独自の公開にアクセスするには、この記事の焦点ではない)

第二に、ステップの使用

1.jsの参考

https://work.weixin.qq.com/api/doc/90000/90136 <未定義

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


2. コンフィグインターフェース 注入許可検証設定

コードは以下の通りです。

wx.config({
    beta: true, // must be written this way, otherwise wx.invoke call form jsapi will have problems
    debug: true, // enable debug mode, the return value of all api calls will be alerted out on the client side, if you want to see the incoming parameters, you can open it on the pc side, the parameter information will be played out through the log, only when the pc side will be printed.
    appId: '', // mandatory, corpID of enterprise WeChat
    timestamp: , // required, the timestamp of the signature generation
    nonceStr: '', // required, the random string to generate the signature
    signature: '', // required, signature, see Appendix - JS-SDK using permission signature algorithm
    jsApiList: [] // mandatory, the list of JS interfaces to be used, all interfaces to be called need to be passed in
});


ここで、appIdは企業WeChatで取得したもの、timestamp、nonceStrは16bitのランダム文字列、signatureは最も複雑なものです(設定方法は後述します)。

署名 この署名には以下が必要です(公式サイトのドキュメント)。

署名に関わるパラメータは、noncestr(ランダムな文字列)、jsapi_ticket("Get corporate jsapi_ticket" および "Get application jsapi_ticket interface "を参照)、timestamp(タイムスタンプ)、url(現在のページのURL、#およびそれ以降の部分を除く) の 4 つです。

これらのパラメータを、URLのキーと値のペアの形式(例:key1=value1&key2=value2...)で、文字列string1にスプライスしてください。
注意点が2つあります。1. フィールドの元の値を使用し、URLエスケープはしない。2. フィールドの順序を変更せずに、以下の形式で厳密に接続する必要があります。

jsapi_ticket=JSAPITICKET&noncestr=NONCESTR×tamp=TIMESTAMP&url=URL
そして、string1に対してsha1暗号化を行うだけです。
例:

以下のパラメータがある場合。

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
タイムスタンプ=1414587457
url=http://mp.weixin.qq.com?params=value
ステップ1.これらのパラメータを文字列string1にスプライスします。

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW& timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
ステップ2. 文字列1にsha1署名を行い、署名を取得します。

0f9de62fce790f9a083d5c99e95740ceb90c27ed

これらのパラメータを1つずつ実装してみます。

3. access_tokenの生成

リクエスト方法 GET (HTTPS) リクエストアドレス: https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET (corpidとcorpsecretは共に企業向けWeChatで取得したものです)

補足:このgetリクエストは最初フロントエンドjsで書いていて、Hbuilder(開発ソフト)で開発・テストしたところ、普通に情報が返ってきたのですが、エクスプローラーになった時に初めて クロスドメイン問題 . そこで、access_tokenを取得するメソッドを を取得するためにバックエンドで を作成し、フロントエンドに投げる。

			/			$.ajax("own url", {
				dataType: 'json', //the server returns data in json format
				type: 'post', //HTTP request type
				headers: {
					'Content-Type': 'application/json'
				},
				
				//contentType: "application/json;charset=utf-8",
				success: function(data) {
					
					var sad = JSON.parse(data.d);
					 
					var token = sad.access_token;

					sunc(token);
				},
				error: function(xhr, type, errorThrown) {
					//Exception handling.
					alert("into error");
					

				}
			})

		//backend 
		 public string test()
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=自己的corpid& corpsecret = own corpsecret");
            request.Method = "GET";
            request.ContentType = "text/html;charset=UTF-8";
            // Accept the returned data
            HttpWebResponse response = (HttpWebResponse)request.GetResponse();
            Stream stream = response.GetResponseStream();
            StreamReader streamReader = new StreamReader(stream, Encoding.GetEncoding("utf-8"));
            string retString = streamReader.ReadToEnd();
            streamReader.Close();
            stream.Close();
            Close(); response.Close();

            return retString;
        }


これはaccess_tokenを取得するためのGETリクエストを実装しています。

4. jsapi_ticketを生成する

リクエスト方法 GET (HTTPS)
リクエストURL: https://qyapi.weixin.qq.com/cgi-bin/ticket/get?access_token=ACCESS_TOKEN

access_token の取得と同じ バックグラウンドで取得する場合 パラメータは次のとおりです。
アクセス_トークン

5. noncestrランダム文字列(lenランダム文字列長)の生成(メソッドはコピーされる)

//random string
		function randomString(len) {
			len = len || 32;
			var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /**** removes the confusing characters oOLl,9gq,Vv,Uu,I1****/ by default
			var maxPos = $chars.length;
			var pwd = '';
			for (i = 0; i < len; i++) {
				pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return pwd;
		}


5. タイムスタンプの生成 タイムスタンプの生成

var timestamp = Date.parse(new Date());

6. 署名の生成

					var timestamp = Date.parse(new Date());
					// noncestr random string
					var noncestr = randomString(16);
					var qiname = getSignature(resyltt, noncestr, timestamp);


//Get the signature
			function getSignature(ticket, noncestr, timestamp) {
				var url = window.location.href.split("#")[0];
				var jsapi_ticket = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp +
					"&url=" + url;
			

				return sha1(jsapi_ticket);
			}
			// encrypt the string into a hex string
			function sha1(s) {
				var data = new Uint8Array(encodeUTF8(s))
				var i, j, t;
				var l = ((data.length + 8) >>> 6 << 4) + 16,
					s = new Uint8Array(l << 2);
				s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
				for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2);
				s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
				s[l - 1] = data.length << 3;
				var w = [],
					f = [
						function() {
							return m[1] & m[2] | ~m[1] & m[3];
						},
						function() {
							return m[1] ^ m[2] ^ m[3];
						},
						function() {
							return m[1] & m[2] | m[1] & m[3] | m[2] & m[3];
						},
						function() {
							return m[1] ^ m[2] ^ m[3];
						}
					],
					rol = function(n, c) {
						return n << c | n >>> (32 - c);
					},
					k = [1518500249, 1859775393, -1894007588, -899497514],
					m = [1732584193, -271733879, null, null, -1009589776];
				m[2] = ~m[0], m[3] = ~m[1];
				for (i = 0; i < s.length; i += 16) {
					var o = m.slice(0);
					for (j = 0; j < 80; j++)
						w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
						t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
						m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
					for (j = 0; j < 5; j++) m[j] = m[j] + o[j] | 0;
				};
				t = new DataView(new Uint32Array(m).buffer);
				for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);

				var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function(e) {
					return (e < 16 ? "0" : "") + e.toString(16);
				}).join("");
				return hex;
			}


			function encodeUTF8(s) {
				var i, r = [],
					c, x;
				for (i = 0; i < s.length; i++)
					if ((c = s.charCodeAt(i)) < 0x8