Project background

Because the project adopts the complete separation of the front and back ends, it is impossible to use the conventional method of wechat authorized login, and ajax is needed to realize wechat authorized login.

Demand analysis

Because I am a PHper, so the development of wechat is EasyWeChat, so the way to achieve is based on EW. In fact, the implementation of this is also troublesome, before the implementation, we need to understand the whole process of wechat authorization.

  1. Enter the authorization page to approve authorization and obtain the code

  2. Exchange web page authorization access_token with code (different from access_token in base support)

  3. If necessary, developers can refresh the web license access_token to avoid expiration

  4. Access to basic user information through web authorization Access_token and OpenID (support UnionID mechanism)

In fact, the front end only needs to do one thing, guide the user to initiate the wechat authorization page, and then get the code, and then jump to the current page, and then request the back end to exchange the user and other relevant information.

Function implementation

  1. Guide users to evoke the wechat authorization confirmation page

Here we need to do two things, the first is to configure the JSAPI domain name, and the second is to configure the callback domain name of wechat webpage authorization

Build WeChat authorization url “https://open.weixin.qq.com/connect/oauth2/authorize?appid=” + “& redirect_uri =” + + appId Location.hpl.split (‘#’)[0] + “&response_type=code&scope=snsapi_userinfo&state= state #wechat_redirect AppId, and redirect_URI. AppId needless to say, it is the appId of the wechat public number we are going to authorize, and the other side is a callback URL, which is actually the URL of our current page.

  1. After the user’s wechat login authorization, the URL returned by the callback will carry two parameters, the first is code, and the other is state. That’s one of the things we need to do is get the code and pass it to the back end, and then the back end gets the basic user information from the code.

  2. After the back end gets the code, it obtains the basic information of the user and returns other relevant information to the front end. The front end obtains the information and then stores it locally or other things.

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(The '#') [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)
            }
        })
    }
}
Copy the code