Steps to implement authorized login on WeChat webpage using ajax (with code)

This time I will bring you the steps (with code) to implement WeChat web page authorization using ajax. What are the precautions for using ajax to implement WeChat web page authorization login, as follows This is a practical case, let’s take a look at it.

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 web page authorization

Construct the url for WeChat authorization "<a href="http://www.php.cn/wiki/373.html" target="_blank">https://</a>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 the appId of the WeChat official account we will authorize, and the other callback URL is actually the URL of our current page.

1. ## User WeChat. The URL called back after login authorization will carry two parameters, the first is code, the other is state. What we need to do is to get the code and pass it to the backend, and then pass the code to the backend. Obtain the user's basic information.

2. After the backend obtains the code, it obtains the user's basic information and returns other relevant information to the front-end. The front-end obtains it and then performs local storage or other operations.

   ##

   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)
         }
       })
     }

   I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to write the regular expression to determine the format of ID card and bank card number

How to verify the non-zero positive integer using JS regular expression

The above is the detailed content of Steps to implement authorized login on WeChat webpage using ajax (with code). For more information, please follow other related articles on the PHP Chinese website!