[The uniapp applet enables authorized users to log in directly and automatically, and unauthorized users display the authorization page and realize one-click login]

---

foreword

项目背景 :
The project is a multi-terminal applet implemented using uniapp. Currently, the login function requirements of the WeChat applet and Alipay applet are realized:
If the current user has authorized it, it will automatically log in silently and jump to the home page. During the silent login process, the user will not You will see the login page. If the current user is using it for the first time, the login page will be displayed. After the user clicks Authorization, the login will be executed.

---

以下是自己实现前端的思路以及流程图 , 经验尚浅 , 欢迎指正交流 , 代码就不方便放了哈哈哈哈

1. Implementation ideas

When I started to conceive, I thought about a lot of plans,

1. Backend interface

There are three back-end interfaces, the following are only the interfaces developed and used by ourselves

a. LoginByCode

The parameter required by this interface is the code value returned by uni.login. The backend uses the code value to exchange for openid. openid is the unique identifier of the user. Take the openid to the database to check whether the user exists. If it exists, it will return the user object. If it does not exist Just return User unbound

b. LoginMpAli

This is the Alipay one-click login interface. The required parameters are the information parameters obtained by the user after authorization. The
parameters include encryptedData, sign, and authCode (of course, there are some other business parameters in the actual project, but they have nothing to do with the login function. This will be ignored)
Among them, the first two parameters encryptedData and sign are the authCode obtained by the applet through the my.getPhoneNumber method
: The applet is obtained through the my.getAuthCode('auth_base') method, using a silent method, without prompting the user for authorization , sample value (word)

const {
    
    
	authCode: loginCode
} = await getAuthCode('auth_base');
const encryptedData = e.detail.encryptedData
const sign = e.detail.sign

After realizing the function,
the backend gets the parameters and decrypts the mobile phone number authorized by the user, and queries the user in the database according to the mobile phone number. If the user is found, the user object is returned. If the user is not found, the registration is performed and the registration is successful. After returning the user object

c. LoginMpWx

This is the one-click login interface of WeChat. The required parameter is the information
parameter
code obtained by the user after authorization: it is obtained by the applet through the my.getPhoneNumber method

const code = e.detail.code

The implementation function is the same as that of Alipay one-click login. The parameter passing here is different because the method of decrypting the mobile phone number and the data required by WeChat and Alipay are different.

Second, the final implementation flow chart

1. Flowchart

Summarize

The WeChat and Alipay applets can use the same mobile phone number, that is to say, the same mobile phone number uses the WeChat login applet and Alipay login applet to enter the same account, so the mobile phone number is used as the unique identification here, only Use the decrypted mobile phone number as the query condition to perform registration when no user is queried, and use the openid exchanged for code as the query condition to perform a binding operation when no user is queried

The fields of a user in the database include at least: user ( weixin_openid , alipay_openid , phonenumber ) and business fields

The above idea is only the way to realize it yourself. If you have any questions, please feel free to ask, discuss together, and make progress together~ The
implementation method may be rough and immature. If you have better ideas, you are welcome to communicate together!