Ajax implements the WeChat webpage authorized login method, ajax

Ajax implements webpage authorized login, ajax

Project Background

Because the project adopts a completely separate frontend and backend solution, you cannot use the conventional authorization logon method. You need to use ajax for authorized logon.

Requirement Analysis

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

In fact, this is also troublesome. before implementation, we need to understand the entire authorization process.

1. Instruct the user to go to the authorization page to agree to the authorization and obtain the code
2. Use code in exchange for webpage authorization access_token (different from access_token in Basic Support)
3. If necessary, developers can refresh the webpage to authorize access_token to avoid expiration.
4. Obtain basic user information through webpage authorization access_token and openid (UnionID mechanism supported)

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

Function implementation

Guides the user to call up the authorization confirmation page

Here we need to do two things: configure the jsapi domain name first, and configure the callback domain name for webpage authorization.

Build an authorized 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 We can see from the connection that there are two variables: appId and redirect_uri. AppId is the appId of the public account to be authorized. The callback URL of the other side is actually the URL of our current page.

1. After a user logs on to the authorization system, the callback URL carries two parameters: code and state. One thing we need to do is to get the code and then pass it to the backend, and dye the backend to get the basic user information through the code.
2. After the backend obtains the code, it obtains the user's basic information and returns other information to the front-end. The front-end obtains the information and then stores it locally or other information.

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 all the content of this article. I hope it will be helpful for your learning and support for helping customers.