ส่วนนี้ต้องการการใช้ JS-SDK ของ WeChat ซึ่งเป็นชุดเครื่องมือพัฒนาเว็บตาม WeChat ที่จัดทำโดยแพลตฟอร์มสาธารณะ WeChat สำหรับนักพัฒนาเว็บ
ด้วยการใช้ WeChat JS-SDK ผู้พัฒนาเว็บสามารถใช้ WeChat เพื่อใช้ความสามารถในการถ่ายภาพการเลือกรูปภาพเสียงสถานที่และระบบมือถืออื่น ๆ อย่างมีประสิทธิภาพและสามารถใช้ความสามารถที่เป็นเอกลักษณ์ของ WeChat โดยตรงเช่นการแบ่งปัน WeChat การสแกนคูปองบัตรและการชำระเงินเพื่อให้ผู้ใช้ WeChat
เอกสารอย่างเป็นทางการ
1. การแนะนำ JS-SDK
1. เข้าสู่ระบบแพลตฟอร์มสาธารณะ WeChat ก่อนและป้อน "การตั้งค่าฟังก์ชั่น" ของ "การตั้งค่าบัญชีสาธารณะ" และกรอกชื่อ "JS Interface Security Domain ชื่อ" เช่นเดียวกับการอนุญาตเว็บเพจมันเป็นเพียงชื่อโดเมน
2. แนะนำไฟล์ JS ต่อไปนี้หนึ่งไฟล์บนหน้าเว็บที่ต้องเรียกอินเตอร์เฟส JS
<script src = "http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script> <script src = "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
2. ตรวจสอบการกำหนดค่าผ่านอินเตอร์เฟสการกำหนดค่า
wx.config ({debug: true, // เปิดโหมดการดีบักค่าส่งคืนของ APIs ทั้งหมดที่เรียกว่าจะได้รับการแจ้งเตือนบนไคลเอนต์เพื่อดูพารามิเตอร์ที่ผ่านคุณสามารถเปิดได้ทางด้านพีซี noncestr: '', // จำเป็น, สตริงแบบสุ่มที่สร้างขึ้นสำหรับลายเซ็นลายเซ็น: '', // จำเป็น, jsapilist ลายเซ็น: [] // จำเป็น, รายการของอินเตอร์เฟส JS ที่ต้องใช้});ก่อนอื่นก่อนที่จะสร้างลายเซ็นนี้คุณจะต้องได้รับตั๋วชั่วคราว jsapi_ticket JSAPI_TICKET เป็นตั๋วชั่วคราวที่ใช้โดยบัญชีอย่างเป็นทางการเพื่อโทรหาอินเตอร์เฟส WeChat JS ภายใต้สถานการณ์ปกติระยะเวลาความถูกต้องของ JSAPI_TICKET คือ 7200 วินาทีซึ่งได้มาจาก ACCESS_TOKEN เนื่องจากจำนวนการโทร API เพื่อให้ได้ JSAPI_Ticket มี จำกัด มากการรีเฟรช JSAPI_Ticket บ่อยครั้งจะนำไปสู่การโทร API ที่มี จำกัด ส่งผลกระทบต่อธุรกิจของตัวเองและจำเป็นต้องควบคุมการรีเฟรชของเซิร์ฟเวอร์ควบคุมส่วนกลาง
1. รับบันทึกชั่วคราว
ผลตอบแทนการห่อหุ้มผล
แพ็คเกจ com.phil.wechatauth.model.resp; นำเข้า com.phil.common.result.resultstate; / *** JSAPI_TICKET เป็นตั๋วชั่วคราวที่ใช้โดยบัญชีอย่างเป็นทางการเพื่อโทรหาอินเตอร์เฟส WeChat JS* @author Phil* @date 21 สิงหาคม 2017**/ คลาสสาธารณะ JSapiticket ขยายผลลัพธ์ {/ ****/ ส่วนตัว ตั๋วสตริงส่วนตัว // jsapi_ticket สตริงส่วนตัว Expires_in; สตริงสาธารณะ getTicket () {ตั๋วกลับ; } โมฆะสาธารณะ Setticket (ตั๋วสตริง) {this.ticket = ตั๋ว; } สตริงสาธารณะ getExpires_in () {return expires_in; } โมฆะสาธารณะ setExpires_in (สตริง expires_in) {this.expires_in = expires_in; -วิธีรับมัน
/ *** รับตั๋วชั่วคราวเพื่อโทรหาอินเตอร์เฟส WeChat JS โดย JSAPI_TICKET* @return*/ Public String getTicket (String AccessToken) {JSapiticket JSapiticket = null; แผนที่ <string, string> params = new treemap <string, string> (); params.put ("access_token", AccessToken); params.put ("type", "jsapi"); สตริงผลลัพธ์ = httprequtil.httpdefaultExecute (httprequtil.get_method, wechatconfig.get_ticket_url, params, ""); if (stringutils.isnotblank (ผลลัพธ์)) {jsapiticket = jsonutil.fromjson (ผลลัพธ์, jsapiticket.class); } if (jsapiticket.geterRcode () == 0) {return jsapiticket.getTicket (); } return null; -2. สร้างพารามิเตอร์ลายเซ็นและส่งคืน
กฎการสร้างลายเซ็นมีดังนี้: ฟิลด์ที่เข้าร่วมในลายเซ็นประกอบด้วย noncestr (สตริงสุ่ม), JSAPI_Ticket ที่ถูกต้อง, การประทับเวลา (การประทับเวลา), URL (URL ของเว็บเพจปัจจุบันไม่รวม # และส่วนที่ตามมา) หลังจากการเรียงลำดับพารามิเตอร์ทั้งหมดที่จะลงนามจากขนาดเล็กถึงขนาดใหญ่ (คำสั่งพจนานุกรม) ตามรหัส ASCII ของชื่อฟิลด์รูปแบบของคู่คีย์ค่า URL (นั่นคือ Key1 = value1 & key2 = value2 …) ใช้เพื่อแยกเป็นสตริงสตริง 1 ควรสังเกตที่นี่ว่าชื่อพารามิเตอร์ทั้งหมดเป็นอักขระตัวพิมพ์เล็ก String1 ถูกเข้ารหัสและชื่อฟิลด์และค่าฟิลด์เป็นทั้งค่าดั้งเดิมและไม่มีการหลบหนี URL
ตัวอย่าง String1 มีดังนี้
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL2FZFY1A ochkp7qg & noncestr = wm3wzytpz0wzccnw × tamp = 1414587457 & url = http: //mp.weixin.qq.com? params = ค่า
มีหลุมอยู่ที่นี่ หน้านี้ไม่ใช่ cestr แต่ฟิลด์ที่ลงนามนั้นไม่ใช่ cestr ให้ความสนใจกับการห่อหุ้มข้อมูลการกำหนดค่า JS-SDK อย่างง่าย
แพ็คเกจ com.phil.wechatauth.model.resp; / *** ข้อมูลการกำหนดค่าหน้า JS-SDK* @author Phil* @Date 22 สิงหาคม 2017**/ คลาสสาธารณะ JSWECHATCONFIG {Private String AppID; การประทับเวลาส่วนตัว สตริงส่วนตัว noncestr; ลายเซ็นสตริงส่วนตัว สตริงสาธารณะ getAppid () {return appid; } โมฆะสาธารณะ setAppId (สตริง appid) {this.appid = appid; } Public Long GetTimestamp () {ส่งคืนการประทับเวลา; } โมฆะสาธารณะ setTimestamp (การประทับเวลายาว) {this.timestamp = timestamp; } สตริงสาธารณะ getNonCestr () {return nonCestr; } โมฆะสาธารณะ setNonCestr (สตริง nonCestr) {this.nonCestr = nonCestr; } สตริงสาธารณะ getSignature () {ส่งคืนลายเซ็น; } โมฆะสาธารณะ setSignature (ลายเซ็นสตริง) {this.signature = ลายเซ็น; -เพิ่มข้อมูลการกำหนดค่าลงในหน้า
/ ** * */ แพ็คเกจ com.phil.wechatauth.controller; นำเข้า java.util.sortedMap; นำเข้า java.util.treemap; นำเข้า Javax.servlet.http.httpservletRequest; นำเข้า org.springframework.beans.factory.annotation.autowired; นำเข้า org.springframework.stereotype.controller; นำเข้า org.springframework.web.bind.annotation.requestmapping; นำเข้า com.phil.common.config.systemconfig; นำเข้า com.phil.common.config.wechatconfig; นำเข้า com.phil.common.util.datetimeutil; นำเข้า com.phil.common.util.payutil; นำเข้า com.phil.common.util.signatureutil; นำเข้า com.phil.wechatauth.model.resp.jswechatconfig; นำเข้า com.phil.wechatauth.service.wechatauthservice; /** * JS-SDK * @author Phil * @date 21 สิงหาคม 2017 * */@controller @requestmapping ("/auth") คลาสสาธารณะ wechatauthcontroller {@autowired ส่วนตัว wechatauthservice /** * รับตำแหน่งทางภูมิศาสตร์ * @param Request * @return * @throws Exception */@requestmapping ("/getLocation") สตริงสาธารณะ getLocation (คำขอ httpservletrequest) โยนข้อยกเว้น jswechatconfig.setAppid (wechatconfig.app_id); JSWECHATCONFIG.SETTIMESTAMP (DateTimeUtil.CurrentTime ()); jswechatconfig.setnoncestr (payutil.createnoncestr ()); SortedMap <Object, Object> MAP = ใหม่ treemap <Object, Object> (); map.put ("jsapi_ticket", wechatauthservice.getTicket (wechatauthservice.findlastesttoken ())); map.put ("noncestr", jswechatconfig.getNonCestr ()); map.put ("timestamp", jswechatconfig.getTimestamp ()); map.put ("url", request.getRequesturl (). toString ()); String Signature = SignatureUtil.Createsha1Sign (แผนที่, NULL, SystemConfig.Character_encoding); jswechatconfig.setsignature (ลายเซ็น); request.setAttribute ("jswechatconfig", jswechatconfig); return "wechatauth/getLocation"; -วิธีลายเซ็น
/ *** มีส่วนร่วมในลายเซ็นผ่านองค์ประกอบทั้งหมดในแผนที่ <sortedMap, Object>** @param แผนที่คอลเลกชันของแผนที่ที่จะลงนาม* @params apikey apikey ถ้าว่างเปล่ามันจะไม่เข้าร่วมในลายเซ็นและถ้าไม่ว่าง Notsignparams (แผนที่, apikey); MESAGEDIGEST MD = NULL; ลอง {md = messageGeSt.getInstance ("sha-1"); ไบต์ [] digest = md.digest (result.getBytes ()); ผลลัพธ์ = bytetOstr (digest); } catch (nosuchalgorithmexception e) {e.printstacktrace (); } ผลตอบแทนผลลัพธ์; -วิธีการลายเซ็นอื่น ๆ
3. การตรวจสอบที่ประสบความสำเร็จผ่านการประมวลผลอินเทอร์เฟซพร้อม
การดำเนินการข้างต้นเสร็จสมบูรณ์และป้อนหน้าสมบูรณ์
<%@ page language = "java" contentType = "ข้อความ/html; charset = utf-8" pageencoding = "utf-8"%> <! doctype html สาธารณะ "-// w3c // dtd html 4.01 transitional // en" <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> รับตำแหน่งทางภูมิศาสตร์ </title> <!-wechat js-sdk-> <script src = "http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3 src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> </head> <body> <br> <br> <div> <div> <label for = "FirstName"> ที่อยู่: placeHolder = "ตำแหน่งทางภูมิศาสตร์ได้รับ" tabindex = "1" autocomplete = "ปิด"/> <div id = "i-name"> </div> </div> </div> </div> พารามิเตอร์คุณสามารถเปิดได้ในด้านพีซี '$ {jswechatconfig.noncestr}', // จำเป็น, สตริงแบบสุ่มที่สร้างขึ้นโดยลายเซ็นคือลายเซ็น: '$ {jswechatconfig.signature}', // จำเป็นต้องมีการแสดงในภาคผนวก 1 jsapilist: [checkjsapi ' อินเตอร์เฟส JS แสดงในภาคผนวก 2}); wx.checkjsapi ({jsapilist: ['getLocation'], // รายการของอินเทอร์เฟซ JS ที่ต้องตรวจพบดูภาคผนวก 2 สำหรับรายการอินเตอร์เฟส JS ทั้งหมดความสำเร็จ: ฟังก์ชั่น (res) {ถ้า (res.CheckResult.getLocation == เท็จ) เวอร์ชัน! '); ละติจูด var; ลองจิจูด var; ความเร็ว var; ความแม่นยำ var; wx.ready (function () {// หลังจากการตรวจสอบข้อมูลการกำหนดค่าวิธีการพร้อมจะถูกเรียกใช้งานการเรียกใช้อินเตอร์เฟสทั้งหมดจะต้องได้รับหลังจากอินเทอร์เฟซ config ได้รับผลลัพธ์การกำหนดค่าคือการดำเนินการแบบอะซิงโครนัสของไคลเอนต์ดังนั้นหากคุณต้องการเรียกใช้อินเทอร์เฟซที่เกี่ยวข้อง ที่จะวางไว้ในฟังก์ชั่นพร้อม การแจ้งเตือน (ละติจูด); wx.error (ฟังก์ชั่น (res) {// หากข้อมูลการกำหนดค่าไม่สามารถตรวจสอบได้ฟังก์ชันข้อผิดพลาดจะถูกดำเนินการหากลายเซ็นหมดอายุการตรวจสอบล้มเหลวสำหรับข้อความแสดงข้อผิดพลาดเฉพาะคุณสามารถเปิดโหมดการดีบักของการกำหนดค่าหรือดูในพารามิเตอร์ Res ที่ส่งคืน </script> </html>คุณสามารถดีบักผ่านเครื่องมือนักพัฒนาเว็บ WeChat อย่างเป็นทางการที่ WeChat จัดทำอย่างเป็นทางการ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น