Cette partie nécessite l'utilisation du JS-SDK de WeChat, qui est une boîte à outils de développement Web basée sur WeChat fournie par la plate-forme publique WeChat pour les développeurs Web.
En utilisant WeChat JS-SDK, les développeurs Web peuvent utiliser WeChat pour utiliser efficacement la possibilité de prendre des photos, de sélectionner des images, des voix, des emplacements et d'autres systèmes mobiles, et peuvent utiliser directement les capacités uniques de WeChat telles que le partage de WeChat, la numérisation, les coupons de carte et le paiement pour offrir aux utilisateurs de Wechat une meilleure expérience Web.
Documentation officielle
1. Introduction de JS-SDK
1. Connectez-vous d'abord à la plate-forme publique WeChat et entrez les "paramètres de fonction" des "paramètres de compte public" et remplissez le "nom de domaine de sécurité de l'interface JS". Tout comme l'autorisation de la page Web, ce n'est qu'un nom de domaine.
2. Présentez l'un des fichiers JS suivants sur la page qui doit appeler l'interface 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"> </cript>
2. Vérifiez la configuration via l'interface de configuration
wx.config ({debug: true, // Activer le mode de débogage, les valeurs de retour de toutes les API appelées seront alertées sur le client. Pour afficher les paramètres passés, vous pouvez les ouvrir côté PC. Les informations des paramètres seront imprimées via le journal et ne seront imprimées que du côté PC. AppID: '', // Obligatoire, l'identification unique du compte officiel TimeStamp:, //, requis pour la signature de la signature: noncestr: '', // requis, la chaîne aléatoire générée pour la signature de signature: '', // requise, la signature jsapilist: [] // requise, la liste des interfaces js qui doivent être utilisées});Tout d'abord, avant de générer cette signature, vous devez obtenir un billet temporaire jsapi_ticket. JSAPI_TICKET est un billet temporaire utilisé par le compte officiel pour appeler l'interface WeChat JS. Dans des circonstances normales, la période de validité de JSAPI_TICKET est de 7200 secondes, qui est obtenue via Access_token. Étant donné que le nombre d'appels API pour obtenir JSAPI_TICKET est très limité, un rafraîchissement fréquent de JSAPI_TICKET entraînera la limite des appels d'API, affectant sa propre entreprise et doit également contrôler la rafraîchissement d'un serveur de contrôle central.
1. Obtenez des notes temporaires
L'encapsulation revient le résultat
package com.phil.wechatauth.model.resp; import com.phil.common.result.resultState; / ** * JSAPI_TICKET est un billet temporaire utilisé par le compte officiel pour appeler l'interface WeChat JS * @Author Phil * @Date 21 août 2017 * * / public class Jsapiticket étend le résultat {/ ** * * / private static final SerialVersionUID = -357009110782376503l; ticket de chaîne privé; // JSAPI_TICKET PRIVATE String expires_in; public String getTicket () {return ticket; } public void Settticket (String Ticket) {this.ticket = ticket; } public String getExpires_in () {return expires_in; } public void setExpires_in (String expires_in) {this.expires_in = exires_in; }}Comment l'obtenir
/ ** * Obtenez le ticket temporaire pour appeler l'interface WeChat JS par JSAPI_TICKET * @return * / public String getTicket (String AccessToken) {jSapiticket jSapiticket = null; Map <string, string> params = new Treemap <String, String> (); Params.put ("Access_token", AccessToken); params.put ("type", "jsapi"); Résultat de la chaîne = httprequtil.httpdefaultExECUTE (httprequtil.get_method, wechatconfig.get_ticket_url, params, ""); if (stringUtils.isnotblank (result)) {jsapiticket = jsonutil.fromjson (result, jsapiticket.class); } if (jsapiticket.getERRCODE () == 0) {return jsapiticket.getticket (); } return null; }2. Générez des paramètres de signature et de retour
Les règles de génération de signature sont les suivantes: les champs participant à la signature incluent NONCESTR (chaîne aléatoire), JSAPI_TICKET valide, horodatage (horodatage), URL (l'URL de la page Web actuelle, sans compter # et ses parties suivantes). Après avoir trié tous les paramètres à signer du petit à grand (ordre du dictionnaire) en fonction du code ASCII du nom du champ, le format de la paire de valeurs de clé URL (c'est-à-dire, key1 = value1 & key2 = value2…) est utilisé pour épisser une chaîne String1. Il convient de noter ici que tous les noms de paramètres sont des caractères minuscules. String1 est chiffré et le nom de champ et la valeur du champ sont à la fois des valeurs d'origine et aucune évasion d'URL n'est effectuée.
L'exemple String1 est le suivant
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL2FZFY1A Ochkp7qg & noncestr = wm3wzytpz0wzccnw × tamp = 1414587457 & url = http: //mp.weixin.qq.com? Params = valeur
Il y a une fosse ici. La page est non-claire, mais le champ signé est non-claire. Faites attention à l'encapsulation simple des informations de configuration de configuration JS-SDK.
package com.phil.wechatauth.model.resp; / ** * Informations de configuration de la page JS-SDK * @author phil * @date 22 août 2017 * * / public class JSweChatConfig {private String appid; horodatage long privé; String privé NONCESTR; Signature de chaîne privée; public String getAppid () {return appid; } public void setAppid (String AppID) {this.appid = appid; } public long gettimestamp () {return himestamp; } public void settimestamp (long horodatamp) {this.timestamp = horodatage; } public String getNonCestr () {return nonCest; } public void setNonCestr (String nonCestr) {this.NonCestr = nonCestl; } public String getSignature () {return Signature; } public void setSignature (String Signature) {this.signature = signature; }}Ajouter des informations de configuration à la page
/ ** * * / package com.phil.wechatauth.Controller; import java.util.sortedmap; import java.util.treemap; Importer javax.servlet.http.httpservletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.sterreotype.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 août 2017 * * / @Controller @RequestMapping ("/ Auth") Classe publique WeChatauthController {@autowired private WeChatAuthService WeChatAuthService; / ** * Obtenez l'emplacement géographique * @param demande * @return * @throws exception * / @RequestMapping ("/ getLocation") public String getLocation (httpServletRequest) lève une exception {jSwechatConfig jSwechatConfig = new jswechatconfig (); jswechatconfig.setAppid (wechatconfig.app_id); jswechatconfig.settimestamp (dateTimeUtil.currentTime ()); JSWECHATCONFIG.SETNONCELR (Payutil.CreateNOnCestr ()); TriMedMap <objet, objet> map = new Treemap <objet, objet> (); map.put ("jsapi_ticket", wechatauthService.getTicket (weChatAuthService.FindLasteStToken ())); map.put ("noncestr", jSwechatConfig.getNonCestr ()); map.put ("horodat", jswechatconfig.gettimestamp ()); map.put ("url", request.getRequestUrl (). toString ()); String Signature = SignatureUtil.CateSha1Sign (Map, Null, SystemConfig.Character_encoding); jSwechatConfig.SetSignature (signature); request.setAttribute ("jSwechatConfig", jswechatconfig); Renvoie "WeChatauth / GetLocation"; }}Méthode de signature
/ ** * Participez à la signature via tous les éléments de Map <tridmap, objet> * * @param Collection de cartes de cartes à signer * @params apikey apikey Si vide, il ne participera pas à la signature, et si elle n'est pas vide (sortmedmap, objet, objet> MAP NotsignParams (carte, apikey); MessagediGest MD = null; essayez {md = messagediGest.getInstance ("sha-1"); octet [] digest = md.digest (result.getBytes ()); résultat = bytetoStr (digest); } catch (NosuchalgorithMexception e) {e.printStackTrace (); } Retour Résultat; }Autres méthodes de signature
3. Vérification réussie grâce à un traitement d'interface prêt
L'exécution ci-dessus est terminée et la page complète est entrée
<% @ Page Language = "Java" ContentType = "Text / Html; charSet = UTF-8" Pageencoding = "UTF-8"%> <! Doctype HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // En" "http://www.w3.org/tr/html4/loose" <Html> <A-head> <meta http-equiv = "content-type" contenu = "text / html; charset = utf-8"> <itle> obtenez une emplacement géographique </ title> <! - wechat js-sdk -> <script src = "http://res.wx.qq.com/open/js/jweix <link Rel = "Stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </ script> <br> <div> <div> <étiquette pour = "FirstName"> Adresse: </ label> <div id = "item-if"> <input type = "text" value = "" name = "location.address" id = "adresse" placeholder = "Geographic Location est en cours </ body> <script type = "text / javascript"> wx.config ({debug: true, // activer le mode de débogage, les valeurs de retour de toutes les API appelées seront alertées sur le client. Pour afficher les paramètres passés, vous pouvez les ouvrir côté PC. Obligatoire, l'identification unique de l'horodatage officiel du compte: '$ {jswechatconfig.timestamp}', // requis, l'horodatage généré pour la signature noncestr: '$ {jSwechatConfig.Noncestr}', // requis, la chaîne aléatoire générée pour la signature de signature: '$ {JaChatConfig. APPENDICE 1 JSAPILIST: ['CheckjSapi', 'OpenLocation', 'GetLocation'] // Obligatoire, la liste des interfaces JS à utiliser et la liste de toutes les interfaces JS est indiquée dans l'annexe 2}); wx.checkjsapi ({jsapilist: ['getLocation'], // liste des interfaces JS qui doivent être détectées. Voir l'annexe 2 pour toutes les interfaces JS. Success: Function (res) {if (res.checkResult.getLocation == False) {alert ('votre version wechat est trop faible et ne prend pas en charge l'interface JS de WECHAT. Version! '); return;}}}); var latitude; Var Longitude; Var Speed; précision var; wx.ready (function () {// Après la vérification des informations de configuration, la méthode Ready sera exécutée. Tous les appels d'interface doivent être obtenus après que l'interface de configuration obtient le résultat. La configuration est un fonctionnement asynchrone d'un client. Je n'ai pas besoin d'être placé dans la fonction prête. Alerte de précision (latitude); WX.Error (fonction (res) {// Si les informations de configuration ne parviennent pas à vérifier, la fonction d'erreur sera exécutée. Si la signature expire, la vérification échoue. Pour les messages d'erreur spécifiques, vous pouvez ouvrir le mode de débogage de configuration, ou afficher dans le paramètre res renvoyé. Pour les spas, vous pouvez mettre à jour la signature ici. Alert ("Vérification Error");}); </cript> </html>Vous pouvez le déboguer via l'outil de développeur Web WeChat officiellement fourni par WeChat.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.