Skip to main content

注册登录

tip

通过 AI Builder，您可以与 AI 对话来创建个性化的用户登录体验。本文档将指导您如何使用自然语言与 AI 交互，快速构建符合您需求的登录系统。

使用托管登录页​

云开发提供了环境维度的统一托管登录页，可以通过开发平台进行配置和管理。

用户登录状态​

使用以下方法可以判断用户是否已登录，此方法不包含匿名登录用户。

Boolean($w.auth.currentUser.userId);

如需判断用户是否已登录（包含匿名登录），请使用以下方法。注意：匿名登录用户不存在 userId 属性。

Boolean($w.auth.currentUser.name === "Anonymous" || $w.auth.currentUser.userId);

跳转登录页​

如果用户未登录，您可以使用以下方法跳转到登录页。

const tcb = await $w.cloud.getCloudInstance();
tcb.auth().toDefaultLoginPage({
  config_version: "env",
  redirect_uri: window.location.href,
  query: {
    s_domain: $w.utils
      .resolveStaticResourceUrl("/")
      .replace(/^https?:\/\//, "")
      .split("/")[0],
  },
});

完整示例：页面登录判断与跳转​

以下是一个完整的提示词案例，用于为页面添加登录判断功能，并在用户未登录时自动跳转到托管登录页面：

💡 托管登录页 AI 提示词模板
为所有页面添加登录判断， 通过 Boolean($w.auth.currentUser.userId) 判断当前用户是否已登录，

如果未登录，不渲染页面，并通过如下 checkAuth 方法跳转到登录页。
const checkAuth = async () => {
  if (!Boolean($w.auth.currentUser.userId)) {
    const tcb = await $w.cloud.getCloudInstance();
    tcb.auth().toDefaultLoginPage({
      config_version: "env",
      redirect_uri: window.location.href,
      query: {
        s_domain: $w.utils
          .resolveStaticResourceUrl("/")
          .replace(/^https?:\/\//, "")
          .split("/")[0],
      },
    });
  }
};

在 Dev Mode 中直接编写代码​

如果使用提示词方式不能稳定实现登录判断功能，可以直接在 AI Builder 的 Dev Mode 代码编辑器中编写登录相关的代码：

useEffect(() => {
  const checkAuth = async ($w) => {
    if (!Boolean($w.auth.currentUser.userId)) {
      const tcb = await $w.cloud.getCloudInstance();
      tcb.auth().toDefaultLoginPage({
        config_version: "env",
        redirect_uri: window.location.href,
        query: {
          s_domain: $w.utils
            .resolveStaticResourceUrl("/")
            .replace(/^https?:\/\//, "")
            .split("/")[0],
        },
      });
    }
  };
  checkAuth(props.$w);
}, []);
if (!Boolean(props.$w.auth.currentUser.userId)) {
  return null;
}

自定义登录页​

重要前提

仅当托管登录页无法满足您的特定业务需求时，才建议创建自定义登录页面。自定义登录页面虽然提供更灵活的用户认证体验，但需要您自行处理安全性、兼容性等问题。

托管登录页支持您自定义登录页的样式和功能，满足您的特定业务需求。

前置条件
  1. 前往 云开发/身份认证
  2. 在登录方式列表中，开启所需要的登录方式，如用户名密码登录、手机号验证码登录、邮箱验证码登录等。

1. 用户名密码登录​

重要说明

该登录方式不支持直接注册。用户需要先通过其他方式（如手机号验证码、邮箱验证码）完成注册，并在注册过程中设置用户名和密码。

以下是 AI 提示词模板，您可以根据实际需求修改功能要求部分：

💡 用户名密码登录 AI 提示词模板
创建登录页面需求：

功能要求：
- 用户名/密码输入框
- 显示加载/错误状态
- 简洁美观的UI设计

登录方法：
const tcb = await $w.cloud.getCloudInstance();
const loginState = await tcb.auth().signIn({ username, password });

2. 手机号验证码登录​

手机号验证码登录支持登录和注册两种场景，为用户提供便捷的身份验证方式。

登录场景

以下是登录的 AI 提示词模板，您可以根据实际需求修改功能要求部分：

💡 手机号验证码登录 AI 提示词模板
创建手机号验证码登录页面：

功能要求：
- 手机号输入框（支持+86格式）
- 验证码输入框
- 发送验证码按钮（带倒计时）
- 登录按钮
- 加载状态和错误提示

具体登录方法：
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
发送验证码：返回值要保存起来，登录时需要使用
const verificationInfo = await auth.getVerification({
    phone_number: `+86 ${phoneNum}`,
});

登录方法：
await auth.signInWithSms({
    verificationInfo,
    verificationCode, // 用户输入的验证码
    phoneNum,
});

注册场景

以下是注册的 AI 提示词模板，您可以根据实际需求修改功能要求部分：

💡 手机号验证码注册 AI 提示词模板
创建手机号验证码注册页面：

功能要求：
- 手机号输入框（支持+86格式）
- 验证码输入框
- 发送验证码按钮（带倒计时）
- 必须：password 输入框
- 必须：用户名输入框（密码长度不小于 8 位，不大于 32 位，需要包含字母和数字。）
- 可选：昵称输入框
- 注册按钮
- 加载状态和错误提示

具体注册方法：
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
const verification = await auth.getVerification({
    phone_number: phoneNumber
});
// 验证验证码的正确性
const verificationTokenRes = await auth.verify({
    verification_id: verification.verification_id,
    verification_code: verificationCode
});

// 如果该用户已经存在，则登录
if (verification.is_user) {
    await auth.signIn({
        username: phoneNumber,
        verification_token: verificationTokenRes.verification_token
    });
} else {
    // 否则，则注册新用户，注册新用户时，可以设置密码，用户名，成功后，会自动登录
    await auth.signUp({
        phone_number: phoneNumber,
        verification_code: verificationCode,
        verification_token: verificationTokenRes.verification_token,
        // 可选，设置昵称
        name: "手机用户",
        // 可选，设置密码
        password: "password",
        // 可选，设置登录用户名
        username: "username"
    });
}

3.邮箱验证码登录​

邮箱验证码登录同样支持登录和注册两种场景，为用户提供便捷的身份验证方式。

登录场景

以下是登录的 AI 提示词模板，您可以根据实际需求修改功能要求部分：

💡 邮箱验证码登录 AI 提示词模板
创建邮箱验证码登录页面：

功能要求：
- 邮箱输入框
- 验证码输入框
- 发送验证码按钮（带倒计时）
- 登录按钮
- 加载状态和错误提示

具体登录方法：
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
发送验证码：返回值要保存起来，登录时需要使用
const verificationInfo = await auth.getVerification({
    email: email,
});

登录方法：
await auth.signInWithEmail({
    verificationInfo,
    verificationCode, // 用户输入的验证码
    email: email,
});

注册场景

以下是注册的 AI 提示词模板，您可以根据实际需求修改功能要求部分：

💡 邮箱验证码注册 AI 提示词模板
创建邮箱验证码注册页面：

功能要求：
- 邮箱输入框
- 验证码输入框
- 发送验证码按钮（带倒计时）
- 必须：password 输入框
- 必须：用户名输入框（密码长度不小于 8 位，不大于 32 位，需要包含字母和数字。）
- 可选：昵称输入框
- 注册按钮
- 加载状态和错误提示

具体注册方法：
const tcb = await $w.cloud.getCloudInstance();
const auth = tcb.auth();
const verification = await auth.getVerification({
    email: email
});
// 验证验证码的正确性
const verificationTokenRes = await auth.verify({
    verification_id: verification.verification_id,
    verification_code: verificationCode
});

// 如果该用户已经存在，则登录
if (verification.is_user) {
    await auth.signIn({
        username: email,
        verification_token: verificationTokenRes.verification_token
    });
} else {
    // 否则，则注册新用户，注册新用户时，可以设置密码，用户名，成功后，会自动登录
    await auth.signUp({
        email: email,
        verification_code: verificationCode,
        verification_token: verificationTokenRes.verification_token,
        // 可选，设置昵称
        name: "邮箱用户",
        password: password,
        username: username
    });
}