Dieser Teil erfordert die Verwendung von Wechats JS-SDK, einem Webentwicklungs-Toolkit, das auf WeChat basiert, das von der Wechat Public Platform für Webentwickler bereitgestellt wird.
Durch die Verwendung von WeChat JS-SDK können Webentwickler WeChat verwenden, um die Möglichkeit zu verwenden, Bilder, Bilder, Sprach-, Standort- und andere mobile Systeme auszuwählen, und die einzigartigen Funktionen von WeChat wie WeChat-Freigabe, Scannen, Karten-Gutscheine und Zahlung direkt verwenden, um WeChat-Benutzer mit einem besseren Web-Erlebnis zu bieten.
Offizielle Dokumentation
1. Einführung von JS-SDK
1. Melden Sie sich zuerst bei der WeChat Public Platform an und geben Sie die "Funktionseinstellungen" der "öffentlichen Kontoeinstellungen" ein und füllen Sie den Namen "JS -Interface Security Domain Domain" ein. Genau wie die Autorisierung der Webseiten ist es nur ein Domain -Name.
2. Führen Sie eine der folgenden JS -Dateien auf der Seite ein, die die JS -Schnittstelle aufrufen muss
<script src = "http://res.wx.qq.com/open/js/jwexin-1.2.0.js"> </script> <script src = "https://res.wx.qqq
2. Überprüfen Sie die Konfiguration über die Konfigurationsschnittstelle
wx.config ({debug: true, // Debug -Modus einschalten, werden die Rückgabeteile aller genannten APIs auf dem Client alarmiert. Um die übergebenen Parameter anzuzeigen, können Sie sie auf der PC -Seite öffnen. Die Parameterinformationen werden über das Protokoll gedruckt und nur auf der PC -Seite gedruckt. Noncest: '', // Erforderlich, die für die Signatursignatur erzeugte zufällige Zeichenfolge: '', // Erforderlich, die Signatur JSAPILIST: [] // Erforderlich, die Liste der JS -Schnittstellen, die verwendet werden müssen});Erstens, bevor Sie diese Signatur generieren, müssen Sie ein temporäres Ticket JSAPI_TICKET erhalten. JSAPI_TICKET ist ein temporäres Ticket, das vom offiziellen Konto verwendet wird, um die WeChat JS -Schnittstelle anzurufen. Unter normalen Umständen beträgt die Gültigkeitsdauer von JSAPI_Ticket 7200 Sekunden, was über Access_Token erhalten wird. Da die Anzahl der API -Aufrufe, um JSAPI_TICKET zu erhalten, sehr begrenzt ist, führt die häufige Aktualisierung von JSAPI_Ticket zu einer begrenzten API -Aufrufen, die sich auf das eigene Geschäft auswirkt, und müssen auch die Auffrischung eines zentralen Steuerservers kontrollieren.
1. Erhalten Sie temporäre Notizen
Einkapselungsrückgabeergebnis
Paket com.phil.wechatauth.model.resp; import com.phil.common.result.resultstate; / *** jsapi_ticket ist ein temporäres Ticket, das vom offiziellen Konto verwendet wird, um die WeChat JS -Schnittstelle zu rufen. privates String -Ticket; // JSAPI_TICKET private String expires_in; public String Getticket () {Rückgabe -Ticket; } public void setticket (String -Ticket) {this.ticket = Ticket; } public String getExpires_in () {return expires_in; } public void setExpires_in (String expires_in) {this.expires_in = expires_in; }}Wie man es bekommt
/ *** Holen Sie sich das temporäre Ticket, um die WeChat JS -Schnittstelle von JSAPI_TICKET zu rufen Karte <string, string> params = new treemap <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 (result)) {jsapiticket = jsonUtil.fromjson (Ergebnis, jsapiticket.class); } if (jsapiticket.geterrCode () == 0) {return jsapiticket.gettIndicket (); } return null; }2. Generieren Sie eine Signatur und Rückgabeparameter
Die Regeln für die Erzeugung von Signaturen lauten wie folgt: Die an der Signatur teilnehmenden Felder umfassen Noncestern (zufällige Zeichenfolge), gültiges JSAPI_TICKET, TIMESTAMP (TIMESTAMP), URL (die URL der aktuellen Webseite, nicht einschließlich # und ihre nachfolgenden Teile). Nachdem alle Parameter sortiert werden sollen, die gemäß dem ASCII-Code des Feldnamens von klein bis groß (Wörterbuchauftrag) signiert werden, wird das Format des URL-Schlüsselwertpaares (dh KEY1 = Value1 & Key2 = value2…) verwendet, um sich in eine String-String1 zu spleißen. Es ist hier zu beachten, dass alle Parameternamen Kleinbuchstaben sind. String1 ist verschlüsselt, und der Feldname und der Feldwert sind beide ursprüngliche Werte und es wird keine URL -Flucht durchgeführt.
String1 -Beispiel lautet wie folgt
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL2FZFY1A OCHKP7QG & NONCESTR = WM3WZYTPZ0WZCCNW × TAMP = 1414587457 & url = http: //mp.weixin.qq.com? Params = Wert
Hier gibt es eine Grube. Die Seite ist nicht zahlt, aber das signierte Feld ist nicht zestlich. Achten Sie auf die einfache Verkapselung von JS-SDK-Konfigurationsinformationen.
Paket com.phil.wechatauth.model.resp; / *** JS-SDK-Seite Konfigurationsinformationen* @Author Phil* @date 22. August 2017**/ public class jswechatconfig {private String appid; Privat langer Zeitstempel; private String noncester; private String -Signatur; public String getAppid () {return Appid; } public void setAppid (String appid) {this.appid = appid; } public Long GetTimestamp () {return timestamp; } public void setTimestamp (langer Zeitstempel) {this.timestamp = timestamp; } public String getNoncestern () {return noncest; } public void setNoncestern (String noncester) {this.noncestern = noncest; } public String getSIntature () {Rückgabesignatur; } public void SetSignature (String Signature) {this.signature = Signatur; }}Fügen Sie der Seite Konfigurationsinformationen hinzu
/ ** * */ package com.phil.wechatAuth.controller; Import Java.util.SorteedMap; Import Java.util.Treemap; importieren javax.servlet.http.httpServletRequest; import org.springframework.beans.factory.annotation.autowired; import org.springframework.stereotype.controller; import org.springframework.web.bind.annotation.RequestMapping; import com.phil.common.config.systemconfig; import com.phil.common.config.wechatconfig; import com.phil.common.util.datetimeutil; import com.phil.common.util.payutil; import com.phil.common.util.signatureUtil; import com.phil.wechatauth.model.resp.jswechatconfig; import com.phil.wechatauth.service.wechatAuthservice; /** * JS-SDK * @Author Phil * @date 21. August 2017 * */@controller @RequestMapping ("/auth") öffentliche Klasse WechatAuthController {@autowired Private WechatAuthService WechatauthService; /** * Get geografischen Standort * @param Anfrage * @return * @throws Exception */@RequestMapping ("/getLocation") öffentliche String GetLocation (httpServletRequest -Anfrage) Ausnahme {JswechatConfig JswechatConfig = new JswechatConfig (); JswechatConfig.setAppid (WeChatConfig.app_id); jswechatconfig.settimestamp (datetimeutil.currenttime ()); jswechatconfig.setnoncestern (payutil.createNoncestre ()); SortEdMap <Objekt, Objekt> map = new Treemap <Objekt, Objekt> (); map.put ("jsapi_ticket", wechatAuthService.getticket (WechatAuthService.FindLastestToken ())); map.put ("noncester", jswechatconfig.getnoncestern ()); map.put ("timestamp", jswechatconfig.gettimestamp ()); map.put ("url", request.getRequesturl (). toString ()); String Signature = SignatureUtil.CreateSha1Sign (MAP, NULL, SystemConfig.Character_encoding); JswechatConfig.Setsignature (Signatur); request.setAttribute ("JswechatConfig", JswechatConfig); zurück "wechatAuth/getlocation"; }}Signaturmethode
/ *** Nehmen Sie an allen Elementen in Map <sortEdMap, Object>** @param MAP -Sammlung von Karten teil. NotSignParams (Karte, Apikey); MessagedIGest MD = NULL; try {md = MessagedIGest.getInstance ("SHA-1"); byte [] digest = md.Digest (result.getBytes ()); result = bytetostr (digest); } catch (nosuchalgorithmException e) {e.printstacktrace (); } Rückgabeergebnis; }Andere Signaturmethoden
3.. Erfolgreiche Überprüfung durch die Verarbeitung von Ready Interface
Die obige Ausführung ist abgeschlossen und die vollständige Seite wird eingegeben
<%@ page Language = "java" contentType = "text/html; charset = utf-8" pageCoding = "utf-8"%> <! docType html public "-// w3c // dtd html 4.01 transitional // en" http://www.w.w.w.w.w.w.w.w.w3. <html> <kopf> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"> <titels> Get Geographical Location </title> <!-Wechat JS-SDK-> <Skript src = "http://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script> <link rel = "styleSheet" href = "http://cdn.bootcs.com/bootstrap/3.5/css/bootstrap.min.cStrap.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.S.Min.Min.CSS.,"> ,3.5/CSS/Bootstrap.Min.Min.Min.Min.S. src = "http://cdn.bootcs.com/jquery/1.11.3/jquery.min.js"> </script> </head> <body> <br> <div> <div> <label für = "FirstName"> Adresse: </label> <divdress = ifress "if" adress "adress" adress "adress" action = "tection Placeholder = "Geografischer Standort wird erhalten" tabindex = "1" autocplete = "off"/> <div id = "i-name"> </div> </div> </div> </div> </body> <script type Parameter können Sie auf der PC -Seite öffnen. '${jsWechatConfig.noncestr}', // Required, the random string generated by the signature is signature: '${jsWechatConfig.signature}',// Required, the signature is shown in Appendix 1 jsApiList: [ 'checkJsApi', 'openLocation', 'getLocation'] // Required, the list of JS interfaces to be used, and the list of all JS -Schnittstellen sind in Anhang 2}); wx.checkjsapi ({jsapilist: ['getlocation'], // Liste der JS -Schnittstellen, die erkannt werden müssen. Siehe Anhang 2 für alle JS -Schnittstellenlisten. Erfolg: Funktion (res) {if (res.Checkresult.getlocation == false) {{{alert. Version! '); Varizenbreite; Variationslänge; var Geschwindigkeit; VAR -Genauigkeit; wx.ready(function(){ // After config information verification, the ready method will be executed. All interface calls must be obtained after the config interface obtains the result. config is an asynchronous operation of a client. Therefore, if you need to call the relevant interface when the page is loaded, the relevant interface must be called in the ready function to ensure correct execution. For interfaces that are called only when the user triggers, they can be called directly, and do not need in der fertigen Funktion platziert werden. Genauigkeitswarnung (Latitude); WX.Error (Funktion (res) {// Wenn die Konfigurationsinformationen nicht überprüft werden, wird die Fehlerfunktion ausgeführt. Wenn die Signatur abläuft, kann die Überprüfung fehlschlagen. Für bestimmte Fehlermeldungen können Sie den Debug -Modus der Konfiguration öffnen oder sie im Parameter zurückgegebenes RES ansehen. </script> </html>Sie können es über das von WeChat offiziell bereitgestellte WeChat Web Developer Tool debuggen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.