Introduction to the method of ajax realizing authorized login on WeChat webpage

WeChat webpage authorized login is a very common function, in order to help everyone learn. This article mainly introduces the method of using ajax to realize authorized login on WeChat webpage. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

Project background

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

Requirement 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 evoke the WeChat authorization confirmation page

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

Build the WeChat 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 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. The other callback URL is actually the URL of our current page after the user logs in to WeChat and authorizes it. The callback URL will carry two parameters, the first is code, and the other is state. What we need to do is to get the code and pass it to the backend, and the backend gets the user basics through the code. Information.

1. ##After the backend gets the code, it gets the user’s basic information and returns other relevant information to the front end. The front end obtains it 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('#')[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)
         }
       })
     }

2. The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that everyone will support the php Chinese website.

Related recommendations:

##

The above is the detailed content of Introduction to the method of ajax realizing authorized login on WeChat webpage. For more information, please follow other related articles on the PHP Chinese website!