1. 程式人生 > >微信開發(2):微信js sdk分享朋友圈,朋友,獲取config介面注入許可權驗證(java)

微信開發(2):微信js sdk分享朋友圈,朋友,獲取config介面注入許可權驗證(java)

進行微信開發已經一陣子了,從最初的什麼也不懂,到微信授權登入,分享,更改底部選單,素材管理,等。
今天記錄一下微信jssdk 的分享給朋友的功能,獲取config介面注入。
官方文件走一下
簡單說:四步走
1.繫結域名 (注意:設定js安全域名的時候,需要設定微信ip白名單,ip白名單新出來的,非白名單內的ip無法獲取access_token 更無法獲取jsapi)
2.引入js檔案
3.通過config介面注入許可權驗證配置
4.通過ready介面處理成功驗證

來 開始分步走
1.繫結域名 繫結白名單ip 同時拿到AppID AppSecret
設定js 安全域名在 設定–>公眾號設定–>功能設定裡邊 appid appSercret 在開發–>基本配置裡
這裡寫圖片描述

2.引入js檔案 傳送請求獲取wx.config
我建立了一個頁面,引入了開發者文件中給的js檔案,使用ajax 在頁面初始化的時候 傳送請求 獲得config許可權介面配置 注入
這裡只是做了分享給朋友,和分享到朋友圈 如果需要另外別的 需要在下面js程式碼中 wx.config中jsApiList 增加需要的介面資訊
並在 wx.ready 中寫入你自己定義的引數 資料

下面程式碼 解釋: 在頁面初始化的時候,呼叫ajaxconfig();將當前頁面的url 替換處理,傳遞給後臺,寫好的方法獲取wx config.收到ajax返回後,開始初始化介面資訊,通過ready 介面處理成功驗證

