Bagian ini mensyaratkan penggunaan JS-SDK WeChat, yang merupakan toolkit pengembangan web berdasarkan WeChat yang disediakan oleh platform publik WeChat untuk pengembang web.
Dengan menggunakan WeChat JS-SDK, pengembang web dapat menggunakan WeChat untuk secara efisien menggunakan kemampuan mengambil gambar, memilih gambar, suara, lokasi dan sistem seluler lainnya, dan dapat secara langsung menggunakan kemampuan unik WeChat seperti berbagi, pemindaian, kupon kartu, dan pembayaran WeChat untuk memberi pengguna WeChat pengalaman web yang lebih baik.
Dokumentasi resmi
1. Pengenalan JS-SDK
1. Masuk ke platform publik WeChat terlebih dahulu dan masukkan "pengaturan fungsi" dari "pengaturan akun publik" dan isi "nama domain keamanan antarmuka JS". Sama seperti otorisasi halaman web, itu hanya nama domain.
2. Perkenalkan salah satu file JS berikut di halaman yang perlu memanggil antarmuka JS
<script src = "http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script> <script src = "https://res.wx.qq.com/open/jwlixin-1.2.0.js"> </script>
2. Verifikasi konfigurasi melalui antarmuka konfigurasi
wx.config ({debug: true, // Nyalakan mode debug, nilai pengembalian semua API yang disebut akan diberitahu pada klien. Untuk melihat parameter yang diteruskan, Anda dapat membukanya di sisi PC. Informasi parameter akan dicetak melalui log yang tidak akan dicetak: Appid: '', // Diperlukan, Identifikasi Unik dari The Signature COCKECED: APPID, '', // Diperlukan, Identifikasi Unik dari The Signature COCKECED: APPID, '' '', // Diperlukan, string acak yang dihasilkan untuk tanda tangan tanda tangan: '', // Diperlukan, tanda tangan jsapilis: [] // Diperlukan, daftar antarmuka JS yang perlu digunakan});Pertama, sebelum menghasilkan tanda tangan ini, Anda perlu mendapatkan tiket sementara JSAPI_Ticket. JSAPI_Ticket adalah tiket sementara yang digunakan oleh akun resmi untuk menghubungi antarmuka WeChat JS. Dalam keadaan normal, periode validitas JSAPI_Ticket adalah 7200 detik, yang diperoleh melalui Access_Token. Karena jumlah panggilan API untuk mendapatkan JSAPI_Ticket sangat terbatas, sering menyegarkan JSAPI_Ticket akan menyebabkan panggilan API terbatas, mempengaruhi bisnisnya sendiri, dan juga perlu mengendalikan penyegaran server kontrol pusat.
1. Dapatkan catatan sementara
Enkapsulasi Mengembalikan hasil
paket com.phil.wechatauth.model.resp; impor com.phil.common.result.ResultState; / *** jsapi_ticket adalah tiket sementara yang digunakan oleh akun resmi untuk menghubungi antarmuka wechat js* @author phil* @date 21 Agustus 2017**/ kelas publik jsapiticket memperluas hasil {/***/ final static private long serialversionuid = -3570091107823232323; tiket string pribadi; // JSAPI_Ticket Private String Expires_in; string publik getTicket () {tiket kembali; } public void seticket (string ticket) {this.ticket = ticket; } public String getExpires_in () {return excires_in; } public void setExpires_in (String kedaluwarsa_in) {this.expires_in = Expires_in; }}bagaimana cara mendapatkannya
/ *** Dapatkan tiket sementara untuk menghubungi antarmuka wechat js oleh jsapi_ticket* @return*/ public string getTicket (string accessToken) {jsapiticket jsapiticket = null; Peta <string, string> params = treemap baru <string, string> (); params.put ("access_token", accessToken); params.put ("type", "jsapi"); String result = httprequtil.httpdefaultexecute (httprequtil.get_method, wechatconfig.get_ticket_url, params, ""); if (stringutils.isnotblank (hasil)) {jsapiticket = jsonutil.fromjson (hasil, jsapiticket.class); } if (jsapiticket.geterRcode () == 0) {return jsapiticket.getticket (); } return null; }2. Hasilkan parameter tanda tangan dan pengembalian
Aturan pembuatan tanda tangan adalah sebagai berikut: Bidang yang berpartisipasi dalam tanda tangan termasuk noncestr (string acak), jsapi_ticket yang valid, stempel waktu (cap waktu), URL (URL dari halaman web saat ini, tidak termasuk # dan bagian selanjutnya). Setelah menyortir semua parameter untuk ditandatangani dari kecil ke besar (urutan kamus) sesuai dengan kode ASCII dari nama bidang, format pasangan nilai kunci URL (yaitu, key1 = value1 & key2 = value2 ...) digunakan untuk menyambung ke string string1. Perlu dicatat di sini bahwa semua nama parameter adalah karakter kecil. String1 dienkripsi, dan nama bidang dan nilai bidang keduanya nilai asli dan tidak ada URL Escape yang dilakukan.
Contoh String1 adalah sebagai berikut
jsapi_ticket = sm4aovdwfpe4dxkxges8vmcpggvi4c3vm0p37wvucfvkvay_90u5h9nbslyy3-sl-hhtdfl2fzfy1a OCHKP7QG & NONCEST = WM3WZYTPZ0WZCCNW × TAMP = 1414587457 & url = http: //mp.weixin.qq.com? Params = nilai
Ada lubang di sini. Halamannya adalah noncestr, tetapi bidang yang ditandatangani adalah Noncestr. Perhatikan enkapsulasi sederhana informasi konfigurasi konfigurasi JS-SDK.
paket com.phil.wechatauth.model.resp; / *** JS-SDK Informasi Konfigurasi Halaman* @Author Phil* @Date 22 Agustus 2017**/ Kelas Publik JSweChatConfig {Private String AppID; cap waktu panjang pribadi; string pribadi noncestr; tanda tangan string pribadi; string publik getAppId () {return appID; } public void setAppID (String appId) {this.appid = appId; } public long gettImestamp () {return timestamp; } public void setTimestamp (long timestamp) {this.timestamp = timestamp; } public String getNoncestr () {return noncestr; } public void setNoncestr (String noncestr) {this.noncestr = noncestr; } public string getSignature () {return Signature; } public void setSignature (String Signature) {this.Signature = Signature; }}Tambahkan informasi konfigurasi ke halaman
/ ** * */ paket com.phil.wechatauth.controller; impor java.util.sortedmap; impor java.util.treemap; impor javax.servlet.http.httpservletRequest; impor org.springframework.beans.factory.annotation.Autowired; impor org.springframework.stereotype.controller; impor org.springframework.web.bind.annotation.requestmapping; impor com.phil.common.config.systemconfig; impor com.phil.common.config.wechatconfig; impor com.phil.common.util.dateTimeutil; impor com.phil.common.util.payutil; impor com.phil.common.util.signatureutil; impor com.phil.wechatauth.model.resp.jswechatconfig; impor com.phil.wechatauth.service.wechatauthservice; /** * js-sdk * @author Phil * @Date 21 Agustus 2017 * */@controller @RequestMapping ("/auth") kelas publik wechatauthcontroller {@autowired private wechatauthservice wechatauthservice; /** * Dapatkan lokasi geografis * @param permintaan * @return * @throws Exception */@RequestMapping ("/getLocation") Public String getLocation (permintaan httpservletRequest) Lempar Exception {JSweChatConfig jswechatconfig = new jswechatconfig (); jswechatconfig.setAppID (wechatconfig.app_id); jswechatconfig.settimestamp (datetimeutil.currenttime ()); jswechatconfig.setnoncestr (payutil.createNoncestr ()); Sortedmap <object, object> map = new treemap <object, object> (); peta.put ("jsapi_ticket", wechatauthservice.getticket (wechatauthservice.findlastesttoken ())); peta.put ("noncestr", jswechatconfig.getnoncestr ()); peta.put ("timestamp", jswechatconfig.gettimestamp ()); peta.put ("url", request.getRequesturl (). ToString ()); String Signature = Signatureutil.createSha1Sign (peta, null, systemconfig.character_encoding); jsweChatconfig.setsignature (tanda tangan); request.setAttribute ("JSweChatConfig", JSweChatConfig); mengembalikan "wechatauth/getlocation"; }}Metode tanda tangan
/ *** Berpartisipasi dalam tanda tangan melalui semua elemen dalam peta <sortedmap, objek>** @param peta koleksi peta yang akan ditandatangani* @params apikey apikey jika kosong, itu tidak akan berpartisipasi dalam tanda tangan, dan jika tidak kosong) Object {string/ @return*/ public static string createSha1sign (sortedmap (sortedmap < notsignparams (peta, apikey); MessageDigest MD = null; coba {md = messageDigest.getInstance ("sha-1"); byte [] digest = md.digest (result.getbytes ()); hasil = bytetoStr (digest); } catch (nosuchalgorithMexception e) {e.printstacktrace (); } hasil pengembalian; }Metode tanda tangan lainnya
3. Verifikasi yang berhasil melalui pemrosesan antarmuka siap
Eksekusi di atas selesai dan halaman lengkap dimasukkan
<%@ page language = "java" contentType = "text/html; charset = utf-8" pageEncoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en" "http://www.w3.org/org/ht4/t." <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> Dapatkan lokasi geografis </title> <!-weChat js-sdk-> <script src = "http://res.wx.qqq.com/script src =" http://res.res.qqq.com/cript script = "http://res. rel = "stylesheet" href = "http://cdn.bootcss.com/boottrap/3.3.5/css/bootstrap.min.css"> <skrip src = "http://cdn.bootcss.com/jqery/1.11.3/ju/joughy. <dv> <div> <label for = "firstName"> Alamat: </label> <div id = "item-if"> <input type = "text" value = "" name = "location.address" id = "alamat" placeholder = "Lokasi geografis/</i-na </</div </div </autocomplete =" off "/> <-ndi =" i-na> </i-name> </div </div </autocomplete = "off"/> Div ID = "i-na </i-name> </div </div </div </autocomplete =" off "/> Div ID =" i-naMer> </i-name> </div </div </div </div </autocomplete = "OFF"/Div id <script type = "text/javascript"> wx.config ({debug: true, // nyalakan mode debug, nilai pengembalian semua API yang disebut akan diberitahu pada klien. Untuk melihat parameter yang diteruskan, Anda dapat membukanya di sisi pc. identification of the official account timestamp: '${jsWechatConfig.timestamp}' , // Required, the timestamp generated by the signature is nonceStr: '${jsWechatConfig.noncestr}', // Required, the random string generated by the signature is signature: '${jsWechatConfig.signature}',// Required, the signature is shown in Appendix 1 jsapilis: ['checkjsapi', 'openlocation', 'getLocation'] // Diperlukan, daftar antarmuka JS yang akan digunakan, dan daftar semua antarmuka JS ditunjukkan dalam Lampiran 2}); Wxlocation '], // Daftar antarmuka JS yang perlu dideteksi. Lihat Lampiran 2 untuk semua daftar antarmuka JS. Sukses: Fungsi (res) {if (res.CheckResult.getlocation WeCHP. versi! '); var latitude; var bujur; kecepatan var; akurasi var; wx.ready (function () {// Setelah verifikasi informasi konfigurasi, metode yang siap akan dieksekusi. Semua panggilan antarmuka harus diperoleh setelah antarmuka konfigurasi mendapatkan hasilnya. Konfigurasi adalah operasi yang tidak sinkron dari klien. Oleh karena itu, jika Anda perlu memanggil secara langsung dan secara langsung. tidak perlu ditempatkan dalam fungsi siap. latitude); wx.error (function (res) {// Jika informasi konfigurasi gagal untuk memverifikasi, fungsi kesalahan akan dijalankan. Jika tanda tangan kedaluwarsa, verifikasi gagal. Untuk pesan kesalahan tertentu, Anda dapat membuka mode debug konfigurasi, atau melihatnya di parameter res yang dikembalikan. Untuk SPA, Anda dapat memperbarui tanda tangan di sini. Peringatan ("kesalahan verifikasi"); </script> </html>Anda dapat men -debug melalui alat pengembang web WeChat secara resmi disediakan oleh WeChat.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.