How to implement the WeChat login function of the mini program on uniapp (process summary)

How to implement the WeChat login function of the mini program on uniapp? The following article will share with you the specific operation process of the WeChat login function of the mini program on uniapp. I hope it will be helpful to you!

I have written an article before introducing uniapp developmentWeChat login function, that is an Android app version, today I will introduce how to implement WeChat login on the mini program , that article did not mention the WeChat login server interface, this article will mention the specific interface design and table structure design ideas. Compared with the app, it is more convenient to implement WeChat login on the WeChat applet, because there is no need to generate an application ID. However, the prerequisite is that there is a WeChat open platform. If not, you must go to the 官网 to register one. account.

Next, let’s talk about the steps. The process is relatively simple. One thing to note is that each mini program is registered with an email address, and an email address can only be bound to one mini program, so one person owns it. The number of mailboxes directly limits the number of mini programs a person has.

1. Register for the open platform

This step is the same as the app WeChat login function of the previous app. There are tutorials online,RegistrationProcess It’s still a little troublesome. You need to use company information. I just want to mention it here. Registering an open platform is enough, which can be shared by apps, mini programs, public accounts, websites, etc. I just want to do this for this article. The article mentioned it again. After all, although the article is small, it must be comprehensive.

2. Developer Qualification Certification

This is the same as before, because after the developer qualification certification on the open platform is passed, it will be open to you. WeChat has open function permissions for various platforms such as apps, mini programs, official accounts, and websites, and multiple ones can be added to each one. For example, 50 mini programs can be added. Calculating it this way, the 300 yuan is still somewhat valuable.

3. Add the mini program to the open platform

Just fill in the relevant information of the mini program here. WeChat is required for the next step. Scan the QR code. I don’t quite understand what this scan means, because email has little to do with WeChat. After scanning the QR code, the mini program is successfully bound to the open platform.

Click to view and take a look, and found that there is very little content.

This is completely different from binding the app to an open platform. In fact, it is easy to understand, because this is a WeChat applet after all. The WeChat applet is mounted on WeChat. It is based on the basic permissions of WeChat, so it means that you can directly use almost all functions of WeChat through WeChat applet. As long as you can develop it, just show me the code.

4. Obtain AppSecret

You can get the mini program key in development management and development settings. Once you get it, save it yourself. The system will not save it in plain text for you. , if lost later, you can reset the generation. The key is not used in general mini program business, and is only used when doing WeChat open functions (login, sharing, etc.).

5. WeChat login business design

WeChat login business has registration and login functions on general Internet products, but on non-Internet products, generally Ordinary WeChat users will not be allowed to register, only users registered on this application. Therefore, this login requires binding an ordinary user with a WeChat account.

The business process is still the business in this picture in WeChat login function:

Then the question is, how to achieve login What? The focus of this article is to clarify the specific content of the login in the picture above.

Here is WeChat’s official Login business design diagram. Understandably, this diagram is a bit complicated for those who are just starting out. It doesn’t matter. You can follow my analysis below. I probably know the idea.

The following is my specific business analysis based on the actual situation of the project. The specific content is divided into two parts: front and back end:

Front-end business

For example, if Xiao Ming logs in using WeChat on his mobile phone, if it is the first time he logs in, he must bind it with a system account, such as the admin account , he has to complete two steps: 1. Authorize WeChat and obtain WeChat account information; 2. Bind WeChat account to system account;

The first step is to obtain WeChat account information. A simple summary is to obtain user authorization first. Then use the developer AppID and AppSecret to call a specific login interface to obtain user information, openid and other information.

The second step is to return to the front-end interface after obtaining this information, and then give a login interface. This step is used to enter the system user name and password.

Back-end business

