Web Front-end
JS Tutorial
Ajax method to implement authorized login on WeChat webpage (graphic tutorial)
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.
Guide the user to enter the authorization page to agree to the authorization and obtain the code
Exchange the code for web page authorization access_token (different from the access_token in basic support)
If necessary, developers can refresh the web page authorization access_token to avoid expiration
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.
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.
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
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if I download other people's wallpapers after logging into another account on wallpaperengine?
Mar 19, 2024 pm 02:00 PM
When you log in to someone else's steam account on your computer, and that other person's account happens to have wallpaper software, steam will automatically download the wallpapers subscribed to the other person's account after switching back to your own account. Users can solve this problem by turning off steam cloud synchronization. What to do if wallpaperengine downloads other people's wallpapers after logging into another account 1. Log in to your own steam account, find cloud synchronization in settings, and turn off steam cloud synchronization. 2. Log in to someone else's Steam account you logged in before, open the Wallpaper Creative Workshop, find the subscription content, and then cancel all subscriptions. (In case you cannot find the wallpaper in the future, you can collect it first and then cancel the subscription) 3. Switch back to your own steam
How do I log in to my previous account on Xiaohongshu? What should I do if the original number is lost after it is reconnected?
Mar 21, 2024 pm 09:41 PM
With the rapid development of social media, Xiaohongshu has become a popular platform for many young people to share their lives and explore new products. During use, sometimes users may encounter difficulties logging into previous accounts. This article will discuss in detail how to solve the problem of logging into the old account on Xiaohongshu, and how to deal with the possibility of losing the original account after changing the binding. 1. How to log in to Xiaohongshu’s previous account? 1. Retrieve password and log in. If you do not log in to Xiaohongshu for a long time, your account may be recycled by the system. In order to restore access rights, you can try to log in to your account again by retrieving your password. The operation steps are as follows: (1) Open the Xiaohongshu App or official website and click the "Login" button. (2) Select "Retrieve Password". (3) Enter the mobile phone number you used when registering your account
Discuz background login problem solution revealed
Mar 03, 2024 am 08:57 AM
The solution to the Discuz background login problem is revealed. Specific code examples are needed. With the rapid development of the Internet, website construction has become more and more common, and Discuz, as a commonly used forum website building system, has been favored by many webmasters. However, precisely because of its powerful functions, sometimes we encounter some problems when using Discuz, such as background login problems. Today, we will reveal the solution to the Discuz background login problem and provide specific code examples. We hope to help those in need.
How to log in to Kuaishou PC version - How to log in to Kuaishou PC version
Mar 04, 2024 pm 03:30 PM
Recently, some friends have asked me how to log in to the Kuaishou computer version. Here is the login method for the Kuaishou computer version. Friends who need it can come and learn more. Step 1: First, search Kuaishou official website on Baidu on your computer’s browser. Step 2: Select the first item in the search results list. Step 3: After entering the main page of Kuaishou official website, click on the video option. Step 4: Click on the user avatar in the upper right corner. Step 5: Click the QR code to log in in the pop-up login menu. Step 6: Then open Kuaishou on your phone and click on the icon in the upper left corner. Step 7: Click on the QR code logo. Step 8: After clicking the scan icon in the upper right corner of the My QR code interface, scan the QR code on your computer. Step 9: Finally log in to the computer version of Kuaishou
How to log in if Xiaohongshu only remembers the account? I just remember how to retrieve my account?
Mar 23, 2024 pm 05:31 PM
Xiaohongshu has now been integrated into the daily lives of many people, and its rich content and convenient operation methods make users enjoy it. Sometimes, we may forget the account password. It is really annoying to only remember the account but not be able to log in. 1. How to log in if Xiaohongshu only remembers the account? When we forget our password, we can log in to Xiaohongshu through the verification code on our mobile phone. The specific operations are as follows: 1. Open the Xiaohongshu App or the web version of Xiaohongshu; 2. Click the "Login" button and select "Account and Password Login"; 3. Click the "Forgot your password?" button; 4. Enter your account number. Click "Next"; 5. The system will send a verification code to your mobile phone, enter the verification code and click "OK"; 6. Set a new password and confirm. You can also use a third-party account (such as
How to enter Baidu Netdisk web version? Baidu Netdisk web version login entrance
Mar 13, 2024 pm 04:58 PM
Baidu Netdisk can not only store various software resources, but also share them with others. It supports multi-terminal synchronization. If your computer does not have a client downloaded, you can choose to enter the web version. So how to log in to Baidu Netdisk web version? Let’s take a look at the detailed introduction. Baidu Netdisk web version login entrance: https://pan.baidu.com (copy the link to open in the browser) Software introduction 1. Sharing Provides file sharing function, users can organize files and share them with friends in need. 2. Cloud: It does not take up too much memory. Most files are saved in the cloud, effectively saving computer space. 3. Photo album: Supports the cloud photo album function, import photos to the cloud disk, and then organize them for everyone to view.
How to solve the common problem of Laravel login time invalidation
Mar 06, 2024 pm 09:24 PM
How to solve the common problem of Laravel login time expiration When using Laravel to develop web applications, login authentication is a very important function. However, sometimes if a user does not operate for a long time after logging in, the page may automatically log out or the authentication may fail. This problem is relatively common. The following will introduce how to solve this problem by setting the session time and provide specific code examples. 1. Set the session expiration time in Laravel, by default sessi
What should I do if I can't log in to my account on Google Chrome? Solution to why Google Chrome account cannot be logged in
Mar 13, 2024 pm 02:10 PM
What should I do if I can’t log in to my account on Google Chrome? When many users use this software, certain functions require users to log in to their Google account before they can use it. However, they have tried many times but failed to log in successfully. Faced with this problem, many users do not know how to solve it, so In this issue, the editor is here to share the solution with you. I hope that the content of today’s software tutorial can be helpful to everyone. The solution is as follows: 1. Click on a browser on the desktop, and after opening it, you will see something like this. 2. If a login pops up at this time, click it. If you can't see it, click the upper right corner. 3. Click Login, then enter your account number. You do not need to enter the account after @, and click Next. 4. Enter the password. When you see this prompt, click Enable