<script >
$(function(){
        ajaxConfig();
 }); 
    function ajaxConfig(){
        var url=window.location.href.split('#')[0];  
         url = url.replace(/&/g, '%26'); 
    $.ajax({
            type:"post",
            dataType: "json",
            data:{
                url:url
            },
            url: "getconfig.html"
, success: function(obj){ //微信注入許可權介面 wx.config({ debug: false, appId: obj.appId, timestamp: obj.timestamp, nonceStr: obj.nonceStr, signature: obj.signature, jsApiList: [ 'onMenuShareAppMessage','onMenuShareTimeline' ] }); wx.ready(function(){ wx.onMenuShareAppMessage({ title: '${pro.wxtitle}', // 分享標題 desc: "${pro.wxdesc}", // 分享描述 imgUrl: 'http://www.yaoshihang.cn/${pro.imgurl}', link: window.location.href.split('#')[0], type: 'link' // 分享型別,music、video或link,不填預設為link }); wx.onMenuShareTimeline({ title: '${pro.wxtitle}', // 分享標題 link: window.location.href.split('#')[0], // 分享連結,該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: 'http://www.yaoshihang.cn/${pro.imgurl}' }); wx.checkJsApi({ jsApiList: [ 'onMenuShareAppMessage','onMenuShareTimeline' ], success: function (res) { //alert(res.errMsg); } }); }); wx.error(function(res){ // config資訊驗證失敗會執行error函式,如簽名過期導致驗證失敗,具體錯誤資訊可以開啟config的debug模式檢視,也可以在返回的res引數中檢視,對於SPA可以在這裡更新簽名。 // alert("errorMSG:"+res); }); }, error:function(){ //alert("系統請求異常!"); } }); }
</script>

3.後臺獲得 wxconfig 的方法(Java實現)

首先 controller層
程式碼解釋:token 和jsapi 都是需要本地快取的 下面的程式碼是先獲取jsapi 然後利用幫助類 獲得config
由於token和jsapi都是每天都有獲得次數限制,所以需要本地快取,在獲取的時候判斷快取超時沒有,如果超時就再次獲取進行快取,

@ResponseBody
    @RequestMapping("getconfig.html")
    public Map<String, Object> getconf(HttpServletRequest request,String url){      


        String jsapi=getjssdk();

        return WeixinUtil.getWxConfig(request,url,jsapi);
    }


    public String getjssdk(){
        //token  和jsapi 都是需要本地快取的
        Wxtoken token=wxService.selectByKey(1l);
        Wxtoken jsapi=wxService.selectByKey(2l);

        Date date  = new Date();
        Date jsdate=jsapi.getAddtime();
        long between=(date.getTime()-jsdate.getTime())/1000;
        if(between<6500){
         return jsapi.getToken();
        }
        Date tokendate=token.getAddtime();
        //判斷時間差  未超時 返回,超時 需要重新整理 再次返回 
         between=(date.getTime()-tokendate.getTime())/1000;
         String token2="";
         if(between<6500){
             token2=token.getToken();
        }else{
              String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+ appid + "&secret=" + secret;
              JSONObject json = WeixinUtil.httpRequest(url, "GET", null);
              token2=json.getString("access_token");
              token.setToken(token2);
              wxService.updataNotNull(token);
        }

        String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ token2 + "&type=jsapi";
        JSONObject json = WeixinUtil.httpRequest(url, "GET", null);
        if (json != null) {
            jsapi.setToken(json.getString("ticket"));
             wxService.updataNotNull(jsapi);
            return  json.getString("ticket");
        }
        return null;
    }

下面是幫助類

package com.yc.education.util;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.net.ConnectException;
import java.net.URL;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.net.ssl.HttpsURLConnection;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSocketFactory;
import javax.net.ssl.TrustManager;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import net.sf.json.JSONObject;

public class WeixinUtil {

    /**

    * 方法名:httpRequest</br>

    * 詳述:傳送http請求</br>

    * 開發人員:souvc </br>

    * 建立時間:2016-1-5  </br>

    * @param requestUrl

    * @param requestMethod

    * @param outputStr

    * @return 說明返回值含義

    * @throws 說明發生此異常的條件

     */
    public static JSONObject httpRequest(String requestUrl,String requestMethod, String outputStr) {
        JSONObject jsonObject = null;
        StringBuffer buffer = new StringBuffer();
        try {
            TrustManager[] tm = { new MyX509TrustManager() };
            SSLContext sslContext = SSLContext.getInstance("SSL", "SunJSSE");
            sslContext.init(null, tm, new java.security.SecureRandom());
            SSLSocketFactory ssf = sslContext.getSocketFactory();
            URL url = new URL(requestUrl);
            HttpsURLConnection httpUrlConn = (HttpsURLConnection) url.openConnection();
            httpUrlConn.setSSLSocketFactory(ssf);
            httpUrlConn.setDoOutput(true);
            httpUrlConn.setDoInput(true);
            httpUrlConn.setUseCaches(false);
            httpUrlConn.setRequestMethod(requestMethod);
            if ("GET".equalsIgnoreCase(requestMethod))
                httpUrlConn.connect();
            if (null != outputStr) {
                OutputStream outputStream = httpUrlConn.getOutputStream();
                outputStream.write(outputStr.getBytes("UTF-8"));
                outputStream.close();
            }
            InputStream inputStream = httpUrlConn.getInputStream();
            InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
            String str = null;
            while ((str = bufferedReader.readLine()) != null) {
                buffer.append(str);
            }
            bufferedReader.close();
            inputStreamReader.close();
            inputStream.close();
            inputStream = null;
            httpUrlConn.disconnect();
            jsonObject = JSONObject.fromObject(buffer.toString());
        } catch (ConnectException ce) {
            ce.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return jsonObject;
    }


    /**

    * 方法名:getWxConfig</br>

    * 詳述:獲取微信的配置資訊 </br>

    * 開發人員:souvc  </br>

    * 建立時間:2016-1-5  </br>

    * @param request

    * @return 說明返回值含義

    * @throws 說明發生此異常的條件

     */
    public static Map<String, Object> getWxConfig(HttpServletRequest request,String urlx,String jsapi) {
        Map<String, Object> ret = new HashMap<String, Object>();

        HttpSession session=request.getSession();
        String appId = "wx5c939bf5af08d2ea"; // 必填,公眾號的唯一標識

        String secret = "";

        String requestUrl = urlx;

        String timestamp = Long.toString(System.currentTimeMillis() / 1000); // 必填,生成簽名的時間戳

        String nonceStr = UUID.randomUUID().toString(); // 必填,生成簽名的隨機串


        String signature = "";
        // 注意這裡引數名必須全部小寫,且必須有序

        String sign = "jsapi_ticket=" + jsapi + "&noncestr=" + nonceStr+ "&timestamp=" + timestamp + "&url=" + requestUrl;
        try {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(sign.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        ret.put("appId", appId);
        ret.put("timestamp", timestamp);
        ret.put("nonceStr", nonceStr);
        ret.put("signature", signature);
        return ret;
    }


    /**

    * 方法名:byteToHex</br>

    * 詳述:字串加密輔助方法 </br>

    * 開發人員:souvc  </br>

    * 建立時間:2016-1-5  </br>

    * @param hash

    * @return 說明返回值含義

    * @throws 說明發生此異常的條件

     */
    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash) {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;

    }
}

大概就是這樣 這時候分享出去的連結 就已經是你自定義的了,不上效果圖了,有什麼錯誤的 大家指導交流

需要值得一提的是,我在開發中,始終不能獲取微信分享到朋友的點選狀態,僅僅可以做到獲取config 介面注入驗證,自定義分享內容,後來,與群友交流得知,微信已經把分享獲取點選狀態禁用到了,原因應該跟誘導使用者分享內容有關,只能設定好自定義分享內容,引導使用者點選右上角 用微信自帶的分享。。不知道是我使用介面有問題,還是說微信確實禁用了這個功能。希望,懂這個的朋友能夠指導交流下。

相關推薦

開發2:js sdk分享朋友朋友獲取config介面注入許可權驗證java

進行微信開發已經一陣子了,從最初的什麼也不懂,到微信授權登入,分享,更改底部選單,素材管理,等。 今天記錄一下微信jssdk 的分享給朋友的功能,獲取config介面注入。 官方文件走一下 簡單說:四步走 1.繫結域名 (注意:設定js安全域名的時候,需

企業JS-SDK開發------通過config介面注入許可權驗證配置

企業微信JS-SDK是企業微信面向網頁開發者提供的基於企業微信內的網頁開發工具包。通過js-sdk可以在企業微信內實現眾多功能,如調出通訊錄、調出攝像頭、隱藏部分按鈕等。使用js-sdk分為三步:1.開發頁面引入JS檔案html頁面加入<script src="//re

C#網頁開發---JSSDK使用 通過config介面注入許可權驗證配置

 1:   我們來看,下面的這個是開發需要配置的東西,我們通過開發文件來一個一個的配置wx.config({ debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出

開發之——JSSDK,通過config介面注入許可權驗證配置

步驟1:繫結域名 先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。 備註:登入後可在“開發者中心”檢視對應的介面許可權。 步驟2:引入js 在需要呼叫JS介面的頁面引入如下JS檔案,(支援https):http://res.wx.qq.com

的jssdk的config介面注入許可權驗證配置--signature的生成

生成signature有一下幾步: 1、通過 appid + appsecert 獲取公眾號的 access_token 2、根據1的access_token來獲取jsapi_token 3、隨便弄一個字串(長度不太清楚,16位及以內應該都可以)作為nonceStr、 4

【Vue】VueJS-SDK分享系列二

Vue中使用微信JS-SDK,配置分享 這是微信系列的第二篇,這裡講會講到微信SDK分享的運用(分享都會了,其他的API不就一通百通了嗎) 1:微信公眾平臺配置好域名 2:專案引入微信js-sdk 這裡我需要用到微信js-sdk的.js檔案,匯入方式: 下

小程序基礎到高級並含有 js視頻資源、算法、插件大全、面試題輕松面對面試

mov 二維 問題 linux title 微信小程序 模糊查詢 avi 事件綁定 寫在前面 參考答案及資源在看雲平臺發布,如果大家想領取資源以及查看答案,可直接前去購買。一次購買永久可看,文檔長期更新!有什麽意見與建議歡迎您及時聯系作者或留言回復! 文檔描述本文是

Java開發-崔用誌-開發-java版本

分享 bsp 基本 配置 版本 (九) get java微信 公眾 今天看到一些關於微信開發的知識蠻好的博客,分享給大家,希望對大家有幫助。 微信開發準備(一)--Maven倉庫管理新建WEB項目 微信開發準備(二)--springmvc+mybati

使用delphi+intraweb進行開發5—準備實現API先從獲取AccessToken開始 使用delphi+intraweb進行開發5—準備實現API先從獲取AccessToken開始

https://www.cnblogs.com/dpower/ 看這個部落格     使用delphi+intraweb進行微信開發5—準備實現微信API,先從獲取AccessToken開始 Posted on  2016-03-30 15:46 Del

使用delphi+intraweb進行開發5—準備實現API先從獲取AccessToken開始

由於 實例 一次 end lan con class 就是 參數 在前4講中我們已經使iw開發的應用成功和微信進行了對接,再接下來的章節中我們開始逐一嘗試和實現微信的各個API,開始前先來點準備工作 首先需要明確的是,微信的API都是通過https調用實現的,

公眾號開發--JS-SDK分享朋友分享朋友

之前寫過一篇使用微信JS-SDK來實現掃一掃功能的部落格 在該部落格裡介紹了微信JS-SDK的基本用法,其中包括以下幾個步驟 還詳細介紹了通過config介面注入許可權驗證配置以及簽名演算法實現的Java版本 前兩天在做微信分享的時候發現按照以前的

Java產品設計-開發設計5《商城saas系統之新版架構設計》

由於前面的專案架構讓我們感覺到,我們維護成本比較大,並且專案之間的業務需求太過於緊密,我們開始對專案進行架構重組,開始規劃這個新版的設計! 新版 的設計,結構很清晰。 主專案: 子模組plugin 一、專案框架: 1、採用Spring3.X+SpringM

公眾號開發《四》使用JS-SDK實現手機圖片上傳支援壓縮、預覽。並下載圖片到自身伺服器

在這貼上上三篇博文連結,方便大家查閱互相學習: 本次講解微信開發第四篇:呼叫微信JS-SDK實現上傳手機圖片到伺服器,是非常常見的功能。如我們看到的使用者上傳頭像 下面是本次要實現的效果圖,支援預覽,壓縮上傳(自帶,可引數控制) 1.準備工作:工欲善其事,必先利其

網頁開發彈出“非官方網頁 轉換為手機預覽模式”原因記錄

最近做微信公眾號開發,開發完成後部署,發現一個奇怪的問題,對於我訪問的每一個網頁,微信都會彈出攔截頁面,顯示“微信網頁開發 非微信官方網頁 轉換為手機預覽模式”,要點選“繼續”才能繼續訪問。 原因: 介面url,js安全域等填的是ip,實際上如果你選單跳轉的url用的是ip

好友大揭秘使用Python抓取朋友數據通過人臉識別全面分析好友一起看透你的“朋友

類型 get ads pid 地圖 文本文 .json image pack 微信:一個提供即時通訊服務的應用程序,更是一種生活方式,超過數十億的使用者,越來越多的人選擇使用它來溝通交流。 不知從何時起,我們的生活離不開微信,每天睜開眼的第一件事就是打開微信,關註著朋友圈裏

關於JS-SDK 分享介面的兩個報錯記錄

一、前提: 微信測試號,用微信開發者工具測試 二、簡單複述文件: 1、引入JS檔案 在需要呼叫JS介面的頁面引入如下JS檔案,(支援https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js 如需進一步提升服務穩定性,當上述資源不可訪問時,可改訪問:ht

朋友限時推廣視會是抖音、快手的對手嗎?

2017年5月20日,一位網友在App Store裡給微視寫下了評論,“為什麼登陸不上去了,如果真不行了,讓我們把裡面的視訊儲存下來,那都是回憶,從剛推出的那一年就一直拍,存下學生時代好多美好回憶,現在畢業了顯得更加珍貴。並說道:這成了微視的終局。 現在看來那並不是微視的最

JS-SDK分享網頁到遇到的坑

現在開發大多都需要用到微信分享,推廣宣傳APP做得有多牛逼,然鵝,微信分享不是簡單的越塔五殺就能搞定的,需要前後臺的協同才能打死這個野怪,開發中遇到的重大問題是一直提示config:invalid signature,先來說說大體開發流程,再說說這問題是怎麼解決

解決iOS app整合分享到QQ空間好友朋友等功能蘋果稽核無法通過的問題

最近在提交應用到App Store時,因為App整合QQ登入,分享到QQ空間、微信等功能,而被拒,十分鬱悶;百思之下,想到一個辦法,可以解決此問題。 在將要顯示分享平臺列表時,根據判斷當前裝置是否安裝了某款App,而進行動態調整,具體操作如下: 首先匯入相關標頭檔案 #

JS-SDK 分享回撥失效

官方說明如下: 獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面 wx.onMenuShareAppMessage({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連結 im