Custom Login

Overview

In WeDa application development, there are times when we need to customize login pages to meet specific branding or user experience requirements. This article details how to implement custom login pages in WeDa, including page design, login logic implementation, and maintaining global login status.

Implementation Steps

1. Set the application login authentication to "No Login Page Required"

First, you need to set the login authentication method to "No Login Page Required" on the application details page. Only then can you utilize a custom login page.

2. Design and Develop the Login Page

Create a new page as the login page, designing an interface containing username and password input fields.

Configure the click event for the 'Login' button to trigger the custom login method.

login Method Implementation Example

export default async function({
    event,
    data
}) {
    // 1. Input validation: Ensure both username and password are filled in.
    if (!$w.input1.value || !$w.input2.value) {
        $w.utils.showToast({
            title: title: 'Please enter your account and password',
            icon: 'error',
            duration: 2000
        });
        return
    }

    // 2. Obtain the CloudBase instance
    const app = await $w.cloud.getCloudInstance()
    const auth = app.auth();

    try {
        // 3. Call the login interface
        await auth.signIn({
            username: $w.input1.value,
            password: $w.input2.value
        });

        // 4. Update the logged-in user information in the WeDa application
        await $w.app.cloud.signIn({
            userType: 'externalUser',
            force: true
        })

        // 5. After successful login, redirect to the application home page
        $w.utils.navigateTo({
            pageId: pageId: 'u0wovuk9cqg' // Replace with your application home page ID
        })
    } catch (e) {
        console.error('Login failed', e)
        $w.utils.showToast({
            title: title: 'Login failed',
            icon: 'error',
            duration: 2000
        });
    }
}

Code Explanation:

1. Obtain CloudBase Instance: Obtain CloudBase instance via $w.cloud.getCloudInstance()

   • In a Web environment or Mini Program fully hosted mode, returns the CloudBase web-sdk instance (initialized via tcb.init)
   • In Mini Program default mode, scan code authorization mode, or service provider mode, returns the WeChat Cloud Development instance (initialized via wx.cloud.init or wx.cloud.Cloud.init)

2. Login Process:

   • Call auth.signIn() to verify account and password
   • Use $w.app.cloud.signIn() to update the logged-in user information in the WeDa application
   • After successful login, redirect to the application home page

Note: For more Web SDK usage, refer to the web-sdk documentation. For WeChat Cloud Development usage, refer to the WeChat Cloud Development documentation

Note: The page ID u0wovuk9cqg in the sample needs to be replaced with your actual application home page ID.

For other tools and interaction methods, refer to the WeDa Tools/Interaction Methods Documentation

3. Global Sign-in Status Maintenance

After using a custom login method, when the user token expires, the platform cannot automatically handle the redirection logic. Therefore, we need to monitor login status changes and proactively redirect to the login page when the token becomes invalid.

Implementation Steps:

1. Click "Code Editor" to go to the application lifecycle methods:

2. Add login status monitoring code in the onAppLaunch method:

const app = await $w.cloud.getCloudInstance();
const auth = app.auth();

// Listen for login status changes
auth.onLoginStateChanged((params) => {
    const {
        eventType
    } = params?.data || {};
    switch (eventType) {
        case "sign_in":
            // Handling logic upon successful login
            > **Note**: The page ID `u0wovuk9cqg` in the example needs to be replaced with your actual application's home page ID
            break;
        case "sign_out":
            // Handling logic upon successful logout
            console.log("User has logged out");
            break;
        case "credentials_error":
            // When permissions become invalid, log out and redirect to the login page
            console.log("Login credentials have expired, redirecting to login page");
            $w.auth?.signOut?.();
            $w.utils.navigateTo({
                pageId: pageId: 'login' // Replace with your login page ID
            })
            break;
        default:
            return;
    }
});

Key Points Explanation:

• Use the Auth.onLoginStateChanged() method to listen for login status changes
• When eventType is credentials_error, it indicates that the user's login credentials have expired.
• At this point, call $w.auth?.signOut?.() to clear the current login state and redirect to the login page.
• Ensure to replace 'login' in the example with your actual login page ID

Complete Example

We provide a complete custom login sample application. You can visit the following link to experience it:

Custom Login Sample Application

Sample Account Information:

• Username: custorm_login_user
• Password: Admin@123

Frequently Asked Questions

Q: How to implement the sign-out feature?
A: You can call the auth.signOut() method to sign out and then redirect to the login page.

Q: How to obtain user information after successful login?
A: You can obtain the basic information of the currently logged-in user via auth.currentUser, or obtain more detailed user information via cloud functions.