Esta parte requer o uso do JS-SDK do WeChat, que é um kit de ferramentas de desenvolvimento da Web baseado no WeChat fornecido pela plataforma pública do WeChat para desenvolvedores da Web.
Ao usar o WeChat JS-SDK, os desenvolvedores da Web podem usar o WeChat para usar com eficiência a capacidade de tirar fotos, selecionar fotos, voz, localização e outros sistemas móveis e pode usar diretamente os recursos exclusivos do WeChat, como compartilhamento, varredura, digitalização, cupons de cartão e pagamento para fornecer aos usuários do Wechat uma melhor experiência na Web.
Documentação oficial
1. Introdução de JS-SDK
1. Faça login na plataforma pública do WeChat primeiro e insira as "Configurações da função" de "Configurações da conta pública" e preencha o "Nome do domínio da segurança da interface JS". Assim como a autorização da página da web, é apenas um nome de domínio.
2. Apresente um dos seguintes arquivos JS na página que precisa chamar a 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/jweixin-1.2.0.js"> scres.wx.qq.com/open/jweixin-1.2.0.js "> scres.wx.qq.com/open/jweixin-1.2.0.js.
2. Verifique a configuração através da interface de configuração
wx.config({ debug: true, // Turn on debug mode, the return values of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side. The parameter information will be printed through the log and will only be printed on the PC side. appId: '', // Required, the unique identification of the official account timestamp: , // Required, the timestamp generated for the signature NON -CEST: '', // Necessário, a sequência aleatória gerada para a assinatura da assinatura: '', // Necessário, o JSapilist de assinatura: [] // necessário, a lista de interfaces JS que precisam ser usadas});Primeiro, antes de gerar essa assinatura, você precisa obter um ticket temporário JSAPI_TICKET. JSAPI_TICKET é um ticket temporário usado pela conta oficial para ligar para a interface WeChat JS. Em circunstâncias normais, o período de validade do JSAPI_Ticket é de 7200 segundos, o que é obtido através do Access_Token. Como o número de chamadas de API para obter JSAPI_Ticket é muito limitado, a atualização frequente do JSAPI_TICKET levará a que as chamadas de API sejam limitadas, afetando seus próprios negócios e também precisam controlar a atualização de um servidor de controle central.
1. Obtenha notas temporárias
Resultado do retorno do encapsulamento
pacote com.phil.wechatauth.model.resp; importar com.phil.common.result.resultState; /** * jsapi_ticket is a temporary ticket used by the official account to call the WeChat JS interface* @author phil * @date August 21, 2017* */ public class JsapiTicket extends ResultState { /** * */ private static final long serialVersionUID = -357009110782376503L; Ticket String Private; // jsapi_ticket string privada expira_in; public string getticket () {return ticket; } public void Setticket (Ticket String) {this.Ticket = Ticket; } public string getExpires_in () {return expires_in; } public void setExpires_in (string expires_in) {this.expires_in = expires_in; }}Como conseguir
/ *** Obtenha o ticket temporário para ligar para a interface WeChat JS por JSAPI_TICKET* @RETURN*/ public String getticket (String accessToken) {jsapiticket jsapiticket = null; Mapa <string, string> params = new Treemap <string, string> (); params.put ("access_token", accessToken); params.put ("TIPO", "JSAPI"); String resultado = 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 (); } retornar nulo; }2. Gere uma assinatura e parâmetros de retorno
As regras de geração de assinatura são as seguintes: Os campos que participam da assinatura incluem não -CEST (string aleatória), JSAPI_TICKET válido, Timestamp (Timestamp), URL (o URL da página da web atual, sem incluir # e suas peças subsequentes). Depois de classificar todos os parâmetros a serem assinados de pequeno a grande (ordem do dicionário) de acordo com o código ASCII do nome do campo, o formato do par de valores de chave URL (ou seja, key1 = value1 e key2 = value2…) é usado para se unir em uma string string1. Deve -se notar aqui que todos os nomes de parâmetros são caracteres minúsculos. String1 é criptografado e o nome do campo e o valor do campo são valores originais e nenhuma escape de URL é executada.
Exemplo de string1 é o seguinte
JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5H9NBSLYY3-SL-HHTDFL2FZFY1A OCHKP7QG & NONCEST = WM3WZYTPZ0WZCCNW × TAMP = 1414587457 & url = http: //mp.weixin.qq.com? Params = value
Há um poço aqui. A página não é não -CEST, mas o campo assinado não é não -CEST. Preste atenção ao encapsulamento simples das informações de configuração de configuração JS-SDK.
pacote com.phil.wechatauth.model.resp; / *** JS-SDK PAGE INFORMAÇÃO DE CONFIGURAÇÃO* @Author Phil* @Date 22 de agosto de 2017**/ public class JSwechatConfig {private String Appid; Timestamp privativo longo; String privada não -CEST; assinatura privada de string; public string getAppid () {return appid; } public void Setappid (string appid) {this.appid = Appid; } public long gettimestamp () {return timestamp; } public void setTimestamp (Timestamp longo) {this.timestamp = timestamp; } public string getNoCest () {return Non -CEST; } public void SetNoCest (String não -CEST) {this.NonceST = Non -CEST; } public string getSignature () {return assinatura; } public void SetSignature (String Signature) {this.signature = Signature; }}Adicione informações de configuração à página
/ ** * */ pacote com.phil.wechatauth.controller; importar java.util.sortedmap; importar java.util.treemap; importar javax.servlet.http.httpServletRequest; importar org.springframework.beans.factory.annotation.autowired; importar org.springframework.tereotype.controller; importar org.springframework.web.bind.annotation.requestmapping; importar com.phil.common.config.systemconfig; importar com.phil.common.config.wechatconfig; importar com.phil.common.util.dateTimeUtil; importar com.phil.common.util.payutil; importar com.phil.common.util.signatureutil; importar com.phil.wechatauth.model.resp.jswechatconfig; importação com.phil.wechatauth.service.wechatauthservice; /** * JS-SDK * @Author Phil * @Date 21 de agosto de 2017 * */@Controller @RequestMapping ("/auth") Classe pública Wechatauthcontroller {@aUTowired Private WechatauthService WeChatauthService; /** * Obtenha localização geográfica * @param request * @return * @throws Exception */@RequestMapping ("/getLocation") public String getLocation (httpServletRequest Solicy) lança exceção {jswechatconfig jswechatconfig = new jswechatconfig (); jswechatconfig.setappid (wechatconfig.app_id); jswechatconfig.settimestamp (dateTimeUtil.currenttime ()); jswechatconfig.setNoCest (payutil.createnoCest ()); STORDMAP <Object, Object> map = new Treemap <Object, Object> (); map.put ("jsapi_ticket", weChatauthservice.getticket (wechatauthservice.findlastestToken ())); map.put ("não -cest", jswechatconfig.getNoCest ()); map.put ("timestamp", jswechatconfig.gettimestamp ()); map.put ("url", request.getRequesturl (). tostring ()); String Signature = SignatureUtil.creatasha1sign (mapa, null, SystemConfig.Character_Encoding); jswechatconfig.SetSignature (assinatura); request.setAttribute ("jswechatconfig", jswechatconfig); retornar "WeChatauth/getLocation"; }}Método de assinatura
/ *** Participa da assinatura através de todos os elementos no mapa <classedMap, objeto>** @param mapa coleta de mapas a serem assinados* @params apikey apikey se vazio, não participará da assinatura e, se não for vazio, o objeto de stringsike (objeto), string string, stringsike e não notsignparams (mapa, apikey); Messagedigest md = null; tente {md = Messagedigest.getInstance ("sha-1"); byte [] Digest = md.digest (resultado.getBytes ()); resultado = bytetoStr (Digest); } catch (nosuchalgorithMexception e) {e.printStackTrace (); } resultado de retorno; }Outros métodos de assinatura
3. Verificação bem -sucedida através do processamento de interface pronta
A execução acima é concluída e a página completa é inserida
<%@ página linguagem = "java" contentType = "text/html; charset = utf-8" PageEncoding = "utf-8"%> <! <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> obter localização geográfica </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.5/cssssssp.bboots.BOOTSAP.BOOTSP.NINCS.NCOTSTRAP/3.5/CSSSSSSSSSSSSSSOTSP.BOOTSP.BOOTSP.BOOTCSS.NCOMBS.NOTSTRAP/ src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> </head> <body> <br> <div> <div> <etiquety para = "primeironame"> endereço: </etiquet> <div id = "item-f"> espaço reservado = "A localização geográfica está sendo obtida" tabindex = "1" autocomplete = "off"/> <div id = "i-name"> </div> </div> </div> </div> </body> <script type = "text/javascript"> wx.config ({{denuncie: true, // gira no modo de devolução, a TOM RETORN, TOMET ON. Parâmetros, você pode abri -los no lado do PC. '${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 As interfaces JS são mostradas no Apêndice 2}); wx.checkjsapi ({jsapilist: ['getLocation'], // Lista de interfaces JS que precisam ser detectadas. Consulte o Apêndice 2 para todas as listas de interfaces js. versão! '); var latitude; longitude var; velocidade var; VAR precisão; wx.ready (function () {// Após a verificação da informação de configuração, o método pronto será executado. Todas as chamadas de interface devem ser obtidas após a interface config obtiver o resultado. Config é uma operação assíncrona de um cliente. Portanto, se você precisa de que a interface relevante é que a interface relevante deve ser chamada para garantir que a função relevante seja chamada para garantir a função relevante. Diretamente, e não precisa ser colocado na função pronta. // Alerta de precisão de localização (Latitude); wx.error (function (res) {// Se as informações de configuração falharem em verificar, a função de erro será executada. Se a assinatura expirar, a verificação falhar. Para mensagens de erro específicas, você pode abrir o modo de depuração de configuração ou visualizá -lo no parâmetro de retorno. Para SPAs, você pode atualizar a assinatura aqui. </script> </html>Você pode depurar através da ferramenta de desenvolvedor da WeChat Web fornecida oficialmente pelo WeChat.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.