C#微信网页开发---JSSDK使用 通过config接口注入权限验证配置

 1：   我们来看，下面的这个是开发需要配置的东西，我们通过开发文档来一个一个的配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

签名算法见文末的附录1，所有JS接口列表见文末的附录2

这个地方AppID，时间戳，随机字符串和js接口列表都很好得到，唯一比较难的就是签名

2：获取签名

    （1）：获取签名的第一步，需要获得jsapi_ticket

  

 这个地方需要使用到access_token，access_token获取方法：http://blog.csdn.net/weixin_39462109/article/details/79438922

private static void  Getjsapi_ticket()
        {
            string url = string.Format("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi",Access_token);
            string backStr=Common.Get_Request(url);
            //string backStr = "{ \"errcode\":0,\"errmsg\":\"ok\",\"ticket\":\"kgt8ON7yVITDhtdwci0qeZWDYY9llY5RrKsWxKD--zOUIRYqJ1XwMo305bwZhG22b5hOl-TZ-gZAXCbMMHwvCw\",\"expires_in\":7200}";
            string str_ticket = backStr.Split(',')[2].Split(':')[1];
            Jsapi_ticket= str_ticket.Substring(1,str_ticket.Length-2);
        }

/// <summary>
        /// 发送Get请求，并且得到返回结果
        /// </summary>
        /// <param name="url"></param>
        /// <returns></returns>
        public static string Get_Request(string url)
        {
            System.Net.WebRequest wrq = System.Net.WebRequest.Create(url);
            wrq.Method = "GET";
            System.Net.WebResponse wrp = wrq.GetResponse();
            System.IO.StreamReader sr = new System.IO.StreamReader(wrp.GetResponseStream(), System.Text.Encoding.GetEncoding("UTF-8"));
            return sr.ReadToEnd();
        }

3：创建一个WX_Web_Config类，类中封装签名方法

     

 public class WX_Web_Config
    {
        private bool debug;
        private string appId;
        private string timestamp;
        private string nonceStr;
        private string signature;
        private List<string> jsApiList=new List<string>();
        private string url;


        public WX_Web_Config(bool debug, string appId, string timestamp, string nonceStr, string url)
        {
            this.debug = debug;
            this.appId = appId;
            this.timestamp = timestamp;
            this.nonceStr = nonceStr;
            this.url = url;
            this.signature = GetSignature();
        }

        /// <summary>
        /// 是否开启调试模式
        /// </summary>
        public bool Debug
        {
            get
            {
                return debug;
            }

            set
            {
                debug = value;
            }
        }

        /// <summary>
        /// 必填，公众号的唯一标识
        /// </summary>
        public string AppId
        {
            get
            {
                return appId;
            }

            set
            {
                appId = value;
            }
        }

        /// <summary>
        /// 必填，生成签名的时间戳
        /// </summary>
        public string Timestamp
        {
            get
            {
                return timestamp;
            }

            set
            {
                timestamp = value;
            }
        }

        /// <summary>
        /// 必填，生成签名的随机串
        /// </summary>
        public string NonceStr
        {
            get
            {
                return nonceStr;
            }

            set
            {
                nonceStr = value;
            }
        }

        /// <summary>
        /// 必填，签名
        /// </summary>
        public string Signature
        {
            get
            {
                return signature;
            }

            set
            {
                signature = value;
            }
        }
        /// <summary>
        /// 必填，需要使用的JS接口列表
        /// </summary>
        public List<string> JsApiList
        {
            get
            {
                return jsApiList;
            }

            set
            {
                jsApiList = value;
            }
        }

        public string Url
        {
            get
            {
                return url;
            }

            set
            {
                url = value;
            }
        }

        /// <summary>
        /// 得到签名
        /// </summary>
        /// <returns></returns>
        private string GetSignature()
        {
            Hashtable hs = new Hashtable();
            hs.Add("jsapi_ticket", MvcApplication.Jsapi_ticket);//获取的
            hs.Add("noncestr", NonceStr);
            hs.Add("timestamp", Timestamp);
            hs.Add("url", Url);
            //得到string1
            string string1= formatParameters(hs);
            //对string1进行sha1签名
            Signature = HashCode(string1);
            return Signature;
        }

        /// <summary>
        /// 参数名ASCII码从小到大排序（字典序）
        /// </summary>
        /// <param name="parameters"></param>
        /// <returns></returns>
        private string formatParameters(Hashtable parameters)
        {
            StringBuilder sb = new StringBuilder();
            ArrayList akeys = new ArrayList(parameters.Keys);
            akeys.Sort();
            foreach (string k in akeys)
            {
                string v = (string)parameters[k];//防止参数不是字符串
                sb.Append(k.ToLower() + "=" + v + "&");
            }
            //去掉最后一个&
            if (sb.Length > 0)
            {
                sb.Remove(sb.Length - 1, 1);
            }
            return sb.ToString();
        }

        /// <summary>
        /// 进行sha1签名
        /// </summary>
        /// <param name="str"></param>
        /// <returns></returns>
        public static string HashCode(string str)
        {
            string rethash = "";
            try
            {

                System.Security.Cryptography.SHA1 hash = System.Security.Cryptography.SHA1.Create();
                System.Text.ASCIIEncoding encoder = new System.Text.ASCIIEncoding();
                byte[] combined = encoder.GetBytes(str);
                hash.ComputeHash(combined);
                rethash = Convert.ToBase64String(hash.Hash);
            }
            catch (Exception ex)
            {
                string strerr = "Error in HashCode : " + ex.Message;
            }
            return rethash;
        }


    }

