微信開發——網頁H5受權，獲取微信用戶資料

微信H5開發詳細配置

1.配置公衆號受權域名

設置網頁受權域名，爲服務器綁定的域名，微信內頁面受權必須在這個域名下

注意：配置好後，下載微信網頁受權文本文件.`MP_verify_xxxxx`放到服務器程序的根目錄，當你提交的時候，微信會去認證，沒有這個文件，微信這一步認證不會經過。

配置Token認證，微信將和你的服務器進行第一次的校驗

微信的服務器配置啓用，Url須要注意，微信會post參數：echoStr，signature，nonce等到你填寫的url地址去訪問，就是一次驗證，服務器是否經過。 注意這裏請求的本身的Url返回值須要是「echoStr」，注意返回的mediaType要是」text/html」類型，純文本字符串響應給微信。 像`ASP.NET MVC`裏面直接`return Content("")`就行.

服務端示例代碼

[Route("gateway")]
public HttpResponseMessage Gateway()
{
    string echoString = HttpContext.Current.Request.QueryString["echoStr"];
    string signature = HttpContext.Current.Request.QueryString["signature"];
    string nonce = HttpContext.Current.Request.QueryString["nonce"];
    HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(echoString, Encoding.GetEncoding("UTF-8"), "text/html") };
    return result;
}
複製代碼

點此參考微信網頁受權文檔

2.配置請求網頁的地址

公衆號菜單配置

"sub_button": [
    {
        "type": "view", 
        "name": "訂票系統", 
        "url": "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx79a3d1c56ecf560c&redirect_uri=http://{你微信服務器配置的域名}/ticketSys/Home/Index&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect"
    }
]
複製代碼

或者直接在微信裏面訪問網頁能夠行，只要你微信公衆號配置經過了 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx79a3d1c56ecf560c&redirect_uri=http://{你微信服務器配置的域名}/ticketSys/Home/Index&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

3.訪問地址，容許受權，獲取用戶信息

當咱們在微信訪問配置的redirect_uri跳轉的頁面，如:www.testxx.com,會彈出綁定的微信公衆號信息，讓你受權

點擊容許後，微信將頁面再次跳轉到redirect_uri/?code={Code}&state={State}

贊成受權後，微信會回傳一個code值到按鈕指定的uri中去，code做爲換取token的票據，每次用戶受權帶上的code不同，code只能使用一次，5分鐘過時。

回調的連接以下，在指定的redirect_uri上加了參數，而且微信瀏覽器把當前url改變了，能夠經過location.href查看到當前的url

當咱們拿到Code的時候，須要再次請求一下咱們配置的主頁（redirect裏面的uri），以便後臺接收到Code，經過Code去獲取訪問憑據和用戶信息。很是重要！

如：http://www.testxx.cn/Home/Index 就是從新調用一下咱們按鈕中配置的，js在頁面加載完畢事件寫：

var vCode = getQueryString("code");
 if (vCode != "" && vCode != null) {  //微信回調頁面傳遞的code，須要本身再拿到後臺去校驗獲取用戶數據
     $.ajax({
         url: '/weixin/user/' + vCode,
         type: 'get'
     }).done(function (data) {
         // 獲取到微信用戶資料存儲到緩存中
         localStorage.setItem('wxUser', JSON.stringify(data.data));
     });
 }
 else {
     // 沒有code再跳轉一次，防止沒有進行受權（OpenId），獲取不到用戶信息。
     location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + wxRedirectUri + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
 }
 ...
 
 //獲取url的參數
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}
複製代碼

後端MVC代碼（僅供參考）

[HttpGet]
public async Task<ActionResult> Index()
{
    //用戶贊成受權會回調該頁面，獲取code，code只能使用一次，5分鐘過時
    string code = Request["code"];
    if (!string.IsNullOrEmpty(code))
    {
        Session["code"] = code;
    }
    string appId = WxPayConfig.APPID;
    string appSecret = WxPayConfig.APPSECRET;
    WeiXinUser wxUser = await WeiXinHelper.GetWxUserByCode(appId, appSecret, code);
    wxUser.AppId = appId;
    Session["openid"] = wxUser.OpenId;
    return View(wxUser);
}
複製代碼

注：WeiXinHelper.GetWxUserByCode這是本身封裝的方法，就是根據code去換取微信access_token,微信官方接口：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

如上就能夠獲取到已受權的微信用戶基本信息了,包含暱稱、地區、性別、頭像。