1、網(wǎng)頁授權(quán)：（參閱：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842）

• 登陸公眾號，開發(fā) - 接口權(quán)限 - 網(wǎng)頁服務 - 網(wǎng)頁帳號 - 網(wǎng)頁授權(quán)獲取用戶基本信息 設置 授權(quán)回調(diào)域名（請勿加 http:// 等協(xié)議頭），假設為www.test.com

注意：這里額外需要傳一個txt文件到域名對應的服務器上（微信的安全考慮）

• 微信訪問以下地址:(以下僅APPID需替換公眾號的APPID)，目的是獲取code以換取token

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=https://www.test.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

• 第2步成功后，頁面會自動跳轉(zhuǎn)到以下地址，這就開始進入具體的業(yè)務頁面了。

https://www.test.com/?code=CODE&state=STATE

注意：如果用戶同意授權(quán)，頁面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE。若用戶禁止授權(quán)，則重定向后不會帶上code參數(shù)，僅會帶上state參數(shù)redirect_uri?state=STATE

• 在業(yè)務代碼中，用JS獲取code參數(shù)，然后訪問以下地址：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

成功后的返回數(shù)據(jù)如下：（主要是拿access_token和openid字段）

{ 
    "access_token":"ACCESS_TOKEN",
    "expires_in":7200,
    "refresh_token":"REFRESH_TOKEN",
    "openid":"OPENID",
    "scope":"SCOPE" 
}

• 用access_token和openid字段訪問以下地址：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

返回值如下：

{   
    "openid":" OPENID",
    " nickname": NICKNAME,
    "sex":"1",  //男
    "province":"PROVINCE"
    "city":"CITY",
    "country":"COUNTRY",
    "headimgurl":    "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
    "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
    "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

2、JS-SDK接入步驟：

• 綁定域名

登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

注意：1、至多綁定3個域名，一個月內(nèi)只能改3次；2、需要分別傳一個txt文件（可直接下載）到域名對應的服務器上

• 業(yè)務代碼中引入以下腳本：

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

3、業(yè)務代碼中用config接口注入權(quán)限驗證配置

wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

4、通過ready接口處理成功驗證

wx.ready(function(){
    // config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關接口，則須把相關接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

5、通過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});

以下主要說說第3步的配置問題，這里需要服務端和前端共同參與。

• 服務端（提供獲取token和ticket的接口，前端也可以自己做，但是會暴露secret信息，不安全）

    //access_token是公眾號的全局唯一票據(jù)

    public function getTokenForJS() {
        $appid = "不告訴你";
        $secret = "不告訴你";
        $url = "https://api.weixin.qq.com/cgi-bin/token?appid=".$appid."&secret=".$secret."&grant_type=client_credential";
        $result = http_request($url);
        echo $result;exit;
    }
    
    //獲取ticket
    public function getTicket(){
        $access_token = I("get.access_token");
        $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
        //$this->ajaxJSON($url);
        $result = http_request($url);
        echo $result;exit;
    }
    
    function http_request($url, $data = null)
    {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        if (!empty($data)) {
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $info = curl_exec($curl);
        curl_close($curl);
        return $info;
    }

token獲取

ticket獲取

• 前端

function setWechatJS() {
    //wx配置參數(shù)
    var jsapi_ticket = $.cookie('jsapi_ticket');
    var wxConfig = function () {
        //獲取當前url，不含#以及之后的部分
        var timestamp = new Date().getTime();  //生成簽名的時間戳(當前時間)
        var noncestr = randomString(20);
        var signature = '';       //簽名
        var url = window.location.href;
        var index = url.indexOf('#');
        if(index !== -1 ) {
            url = url.slice(0,index);
        }
        var temp = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
        var signature = hex_sha1(temp);
        console.log("signature="+signature);
        wx.config({
            debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
            appId: 'wx0875a197e0e5bcd7', // 必填，公眾號的唯一標識
            timestamp: timestamp, // 必填，生成簽名的時間戳
            nonceStr: noncestr, // 必填，生成簽名的隨機串
            signature: signature,// 必填，簽名，見附錄1
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
        });

        wx.ready(function () {
            //配置成功之后回調(diào)
            console.log("微信JS SDK配置成功！");   
        });
        wx.error(function(res){
            console.log("微信JS SDK配置錯誤！");
            // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
        });
    };

    //待分享生成的標題、鏈接、縮略圖
    var title,url,imgUrl,description;
    //本地cookie查找不到緩存再去請求網(wǎng)絡
    if(typeof (jsapi_ticket) == 'undefined' || jsapi_ticket == ''){
        //alert('aaa='+jsapi_ticket);
        //以下步驟分別獲取全局access_token、jsapi_ticket、signature
        $.get(MyUrl+"getTokenForJS",function (data) {
            var access_token = data['access_token'];
            //獲取全局access_token,以及7200秒之后刷新的問題
            //先出cookie中取,如果沒有，
            $.get(MyUrl+"getTicket?access_token="+access_token,function(data){
                jsapi_ticket = data['ticket'];
                //保存當前jsapi_ticket
                var date = new Date();
                date.setTime(date.getTime()+7200*1000);//只能這么寫，10表示10秒鐘
                //?替換成分鐘數(shù)如果為60分鐘則為 60 * 60 *1000
                $.cookie('jsapi_ticket',jsapi_ticket,{expires:date,path:'/'}); //有效期7200秒
                wxConfig();
            },'json');

        },'json');
    }else {
        //alert('bbb='+jsapi_ticket);
        wxConfig();
    }
}


// 以下是輔助函數(shù)：
//1、生成隨機字符串
var randomString = function(len) {
    len = len || 32;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默認去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
    var maxPos = $chars.length;
    var pwd = '';
    for (var i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
};
// 2、hex_sha1的定義（用第三方模塊：[https://github.com/Caligatio/jsSHA](https://github.com/Caligatio/jsSHA)）

后端Java實現(xiàn)可參看這里