4：创建一个枚举，用来存储所有的js接口名称

 

 public enum WX_Web_Js_Interface
    {
        onMenuShareTimeline,

        onMenuShareAppMessage,

        onMenuShareQQ,

        onMenuShareWeibo,

        onMenuShareQZone,

        startRecord,

        stopRecord,

        onVoiceRecordEnd,

        playVoice,

        pauseVoice,

        stopVoice,

        onVoicePlayEnd,

        uploadVoice,

        downloadVoice,

        chooseImage,

        previewImage,

        uploadImage,

        downloadImage,

        translateVoice,

        getNetworkType,

        openLocation,

        getLocation,

        hideOptionMenu,

        showOptionMenu,

        hideMenuItems,

        showMenuItems,

        hideAllNonBaseMenuItem,

        showAllNonBaseMenuItem,

        closeWindow,

        scanQRCode,

        chooseWXPay,

        openProductSpecificView,

        addCard,

        chooseCard,

        openCard


    }

6：在加载页面的时候调用WX_Web_Config构造函数

namespace 微信开发2018.Controllers
{
    public class WebController : Controller
    {
        // GET: Web
        public ActionResult Index()
        {
            WX_Web_Config config = new WX_Web_Config(true,WebConfigurationManager.AppSettings.Get("AppID"),DateTime.Now.ToLongDateString(),"tangjie", "http://116.21.25.73/Web/Index");
            config.JsApiList.Add(WX_Web_Js_Interface.addCard.ToString());
            config.JsApiList.Add(WX_Web_Js_Interface.chooseCard.ToString());
            return View(config);
        }
    }
}

7：前端界面显示

 @model  微信开发2018.WxCode.WX_Web.WX_Web_Config
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/Menu_LayoutPage.cshtml";
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
}
<h2>加载JSSDK</h2>
<script type="text/javascript">
        wx.config({
            debug:true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '@Model.AppId', // 必填，公众号的唯一标识
            timestamp:'@Model.Timestamp' , // 必填，生成签名的时间戳
            nonceStr:'@Model.NonceStr', // 必填，生成签名的随机串
            signature:' @Model.Signature',// 必填，签名
            jsApiList: @Html.Raw(Json.Encode(Model.JsApiList)), // 必填，需要使用的JS接口列表
        });

       wx.ready(function(){
           // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
           console.log("配置成功了");
       });
       wx.error(function(res){
           // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
           console.log("配置失败了");
           console.log(res);
       });

</script>

8：结果