Esta parte requiere el uso de JS-SDK de WeChat, que es un kit de herramientas de desarrollo web basado en WeChat proporcionado por la plataforma pública WeChat para desarrolladores web.
Al usar WeChat JS-SDK, los desarrolladores web pueden usar WeChat para utilizar eficientemente la capacidad de tomar imágenes, seleccionar imágenes, voz, ubicación y otros sistemas móviles, y pueden usar directamente las capacidades únicas de WeChat, como el intercambio de wechat, el escaneo, los cupones de tarjetas y el pago para proporcionar a los usuarios de WeChat una mejor experiencia web.
Documentación oficial
1. Introducción de JS-SDK
1. Inicie sesión en la plataforma pública WeChat primero e ingrese la "Configuración de funciones" de "Configuración de cuenta pública" y complete el "Nombre de dominio de seguridad de la interfaz JS". Al igual que la autorización de la página web, es solo un nombre de dominio.
2. Introducir uno de los siguientes archivos JS en la página que necesita llamar a la interfaz 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"> </script>
2. Verifique la configuración a través de la interfaz de configuración
wx.config ({debug: true, // activar el modo de depuración, los valores de retorno de todas las API llamadas se alertarán en el cliente. Para ver los parámetros pasados, puede abrirlos en el lado de la PC. La información de parámetros se imprimirá a través del registro y solo se imprimirá en el lado de la PC. Appid: '', // requerido, la identificación única de la cuenta oficial de la cuenta:, // se requerirá, el tiempo de tiempo para el tiempo de tiempo, el tiempo de tiempo para el tiempo de tiempo, el tiempo de tiempo para el tiempo de tiempo, el tiempo de tiempo para el Tiempo de tiempo para el Tiempo de tiempo. '', // requerido, la cadena aleatoria generada para la firma de la firma: '', // requerida, la firma jsapilist: [] // requerida, la lista de interfaces js que deben usarse});Primero, antes de generar esta firma, debe obtener un boleto temporal JSAPI_Ticket. JSAPI_Ticket es un boleto temporal utilizado por la cuenta oficial para llamar a la interfaz WeChat JS. En circunstancias normales, el período de validez de JSAPI_Ticket es de 7200 segundos, que se obtiene a través de Access_Token. Dado que el número de llamadas de API para obtener JSAPI_Ticket es muy limitado, la actualización frecuente de JSAPI_Ticket conducirá a que las llamadas API sean limitadas, afectan su propio negocio, y también necesitará controlar la refrescante de un servidor de control central.
1. Obtenga notas temporales
Resultado de devoluciones de encapsulación
paquete com.phil.wechatauth.model.esp; import com.phil.common.result.resultState; / *** JSAPI_Ticket es un boleto temporal utilizado por la cuenta oficial para llamar a la interfaz WeChat JS* @author Phil* @Date 21 de agosto de 2017**/ public class Jsapiticket extiende el estado de resultados {/ ****/ privado estático final de sugerencia larga estándar = -357009110782376503LL; boleto de cadena privada; // jsapi_ticket cadena privada expires_in; public String getTicket () {Ticket de retorno; } public void setticket (ticket de cadena) {this.ticket = ticket; } public String getExpires_in () {return expires_in; } public void setExpires_in (string expires_in) {this.expires_in = expires_in; }}Cómo conseguirlo
/ *** Obtenga el boleto temporal para llamar a la interfaz WeChat JS por 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"); String dult = httprequtil.httpdefaultExeCute (httprequtil.get_method, wechatconfig.get_ticket_url, params, ""); if (stringUtils.isnotblank (resultado)) {jsapiticket = jsonutil.FromJson (resultado, jsapiticket.class); } if (jsapiticket.getErRcode () == 0) {return jsapiticket.getticket (); } return null; }2. Genere una firma y parámetros de retorno
Las reglas de generación de la firma son las siguientes: los campos que participan en la firma incluyen Non -Cestr (cadena aleatoria), JSAPI_Ticket válido, Timestamp (Timestamp), URL (la URL de la página web actual, sin incluir # y sus partes posteriores). Después de clasificar todos los parámetros que se firmarán de pequeño a grande (orden de diccionario) de acuerdo con el código ASCII del nombre del campo, el formato del par de valores clave de URL (es decir, Key1 = Value1 & Key2 = Value2 ...) se usa para empalmarse en una cadena String1. Cabe señalar aquí que todos los nombres de parámetros son caracteres en minúsculas. String1 está encriptado, y el nombre de campo y el valor de campo son valores originales y no se realiza un escape de URL.
El ejemplo de String1 es el siguiente
JSAPI_Ticket = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSYY3-SL-HHTDFL2FZFY1A OCHKP7QG & NONCESTR = WM3WZYTPZ0WZCCNW × TAMP = 1414587457 & url = http: //mp.weixin.qq.com? Params = valor
Hay un pozo aquí. La página no tiene corte, pero el campo firmado es sin captura. Preste atención a la encapsulación simple de la información de configuración de configuración JS-SDK.
paquete com.phil.wechatauth.model.esp; / *** Información de configuración de la página JS-SDK* @author Phil* @Date 22 de agosto de 2017**/ public class JSwechatConfig {private String AppID; marca de tiempo de larga duración privada; cadena privada sin cocuración; firma de cadena privada; public String 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 no cuestr; } public void setnoncestr (string non -coestr) {this.noncestr = non -coestr; } cadena pública getSignature () {return Signature; } public void setSignature (String Signature) {this.signature = Signature; }}Agregar información de configuración a la página
/ ** * */ paquete com.phil.wechatauth.controller; import java.util.sortedmap; import java.util.Treemap; import javax.servlet.http.httpservletRequest; importar org.springframework.beans.factory.annotation.aUtowired; importar org.springframework.stereotype.controller; importar 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 de agosto de 2017 * */@Controller @RequestMapping ("/Auth") Class pública WeCHATAUTHController {@aUtowired WeChatauthService WeChatauthService; /** * Obtener la ubicación geográfica * @param solicitud * @return * @throws excepción */@RequestMapping ("/getLocation") public String getLocation (httpservletRequest request) lanza la excepción {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> (); map.put ("jsapi_ticket", wechatauthservice.getticket (wechatauthservice.findlastesttoken ())); map.put ("noncestr", jswechatconfig.getNoncestr ()); map.put ("timestamp", jswechatconfig.gettimestamp ()); map.put ("url", request.getRequestUrl (). toString ()); Cadena firma = firatureUtil.createsha1sign (map, null, systemconfig.character_encoding); JSWECHATCONFIG.SETSIGLATURA (firma); request.setAttribute ("JSWECHATCONFIG", JSWECHATCONFIG); return "wechatauth/getLocation"; }}Método de firma
/ *** Participe en firma a través de todos los elementos en map <sortedmap, object>** @param Map Collection de mapas para firmarse* @params apikey apikey si está vacío, no participará en firma, y si no está vacío, participará en firma* @return*/ public static string string creatha1sign (SortedMap <Object> map, string apikey, string, string string string {string string string string createSha1sign) NotSignParams (mapa, apikey); MessageDigest MD = nulo; intente {md = messageDigest.getInstance ("sha-1"); byte [] digest = md.digest (resultado.getBytes ()); resultado = bytetoStr (digest); } Catch (nosuchalgorithMexception e) {E.PrintStackTrace (); } resultado de retorno; }Otros métodos de firma
3. Verificación exitosa a través del procesamiento de interfaz listo
La ejecución anterior se completa y se ingresa la página completa
<%@ page lenguaje = "java" contentType = "text/html; charset = utf-8" PageEncoding = "utf-8"%> <! DocType html public "-// w3c // dtd html 4.01 transición // en" "http://www.w3.org/tr/html4/loos.dttd <html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> Obtener ubicación geográfica </title> <!-wechat js-sdk-> <script src = "http://res.wx.qq.com/open/js/jsixin-1.2. <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> </head> <body> <br> <div> <div> <etiqueta for = "firstName"> dirección: </selabel> <div id = "item-if"> <input type = "text" value = "" name = "ubicación.address" id = "dirección" de la dirección = "ubicación geográfica se está obteniendo" tabindex = "1" autocompletete = "off"/> <dividi = "ID" ID "iName"> <DivIs> </Div Divi </body> <script type = "text/javascript"> wx.config ({debug: true, // activar el modo de depuración, los valores de retorno de todas las API llamadas se alertarán en el cliente. Para ver los parámetros pasados, puede abrirlos en el lado de la PC. La información de los parámetros se imprimirá a través del registro y solo se imprimirá en el lado de PC. Requerido, la identificación única de la marca de tiempo de la cuenta oficial: '$ {jswechatconfig.timestamp}', // requerida, la marca de tiempo generada por la firma es noncestr: '$ {jswechatconfig.noncestr}', // requerida, la cadena aleatoria generada por la firma es la firma: '$ {jswechatconfig.signature}} requerida, se requiere la firma de la firma:' $ {jswechatconfig.signature} Apéndice 1 JSapilist: ['checkjsapi', 'OpenLocation', 'getLocation'] // requerido, la lista de interfaces JS que se utilizarán, y la lista de todas las interfaces JS se muestra en el Apéndice 2}); wx.checkjsapi ({jsapilist: ['getLocation'], // Lista de interfaces JS que deben detectarse. Consulte el Apéndice 2 para todas Versión! '); Var latitud; VAR Longitud; velocidad var; VAR precisión; 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 to ser colocado en la función lista. alerta (latitud); wx.error (function (res) {// Si la información de configuración no puede verificar, se ejecutará la función de error. Si la firma expira, la verificación falla. Para mensajes de error específicos, puede abrir el modo de depuración de configuración o verla en el parámetro RES devuelto. Para SPA, puede actualizar la firma aquí. Alerta ("Error de verificación");}); </script> </html>Puede depurarlo a través de la herramienta WeChat Web Developer proporcionada oficialmente por WeChat.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.