I have written an article about the development of the wechat login function of UniApp, which is an Android APP version. Today, I will introduce how to realize the wechat login on the small program. That article did not talk about the wechat login server interface, and this article will mention specific interface design and table structure design ideas. Compared with APP, it is more convenient to achieve wechat login on wechat small program, because there is less application ID generation process, but the premise is also to have a wechat open platform, if not, to the official website [1] to register an account.

Next steps, the process is relatively simple, need to pay attention to is that each small program is registered with a mailbox, and a mailbox can only be bound to a small program, so the number of mailboxes a person has directly limits the number of small programs a person has.

1. Register for the open platform

This step to the front of the app that app WeChat login function method, online tutorials, registration process [2] have some trouble, want to use enterprise information, here is the way, register an open platform will do the trick, can satisfy the app, small procedures, the public share, website and so on, I just for the sake of this article mentioned again, after all, the article is small, The five zang organs should be complete.

2. Developer qualification certification

This is the same as before, because after the developer qualification certification on the open platform, you will open the app, small program, public number, website and other platforms of wechat open function permissions, and each can add more, like small program can add 50. When you add it up, that $300 is worth something.

3. Add applets to open platforms

Fill in the relevant information of the small program here, and the next step needs wechat scan code. I don’t quite understand what this scan code means, because the mailbox has little relationship with wechat, and the small program will be successfully bound to the open platform after scanning code.

Click on view to take a look, it’s very little.

Here is completely different from app binding to open platform, in fact, it is easy to understand, because after all, this is wechat small program, the wechat small program mounted on wechat should be based on the basic permissions of wechat, so it means that you can directly use wechat small program almost all functions, as long as you can develop, Just show me the code.

4. Get AppSecret

In the development management, development Settings can get small program key, after this is saved, the system does not help you save plaintext, if lost later, you can reset the generation. The key is not used in general small program business, only in wechat open functions (login, sharing, etc.) will be used.

5. Design of wechat login service

Wechat login business in general Internet products is with registration, login function, but in non-Internet products, generally will not let ordinary wechat users register, are registered in the application of the user. Therefore, this login needs to bind ordinary users to wechat accounts.

The business process is stillWechat login functionThe business in this chart:

So, how do you log in? This article focuses on the specific content of the login section in the figure above.

Here is an official wechat login business design drawing [3]. It is understandable that this drawing is a little complicated for those who just started to do it. It doesn’t matter.

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

The front-end business

For example, Xiao Ming uses wechat to log in on his mobile phone. If it is the first time for him to log in, he must bind with a system account, such as admin account. He has to complete two steps: 1. 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, and then use developer AppID and AppSecret to call specific login interface to obtain user information and OpenID and other information.

Step 2, when you get this information, you have to go back to the front screen and give another 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 the APP. After this step, the system user account information and the current user’s wechat information (OpenID) can be transmitted to the background at the same time. In addition to the conventional login authentication, the login interface must match the OpenID. The system account has a one-to-many relationship with OpenID, which is easy to understand. It is the admin account, which can allow multiple wechat users to log in. Of course, if the current wechat user is logging in for the first time, it is necessary to insert a binding information between the current wechat user and the system account when logging in.

The front end of the business, in fact, you can put the wechat login part of the business encapsulation, but also make the service post to call, because AppID and AppSecret information is more sensitive, it is best to put back-end storage.

Login Service Implementation

1. Authorize login and obtain temporary login certificate code

The code is posted below, let me analyze the idea in detail. <button open-type=”getUserInfo”/>” <button open-type=”getUserInfo”/>” <button open-type=”getUserInfo”/> Code is equivalent to a credential that is temporary and varies from call to call. So the front end gets that credential and goes to the back end and calls the server interface ‘wxlogin’

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

...

xcxWxLogin() {
				var self = this;
				uni.login({
					provider: 'weixin'.success: function(res) {
						if (res.code) {
							// Initiate a network request
							uni.request({
								method: 'POST'.url: 'http://************/wxlogin'.data: {
									code: res.code
								},
								success(res) {
									// Store openID in local cache
									uni.setStorage({
										key: 'openid_key'.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 {
										// On the first login, you can jump to a page bound to an account
										uni.navigateTo({
											url: 'wxlogin'}); }})}else {
							console.log('Login failed! ' + res.errMsg)
						}
					},
					fail(e) {
						console.log(e);
					},
					complete(e) {
						console.log(e); }}); }Copy the code
2. Log in to wechat and obtain the unique id of the user

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

router.post("/wxlogin".(req, res, next) = > {
    // concatenate the parameters after the URL of the requested address
    var data = {
        'appid': config.appId,
        'secret': config.appSecret,
        'js_code': req.body.code,
        'grant_type': 'authorization_code'
    };
    console.log(data);
    // QueryString stringify is used to concatenate queries
    var content = querystring.stringify(data);
    // According to the API given in the wechat developer documentation
    var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content;
    // Make a get request to the URL
    request({
        'url': url
    }, (error, response, body) = > {
        // Parse the contents of the body
        let abody = JSON.parse(body);
        // Body contains openID and session_key
        console.log(abody)

        // Query the user according to openID. If yes, return the user name and password; otherwise, prompt login
        getAllUsers(abody, res)
    })
})
Copy the code

The code above is for reference only, the idea is to use appId, appSecret (both in the back-end configuration, or database) and pass the front-end code parameter, call interface ‘api.weixin.qq.com/sns/jscode2…

3. The front-end saves user information to the local cache

This step can be called after authorization, according to your actual needs, you can not, I use this to save the avatar, wechat name and so on. For those unfamiliar with uni apis, read the API documentation [4].

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

Well, the basic steps of the small program login to the end here, I hope to help you, if useful on a thumbs-up bar, thank you!

References:

  1. Open.weixin.qq.com/cgi-bin/ind…
  2. Jingyan.baidu.com/article/861…
  3. Developers.weixin.qq.com/miniprogram…
  4. Uniapp. Dcloud. IO/API/plugins…
  5. Blog.csdn.net/weixin_4312…