The second step is a step that a new user must take when accessing this app. After this step, the system user The account information and the current user's WeChat information (openid) can be transmitted to the backend at the same time. In addition to the regular login verification, the login interface must also match this openid. Only if everything is correct can the login be successful. The system account and openid have a one-to-many relationship, which is easy to understand. It is the admin account, which allows multiple WeChat users to log in. Of course, if the current WeChat user logs in for the first time, a piece of binding information between the current WeChat user and the system account must be inserted when logging in.

For the front-end business, you can actually encapsulate the WeChat login part and call it as a service post-processing. Because AppID and AppSecret information are relatively sensitive, it is best to store them in the back-end.

Login business implementation

1. Login authorization and obtain temporary login credentials code

below The code is posted and I will analyze the idea in detail. To log in with WeChat, the authorization page will pop up. The view layer code has a special format. You have to write "". Then the authorization page will pop up when the button event method is triggered. Call it again after authorization. For the uni.login API, this step is to obtain the code. The code is equivalent to a credential, which is temporary and will be different every time it is called. The front end gets this certificate and goes to the back end to call the server interface 'wxlogin'

<button id="btnwx" class="login-wxpng" open-type="getUserInfo" @getuserinfo="xcxWxLogin"></button>

...

xcxWxLogin() {
				var self = this;
				uni.login({
					provider: &#39;weixin&#39;,
					success: function(res) {
						if (res.code) {
							//发起网络请求
							uni.request({
								method: &#39;POST&#39;,
								url: &#39;http://************/wxlogin&#39;,
								data: {
									code: res.code
								},
								success(res) {
									//将openid存入本地缓存
									uni.setStorage({
										key: &#39;openid_key&#39;,
										data: res.data.openid
									});
									if (res.statusCode == 200 && res.data && res.data.username) {
										self.isFirstWXLogin = false;
										self.name = res.data.username;
										self.password = res.data.password;
										setTimeout(function() {
											self.tologin({
												username: res.data.username,
												password: res.data.password,
												encrypted: true
											})
										}, 0)
									} else {
										//首次登录，可以跳转到一个绑定账号的页面
										uni.navigateTo({
											url: &#39;wxlogin&#39;
										});
								}
							})
						} else {
							console.log(&#39;登录失败！&#39; + res.errMsg)
						}
					},
					fail(e) {
						console.log(e);
					},
					complete(e) {
						console.log(e);
					}
				});
			}

2. Log in with WeChat and obtain the user's unique identifier

This step is placed on the server side , I use the interface written by node for your reference:

router.post("/wxlogin", (req, res, next) => {
    //将请求地址的url后面的参数拼接起来
    var data = {
        'appid': config.appId,
        'secret': config.appSecret,
        'js_code': req.body.code,
        'grant_type': 'authorization_code'
    };
    console.log(data);
    // querystring的stringify用于拼接查询
    var content = querystring.stringify(data);
    // 根据微信开发者文档给的API
    var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content;
    // 对url发出一个get请求
    request({
        'url': url
    }, (error, response, body) => {
        // 将body的内容解析出来
        let abody = JSON.parse(body);
        // body里面包括openid和session_key
        console.log(abody)

        //根据openid查找用户，如果查到则返回用户名密码登录，否则直接提示登录
        getAllUsers(abody, res)
    })
})

The above code is for reference only. The idea is to use appId, appSecret (these two are configured in the backend, or exist in the database) and the frontend to pass them over Code parameter, call the interface 'api.weixin.qq.com/sns/jscode2...

3. The front-end stores user information into the local cache

This step can be called after authorization. This step is based on your actual needs. You don’t have to. I use this to save avatars, WeChat nicknames, etc. If you are not familiar with uni-related APIs, you can read the api documentation first.

uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						uni.setStorageSync('auth_service', infoRes.userInfo)
					}
				});

Okay, the basic steps to log in to the mini program are over here. I hope it helps you. If it is useful, please give it a like, thank you!

Recommended: "uniapp tutorial"

The above is the detailed content of How to implement the WeChat login function of the mini program on uniapp (process summary). For more information, please follow other related articles on the PHP Chinese website!