Ajax method to implement authorized login on WeChat webpage (graphic tutorial)

This article mainly introduces the ajax method to implement authorized login on WeChat web pages. Now I share it with you and give it as a reference.

Project background

Because the project adopts a completely separated front-end and back-end solution, the conventional WeChat authorized login method cannot be used, and ajax needs to be used to implement WeChat authorized login.

Requirements Analysis

Because I am a phper, WeChat development uses EasyWeChat, so the implementation method is based on EW.

In fact, it is troublesome to implement this. Before implementing it, we need to understand the entire process of WeChat authorization.

1. Guide the user to enter the authorization page to agree to the authorization and obtain the code

2. Exchange the code for web page authorization access_token (different from the access_token in basic support)

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

4. Obtain basic user information through web page authorization access_token and openid (supports UnionID mechanism )

In fact, to put it bluntly, the front-end only needs to do one thing, guide the user to initiate the WeChat authorization page, then get the code, then jump to the current page, and then request the back-end to exchange users and other related information.

Function implementation

Guide users to call up the WeChat authorization confirmation page

We need to do two things here, first to configure the jsapi domain name, and secondly Configure the callback domain name for WeChat webpage authorization

Construct the url for WeChat authorization "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 We see from the connection that there are two variables, appId, and redirect_uri. Needless to say, appId is what we will authorize The appId of the WeChat official account and the other callback URL are actually the URL of our current page.

1. The URL that is called back after the user logs in with WeChat and is authorized will carry two parameters. The first one is the code, and the other is the state. One thing we need to do is to obtain the code and pass it to the backend, and the backend obtains the user's basic information through the code.

2. After the backend gets the code, it gets the user’s basic information and returns other relevant information to the frontend. The frontend gets it and does local storage 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('#')[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)
      }
    })
  }

The above is what I compiled for everyone. , I hope it will be helpful to everyone in the future.

Related articles:

JS implementationajaxCalling background definition (with code)

ajax Detailed explanation of php control function calling steps

Ajax realizes Loading effect

The above is the detailed content of Ajax method to implement authorized login on WeChat webpage (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!