Html5は、エンタープライズWeChatの実装を呼び出す
プリアンブル
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 + "×tamp=" + 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
関連
-
HTML+Css+transformを使った3Dナビゲーションバーのサンプルコード
-
AmazeUI折りたたみカードレイアウト、統合コンテンツリスト、テーブルコンポーネント実装
-
高解像度画面でのキャンバスブラーの問題を記憶する
-
html5 地図の現在位置の矢印の作り方の例
-
Html5カスタムフォントソリューション
-
SVG描画をHTMLページに持ってくる実装
-
キャンバスポリゴン描画方式
-
HTML5でWeb Notificationのデスクトップ通知を実装する方法
-
ページ上部へのスムーズなスクロールを実現する3つの方法
-
HTML5タイマーrequestAnimationFrameの使い方を深く理解する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLベースの10秒淘宝網のページを作るために
-
HTML5 canvas の静的スクロール・ポップアップ
-
rtmpストリーミングライブのHTML5再生
-
中国語の文字にピンインを追加してコンポーネントを折りたたみ、展開するためのHTML5コード
-
HTML5 Blobによるファイルダウンロード機能のサンプルコード
-
高さ調整可能なテキストエリアを作成するサンプルコード
-
キャンバスを使った線形・放射状グラデーションの使用例
-
HTML5ページの長押しで画像を保存する機能を解決するための記事
-
ダブルキャッシュを使用したCanvas clearRectによるスプラッシュスクリーンの問題を解決しました。
-
html2 canvasで印刷用の鮮明な画像を生成