Skip to main content

自定义登录

概述​

在微搭应用开发中，有时我们需要自定义登录页面以满足特定的品牌形象或用户体验需求。本文将详细介绍如何在微搭中实现自定义登录页面，包括页面设计、登录逻辑实现以及全局登录态维护。

实现步骤​

1. 设置应用登录认证为"无需登录页"​

首先，需要在应用详情页中将登录认证方式设置为"无需登录页"，这样才能使用自定义的登录页面。

应用登录认证设置

2. 设计并编写登录页面​

创建一个新页面作为登录页，设计包含用户名和密码输入框的界面。

登录页面设计示例

为"登录"按钮配置点击事件，触发自定义的 login 方法。

login方法实现示例：​

export default async function({
    event,
    data
}) {
    // 1. 输入验证：确保用户名和密码都已填写
    if (!$w.input1.value || !$w.input2.value) {
        $w.utils.showToast({
            title: '请输入账号和密码',
            icon: 'error',
            duration: 2000
        });
        return
    }

    // 2. 获取云开发实例
    const app = await $w.cloud.getCloudInstance()
    const auth = app.auth();

    try {
        // 3. 调用登录接口
        await auth.signIn({
            username: $w.input1.value,
            password: $w.input2.value
        });

        // 4. 更新微搭应用中的登录用户信息
        await $w.app.cloud.signIn({
            userType: 'externalUser',
            force: true
        })

        // 5. 登录成功后跳转到应用首页
        $w.utils.navigateTo({
            pageId: 'u0wovuk9cqg' // 替换为您的应用首页ID
        })
    } catch (e) {
        console.error('登录失败', e)
        $w.utils.showToast({
            title: '登录失败',
            icon: 'error',
            duration: 2000
        });
    }
}

代码说明：​

  1. 获取云开发实例：通过 $w.cloud.getCloudInstance() 获取云开发实例

    • 在 Web 环境或小程序全托管模式下，返回云开发 web-sdk 实例（已完成 tcb.init 初始化）
    • 在小程序默认模式、扫码授权或服务商模式下，返回 微信云开发 实例（已完成 wx.cloud.init 或 wx.cloud. Cloud.init）

  2. 登录流程：

    • 调用 auth.signIn() 进行账号密码验证
    • 使用 $w.app.cloud.signIn() 更新微搭应用中的登录用户信息
    • 登录成功后跳转到应用首页

提示：更多 Web SDK 用法可参考 web-sdk 文档，微信云开发用法可参考微信云开发文档

注意：示例中的页面ID u0wovuk9cqg 需替换为您实际应用的首页ID

其他工具和交互方法可参考微搭工具/交互方法文档

3. 全局维护登录态​

使用自定义登录方式后，当用户 token 过期时，平台无法自动处理跳转逻辑。因此，我们需要监听登录状态变化，在 token 失效时主动跳转到登录页面。

实现步骤：​

  1. 点击「代码编辑器」，进入应用生命周期方法：

应用生命周期代码编辑

  1. 在 onAppLaunch 方法中添加登录状态监听代码：
const app = await $w.cloud.getCloudInstance();
const auth = app.auth();

// 监听登录状态变化
auth.onLoginStateChanged((params) => {
    const {
        eventType
    } = params?.data || {};
    switch (eventType) {
        case "sign_in":
            // 登录成功时的处理逻辑
            console.log("用户已登录");
            break;
        case "sign_out":
            // 退出登录成功时的处理逻辑
            console.log("用户已退出登录");
            break;
        case "credentials_error":
            // 权限失效时，退出登录并跳转到登录页
            console.log("登录凭证已失效，正在跳转到登录页");
            $w.auth?.signOut?.();
            $w.utils.navigateTo({
                pageId: 'login' // 替换为您的登录页ID
            })
            break;
        default:
            return;
    }
});

登录状态监听代码

关键点说明：​

  • 使用 Auth.onLoginStateChanged() 方法监听登录状态变化
  • 当 eventType 为 credentials_error 时，表示用户登录凭证已失效
  • 此时需要调用 $w.auth?.signOut?.() 清除当前登录状态，并跳转到登录页面
  • 确保将示例中的 'login' 替换为您实际的登录页面ID

完整示例​

我们提供了一个完整的自定义登录示例应用，您可以访问以下链接进行体验：

自定义登录示例应用

示例账号信息：

  • 用户名：custorm_login_user
  • 密码：Admin@123

常见问题​

Q: 如何实现退出登录功能？
A: 可以调用 auth.signOut() 方法实现退出登录，然后跳转到登录页面。

Q: 如何在登录成功后获取用户信息？
A: 可以通过 auth.currentUser 获取当前登录用户的基本信息，或者通过云函数获取更详细的用户信息。