この部分では、WechatのJS-SDKを使用する必要があります。これは、Web開発者向けのWeChat Public Platformが提供するWeChatに基づいたWeb開発ツールキットです。
WeChat JS-SDKを使用することにより、Web開発者はWeChatを使用して、写真を撮る能力、音声、場所、その他のモバイルシステムを選択する能力を効率的に使用でき、WeChatの共有、スキャン、カードクーポン、支払いなどのWeChatのユニークな機能を直接使用してWeChatユーザーにWeb体験を提供できます。
公式文書
1。JS-SDKの導入
1.最初にWeChatパブリックプラットフォームにログインし、「パブリックアカウント設定」の「関数設定」を入力し、「JSインターフェイスセキュリティドメイン名」に入力します。 Webページの承認と同じように、それは単なるドメイン名です。
2。ページ上にJSインターフェイスを呼び出す必要がある次の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。構成インターフェイスを介して構成を確認します
wx.config（{debug：true、//デバッグモードをオンにすると、呼び出されたすべてのAPIの戻り値がクライアントに警告されます。パスされたパラメーターを表示するには、PC側でそれらを開くことができます。パラメーター情報はログを介して印刷され、PC側にのみ印刷されます。 noncestr： ''、//必須、署名署名のために生成されたランダム文字列： ''、//必須、署名jsapilist：[] //必要なJSインターフェイスのリスト}）;まず、この署名を生成する前に、一時的なチケットJSAPI_TICKETを取得する必要があります。 JSAPI_Ticketは、WeChat JSインターフェイスを呼び出すために公式アカウントで使用される一時的なチケットです。通常の状況では、JSAPI_Ticketの有効期間は7200秒で、Access_Tokenから取得されます。 JSAPI_TICKETを取得するためのAPIコールの数は非常に限られているため、JSAPI_TICKETの頻繁な更新はAPIコールが制限され、独自のビジネスに影響を与え、中央制御サーバーのリフレッシュを制御する必要があります。
1.一時的なメモを取得します
カプセル化は結果を返します
パッケージcom.phil.wechatauth.model.resp; com.phil.common.result.resultstateをインポートします。 / *** JSAPI_TICKETは、公式アカウントで使用される一時的なチケットであり、WeChat JSインターフェイス* @Author Phil* @Date 2017年8月21日**/パブリッククラスJSAPITICKET {/ ****/ Private Static Final Long SerialVersionUID = -357009110782376503L;プライベート文字列チケット。 // jsapi_ticketプライベート文字列expires_in; public string getTicket（）{return 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; }}それを取得する方法
/ *** jsapi_ticketによるwechat jsインターフェイスを呼び出す一時的なチケットを取得します* @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 result = 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（）; } nullを返します。 }2。署名パラメーターと返品パラメーターを生成します
署名の生成ルールは次のとおりです。署名に参加するフィールドには、非cestr（ランダム文字列）、有効なJSAPI_TICKET、タイムスタンプ（タイムスタンプ）、URL（現在のWebページの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構成情報の単純なカプセル化に注意してください。
パッケージcom.phil.wechatauth.model.resp; / *** JS-SDK Page Configuration Information* @Author Phil* @date 2017年8月22日**/パブリッククラスjswechatconfig {private string appid;プライベートロングタイムスタンプ。プライベート文字列noncestr;プライベート文字列の署名。 public string getAppid（）{return appid; } public void setAppid（string appid）{this.appid = appid; } public long getTimestamp（）{return timestamp; } public void sittimestamp（長いタイムスタンプ）{this.timestamp = timestamp; } public string getNonCestr（）{return noncestr; } public void setnoncestr（string noncestr）{this.noncestr = noncestr; } public string getSignature（）{return signature; } public void setSignature（string signature）{this.signature = signature; }}[構成情報]をページに追加します
/ ** * */パッケージcom.phil.wechatauth.controller; java.util.sortedMapをインポートします。 java.util.treemapをインポートします。 javax.servlet.http.httpservletrequestをインポートします。 Import org.springframework.beans.factory.annotation.autowired; org.springframework.stereotype.controllerをインポートします。 org.springframework.web.bind.annotation.requestmappingをインポートします。 com.phil.common.config.systemconfigをインポートします。 com.phil.common.config.wechatconfigをインポートします。 com.phil.common.util.datetimeutilをインポートします。 com.phil.common.util.payutilをインポートします。 com.phil.common.util.signatureutilをインポートします。 com.phil.wechatauth.model.resp.jswechatconfigをインポートします。 com.phil.wechatauth.service.wechatauthserviceをインポートします。 /** * js-sdk * @author phil * @date 2017年8月21日 * */@controller @requestmapping（ "/auth"）パブリッククラスwechatauthcontroller {@autowired private wechatauthservice wechatauthservice; /** GET GET GEOGRAPHICAL LOCATION * @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.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（））; string signature = signatureutil.createsha1sign（map、null、systemconfig.character_encoding）; jswechatconfig.setsignature（signature）; request.setAttribute（ "JSWECHATCONFIG"、JSWECHATCONFIG）; 「wechatauth/getLocation」を返します。 }}署名方法
/ ***マップのすべての要素を介して署名に参加する<SortedMap、ObjectedMap>** @Param MAPコレクション署名* @Params Apikey Apikeyが空であれば、署名に参加せず、署名* @return*/ public Static Stringsha1sign（sortedmap <objectedmap <objectedmap、shortedmap、shortedmap <objectedmap、sortedmap <objectedmap <objectedmap、 notsignparams（Map、Apikey）; MESSAGED GIGEST MD = null; try {md = mesagedigest.getInstance（ "sha-1"）; byte [] digest = md.digest（result.getBytes（））; result = bytetostr（digest）; } catch（nosuchalgorithmexception e）{e.printstacktrace（）; } return result; }その他の署名方法
3。準備が整ったインターフェイス処理による検証の成功
上記の実行が完了し、完全なページが入力されます
<％@ page Language = "Java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"％> <！ <html> <head> <Meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> Get Geographical Location </title> <！ - wechat js-sdk-> <script src = "http://res.wx.q <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.11.3/jquery.min.js" <br> <div> <div> <ラベル= "firstName">アドレス：</label> <div id = "item-if"> <inputタイプ= "text" value = "" name = "location.address" id = "address" placeholder = "地理的場所</body> <script type = "text/javascript"> wx.config（{debug：true、// debugモードをオンにすると、クライアントに呼び出されたすべてのAPIの戻り値がアラートされます。渡されたパラメーターを表示するには、PC側で開くことができます。 //必須、公式アカウントのタイムスタンプの一意の識別： '$ {jswechatconfig.timestamp}'、//必須、署名の非cestrのために生成されたタイムスタンプ： '$ {jswechatconfig.noncestr}'、//必要な署名署名のために生成されたランダムな文字列署名、付録1 jsapilist：['checkjsapi'、 'openlocation'、 'getLocation'] //必要なJSインターフェイスのリスト、およびすべてのJSインターフェイスのリストを付録2に示します）; wx.Checkjsapi（{jsapilist：['getlocation']、//検出する必要があるJSインターフェイスのリスト。すべてのJSインターフェイスの付録2を参照してください。バージョン！ '）; var Latitude; var経度; var Speed; var精度; wx.ready（function（）{//構成情報検証後、対応方法が実行されます。すべてのインターフェイスコールは結果を取得した後に取得する必要があります。構成はクライアントの非同期操作です。したがって、関連するインターフェイスを呼び出す必要がある場合、関連するインターフェイスは、正しい機能を正確に呼び出します。 wx.getlocation（{success：function（res）{latitude = ratitude、latitude、floating point number、範囲は90〜 -90 = res。精度アラート（緯度）; wx.error（function（res）{//設定情報が検証に失敗した場合、エラー関数が実行されます。署名が失効すると、特定のエラーメッセージのデバッグモードを開くか、返されたRESパラメーターで表示できます。スパの場合、ここで署名を更新できます。 </script> </html>WeChatが公式に提供するWechat Web Developer Toolを使用してデバッグできます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。