ajax 實現微信網頁受權登陸

項目背景

由於項目採用先後端徹底分離方案，因此，沒法使用常規的微信受權登陸做法，須要採用 ajax 實現微信受權登陸。

需求分析

由於本人是一個phper ，因此，微信開發採用的是 EasyWeChat ，因此實現的方式是基於EW的。
其實實現這個也麻煩，在實現以前，咱們須要瞭解一下微信受權的整個流程。

1. 引導用戶進入受權頁面贊成受權，獲取code
2. 經過code換取網頁受權access_token（與基礎支持中的access_token不一樣）
3. 若是須要，開發者能夠刷新網頁受權access_token，避免過時
4. 經過網頁受權access_token和openid獲取用戶基本信息（支持UnionID機制）

其實說白了，前端只須要幹一件事兒，引導用戶發起微信受權頁面,而後獲得code,而後跳轉到當前頁面,而後再請求後端換取用戶以及其餘相關信息。

功能實現

1. 引導用戶喚起微信受權確認頁面

這裏須要咱們作兩件事，第一去配置jsapi域名，第二配置微信網頁受權的回調域名

構建微信受權的url "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 咱們從鏈接中看到有兩個變量，appId,以及 redirect_uri。appId 不用多說，就是我們將要受權的微信公衆號的appId,另外一方個回調URL，其實就是咱們當前頁面的URL。

1. 用戶微信登陸受權之後回調過來的URL 會攜帶兩個參數 ，第一個是code,另外一個就是 state。纔是咱們須要作的一件事兒就是將code獲取到而後傳給後端，染後端經過code 獲取用戶基本信息。
2. 後端獲得code 之後，獲取用戶基本信息，並返回相關其餘信息給前端，前端獲取到而後作本地存儲或者其餘。

function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

function wxLogin(callback) {
    var appId = 'xxxxxxxxxxxxxxxxxxx';
    var oauth_url = 'xxxxxxxxxxxxxxxxxxx/oauth';
    var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
    var code = getUrlParam("code");
    if (!code) {
        window.location = url;
    } else {
        $.ajax({
            type: 'GET',
            url: oauth_url,
            dataType: 'json',
            data: {
                code: code
            },
            success: function (data) {
                if (data.code === 200) {
                    callback(data.data)
                }
            },
            error: function (error) {
                throw new Error(error)
            }
        })
    }
}