이 부분에는 WeChat Public Public 플랫폼이 웹 개발자를위한 WeChat을 기반으로하는 웹 개발 툴킷 인 WeChat의 JS-SDK를 사용해야합니다.
웹 개발자는 WeChat JS-SDK를 사용하여 WeChat을 사용하여 사진, 음성, 위치 및 기타 모바일 시스템을 선택하고 WeChat의 고유 한 기능을 사용하여 WeChat 공유, 스캔, 카드 쿠폰 및 WeChat 사용자에게 더 나은 웹 경험을 제공 할 수 있습니다.
공식 문서
1. JS-SDK 소개
1. WeChat 공개 플랫폼에 먼저 로그인하고 "공개 계정 설정"의 "기능 설정"을 입력하고 "JS 인터페이스 보안 도메인 이름"을 작성하십시오. 웹 페이지 승인과 마찬가지로 도메인 이름 일뿐입니다.
2. JS 인터페이스를 호출 해야하는 페이지에 다음 JS 파일 중 하나를 소개합니다.
<script src = "http://res.wx.qq.com/open/js/jweixin-1.2.js"> </script> <script src = "https://res.wx.qq.qq.com/open/js/jweixin-1.2.js"> </script>
2. 구성 인터페이스를 통해 구성을 확인하십시오
wx.config ({debug : true, // debug mode, debug mode, 모든 API의 반환 값은 클라이언트에서 경고됩니다. 전달 된 매개 변수를 보려면 PC 쪽에서 열 수 있습니다. 매개 변수 정보는 로그를 통해 인쇄 될 것이며 PC 측에서만 인쇄 될 것입니다. 비정부 : '', // 필수, 서명 서명에 생성 된 임의의 문자열 : '', // 필수, 서명 jsapilist : [] // 사용해야 할 js 인터페이스 목록});먼저이 서명을 생성하기 전에 임시 티켓 JSAPI_TICKET을 얻어야합니다. JSAPI_TICKET은 공식 계정에서 WeChat JS 인터페이스에 전화하는 데 사용되는 임시 티켓입니다. 정상적인 상황에서 JSAPI_TICKET의 유효 기간은 7200 초이며 Access_Token을 통해 얻습니다. JSAPI_TICKET을 얻기위한 API 호출 수는 매우 제한적이므로 JSAPI_TICKET의 빈번한 새로 고침은 API 호출이 제한되어 자체 비즈니스에 영향을 미치며 중앙 제어 서버의 새로 고침을 제어해야합니다.
1. 임시 메모를 얻으십시오
캡슐화 결과는 결과를 반환합니다
package com.phil.wechatauth.model.resp; import com.phil.common.result.resultstate; / *** JSAPI_TICKET은 공식 계정에서 WeChat JS 인터페이스를 호출하는 데 사용되는 임시 티켓입니다.* @Author Phil* @Date 2017**/ public class jsapiticket extends resultstate {/ ***/ private static 최종 최종 최종 SerialVersionUID = -357009110782376503L; 개인 문자열 티켓; // jsapi_ticket private string expripes_in; 공개 문자열 getTicket () {리턴 티켓; } public void setticket (문자열 티켓) {this.ticket = 티켓; } public String getExpires_in () {return expripes_in; } public void setexpires_in (String expripes_in) {this.expires_in = expires_in; }}그것을 얻는 방법
/ *** jsapi_ticket*/ 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"); 문자열 결과 = 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. 서명 및 리턴 매개 변수를 생성합니다
서명 생성 규칙은 다음과 같습니다. 서명에 참여하는 필드에는 비 CESTR (임의 문자열), 유효한 JSAPI_TICKET, TIMESTAMP (TimesTAMP), 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 = value
여기에 구덩이가 있습니다. 페이지는 비정규이지만 서명 된 필드는 비정규입니다. JS-SDK 구성 구성 정보의 간단한 캡슐화에주의하십시오.
package com.phil.wechatauth.model.resp; / *** JS-SDK 페이지 구성 정보* @Author Phil* @Date 2017 년 8 월 22 일**/ public class jswechatconfig {private String appid; 개인 긴 타임 스탬프; 개인 문자열 비 시세; 개인 문자열 서명; 공개 문자열 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 getNoncest () {return noncestres; } public void setNoncest (String noncestr) {this.noncest = noncestres; } public String getSignature () {return signature; } public void setSignature (문자열 서명) {this.signature = signature; }}페이지에 구성 정보를 추가하십시오
/ ** * */ 패키지 com.phil.wechatauth.controller; java.util.sortedMap import; Java.util.treemap import; import javax.servlet.http.httpservletrequest; org.springframework.beans.factory.annotation.autowired; org.springframework.stereotyp.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 2017 년 8 월 21 일 */@Controller @RequestMapping ( "/Auth") 공개 클래스 WechatauthController {@autowired private wechatauthservice wechatauthservice; /** * 지리적 위치 가져 오기 * @param request * @return * @throws Exception */@requestmapping ( "/getLocation") public String getLocation (httpservletrequest request) 예외 {jswechatconfig JSweChatConfig = new JSweChatConfig (); jswechatconfig.setAppid (wechatconfig.app_id); jswechatconfig.settimestamp (dateTimeUtil.currentTime ()); jswechatconfig.setnoncest (payutil.createnoncest ()); SortedMap <객체, 개체>지도 = new Treemap <개체, 개체> (); map.put ( "jsapi_ticket", wechatauthservice.getticket (wechatauthservice.findlastesttoken ())); map.put ( "비정부", jswechatconfig.getnoncest ()); map.put ( "timestamp", jswechatconfig.gettimestamp ()); map.put ( "url", request.getRequestUrl (). toString ()); 문자열 서명 = signatureUtil.createSha1Sign (map, null, systemConfig.character_encoding); JSweChatConfig.setSignature (서명); request.setAttribute ( "jswechatconfig", jswechatconfig); "wechatauth/getLocation"을 반환합니다. }}서명 방법
/ *** 맵 <SortedMap, Object>*** @param 맵에 서명 할 맵의 모든 요소를 통해 서명에 참여합니다. notsignparams (지도, apikey); MessageDigest md = null; try {md = messageDigest.getInstance ( "SHA-1"); 바이트 [] digest = md.digest (result.getBytes ()); 결과 = BYTETOSTR (다이제스트); } catch (nosuchalgorithmexception e) {e.printstacktrace (); } 반환 결과; }다른 서명 방법
3. 준비된 인터페이스 처리를 통한 성공적인 검증
위의 실행이 완료되고 전체 페이지가 입력됩니다.
<%@ page language = "java"contmenttype = "text/html; charset = utf-8"pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtml 4.01 transitional // en" "http://www.w3.org/tr/tml/html 4/tml/html 4/tml 4.html/html 4.tml. <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.js"> </script> <link rel = "stylesheet"href = "http://cdn.bootcss.com/bootstrap/3.3.5/css/bootttrap.min.css"> src = "http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> </head> <br> <biv> <div> <label for = "firstname"> 주소 : </label> <div id = "items"> adown = "name" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" 자리 표시기 = "지리적 위치는"tabindex = "1"autocomplete = "off"/> <div id = "i-name"> </div> </div> </div> </div> </body> <script type = "text/javaScript"> wx.config (debug : true, // debug 모드, debug vess on pass of alert will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will will. 매개 변수는 PC쪽에 열릴 수 있습니다. 매개 변수는 로그를 통해 인쇄 될 수 있으며 '$ {jswechatconfig.appid}', // 공식 계정 타임 스탬프의 고유 한 식별 : '$ {jswechatconfig.timestamp}'. '$ {jswechatconfig.noncest}', // 필수, 서명에 의해 생성 된 임의의 문자열은 서명입니다 : '$ {jswechatconfig.signature}', // 필수, 서명은 부록 1 JSapilist : [ 'Checkjsapi', 'OpenLocation', 'getlocation']에 표시됩니다. JS 인터페이스는 부록 2}에 표시됩니다. wx.checkjsapi ({jsapilist : [getLocation '], // 감지 해야하는 JS 인터페이스 목록. 모든 js 인터페이스 목록에 대해서는 부록 2를 참조하십시오. 성공 : function (res) {if (res.checkresult.getloction == false) {wechat 버전이 너무 낮고 Wheely js on wefling js wefling js를 지원하지 않습니다. 버전! '); return}}); var 위도; var 경도; var 속도; var 정확도; wx.ready (function () {// 구성 정보 확인 후 준비 메소드가 실행됩니다. 구성 인터페이스가 결과를 얻은 후 모든 인터페이스 호출을 얻어야합니다. 구성은 클라이언트의 비동기 조작입니다. 따라서 페이지를로드 할 때 관련 인터페이스를 호출 해야하는 경우, 올바른 실행을 보장해야합니다. 직접, wx.getLocation에 배치 할 필요가 없습니다. // 위치 정확도 (위도) (정확도); wx.error (function (res) {// 구성 정보가 확인되지 않으면 오류 함수가 실행됩니다. 오류 기능이 실행됩니다. 서명이 만료되면 확인이 실패합니다. 특정 오류 메시지의 경우 디버그 모드를 열거나 반환 된 해안 매개 변수에서이를 볼 수 있습니다. </script> </html>WeChat에서 공식적으로 제공 한 WeChat 웹 개발자 도구를 통해 디버깅 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.