Third-party login

fastbeeAbout 3 min

Tips

WeChat login is currently supported. SMS login is being integrated.

1.1 Preparation

Register an account on the WeChat Open Platform: https://open.weixin.qq.com/. Registration requires a business license. Then apply for a web application and a mobile application.

For WeChat Mini Program, register an account on the WeChat public platform: https://mp.weixin.qq.com/, apply for a Mini Program, then bind the Mini Program to the WeChat Open Platform.

Tips

Save the appId and appSecret of each application. They are required in System Management -> Third-party Login Configuration. They correspond to the third-party platform application ID and secret key.

WeChat user information authorized by web applications and mobile applications does not include a phone number. Because the system cannot find a related account from the phone number, first-time WeChat login redirects the user to the account binding page.

Binding flow:

Existing account: enter account and password to bind, then log in.
No account: click register and bind, create an account, bind it to WeChat, then log in again.

Because unionId is unique under the same WeChat Open Platform account, after a user logs in and binds an account on any web or mobile application, the same WeChat account can log in directly from other applications under the same Open Platform account.

1.3 Web application

Configuration:

In the WeChat Open Platform web application settings, configure the authorized callback domain. Change it to the backend API IP or domain, for example iot.fastbee.cn.
In the FastBee backend, configure the WeChat Open Platform web application information in third-party login settings.

Recommended values:

User authentication redirect URL: https://iot.fastbee.cn/prod-api/auth/callback/wechat_open_web. Make sure the callback IP or domain matches the authorized callback domain.
Binding registration login URI: frontend login address with bindId=, for example https://iot.fastbee.cn/login?loginId=.
Redirect login URI: frontend login address with loginId=, for example https://iot.fastbee.cn/login?loginId=.
Error prompt URI: frontend login address with errorId=, for example https://192.168.1.101/login?errorId=.

Tips

The third-party login plugin justAuth is used. The flow is:

User clicks WeChat login.
A WeChat QR code is displayed.
User scans the QR code with WeChat.
If the WeChat account has already been bound to a system account, login succeeds directly.
Otherwise, the user is redirected to the binding page and enters account/password to bind, then logs in.
If the user has no account to bind, the user registers an account, binds it to WeChat, then logs in again.

1.4 Mobile application

In the system third-party login configuration, configure the WeChat Open Platform mobile application information.

Third-party platform application ID corresponds to appid.
Third-party platform secret corresponds to appsecret.
User authentication redirect URL, binding registration login URI, redirect login URI, and error prompt URI can use any placeholder address, such as http://localhost.

Tips

The mobile flow replaces the QR-code scan with popup authorization. Other steps are the same as web application login.

1.5 WeChat Mini Program

In the system third-party login configuration, configure the WeChat Open Platform Mini Program information.

Third-party platform application ID corresponds to appid.
Third-party platform secret corresponds to appsecret.
User authentication redirect URL, binding registration login URI, redirect login URI, and error prompt URI can use any placeholder address, such as http://localhost.

Difference:

The Mini Program can obtain the user's phone number, but the API is paid. The first 1000 calls may be free, then each call is charged by WeChat. FastBee can use the obtained phone number to log in directly. If the current WeChat account has not been bound to a system account, it is bound to the system account associated with the phone number. Users can unbind WeChat in the user center.

Tips

Mini Program flow:

User chooses WeChat login.
The system obtains the phone number selected by the WeChat user.
The system queries the account by phone number.
If the account exists, login succeeds.
Otherwise, the system registers an account using the phone number. The initial account and password are both the phone number, so users should change the password later.

2. WeChat binding and unbinding

Binding

Click WeChat binding on the user center page.

For web application binding, add a WeChat Open Platform web application configuration in System Management -> Third-party Login for user-center binding. It is similar to the web application login configuration. Only the redirect path and login path need to be changed to match the binding flow shown below.

Unbinding

For an already bound WeChat account, click unbind in the user center and verify the password.

3. Possible improvements

SMS verification can be added later. The registration binding flow can use SMS, and unbinding can also add SMS verification.

Warning

Apply for mobile, web, and Mini Program applications under the same WeChat Open Platform account. This ensures unionId uniqueness and allows different applications to associate the same user through unionId.
When debugging the mobile app by running it directly on a phone, the obtained openid and unionid may belong to DCloud. This can make the same user's unionId different from web and Mini Program applications. To keep them consistent, use a custom base for debugging or test with a packaged app.

SMS login works with the message notification module. Configure and enable an SMS verification-code notification template, then SMS login can be used.