最佳实践
有奖捉虫：行业应用 & 管理与支持文档专题 HOT
文档中心 > 最佳实践 > 腾讯云微搭低代码 > 自定义企业工作台登录页

自定义企业工作台登录页

最近更新时间：2024-03-20 11:31:52

我的收藏

本页目录：

使用场景

当微搭 企业工作台 默认登录页无法满足需求时，希望能够个性化定制登录页的样式和交互。
注意：
自定义登录页能力需要购买 专业版 套餐。

功能实现

账号密码登录

步骤1：创建自定义应用

前往 应用列表 创建一个自定义应用。
?
?

步骤2：创建一个应用页面

创建一个符合自身需求的登录页面。
?
?

步骤3：新建 JavaScript 方法

在编辑器左下角代码区的当前页面分类下单击 + 号，在弹出层中选择新建 JavaScript 方法。
?
在代码编辑器中输入以下代码并保存。
export default async function ({ event, data }) {
?
  const { authInstance, _config: { clientId, env } } = await $w.cloud.getCloudInstance();
?
?
  try {
    // 使用 SDK 方法进行应用登录
    const loginState = await authInstance.signIn({
      username: $w.input1.value, // 这里为账号输入框组件的 id
      password: $w.input2.value  // 这里为密码输入框组件的 id
    });
?
    // 登录用户信息
    console.log('userInfo', loginState.user);
?
    // 把当前自定义应用的鉴权信息写为企业工作台
    localStorage.setItem(`credentials_${env}`, localStorage.getItem(`credentials_${clientId}`));
?
    // 跳转到企业工作台，也可以自行指定地址
    location.href = "https://lowcode-xxxxxxx.tcloudbaseapp.com/adminportal/#/package?envType=prod";
?
  } catch (e) {
    // 在这里处理登录失败的逻辑，例如：
    switch (e.error) {
      // 账号不存在
      case 'not_found':
        console.error(e.error_description)
        break;
      // 密码错误
      case 'invalid_password':
        console.error(e.error_description)
        break;
      // 参数不全
      case 'invalid_argument':
        console.error(e.error_description)
        break;
      default:
        console.error(e);
    }
  }
}
?
?
?

步骤4：设置登录按钮的事件

从页面编辑区或大纲树中选中登录按钮，在右侧事件区选择点击（tap）事件，在弹出层中选择 JavaScript 代码。
?
?
?
方法类型选择已有方法，执行方法里选择 步骤3 创建的代码，最后单击保存。
?
?
?

步骤5：保存并发布应用

?
?
?

步骤6：在企业工作台中设置自定义登录页

在企业工作台 > 工作台设置 > 登录配置中，设置自定义登录页，地址写为该应用的登录页地址。最后保存并等待生效即可。
?
?
?

短信验证码登录

步骤1：创建自定义应用

前往 应用列表 创建一个自定义应用。
?
?
?

步骤2：创建一个应用页面

创建一个符合自身需求的登录页面。
?
?
?

步骤3：创建变量

在左下角代码区创建自定义变量 verification_id，方便后续赋值取值。
?
?
?
选填好需要的内容，单击保存。
?
?
?

步骤4：新建 JavaScript 方法

在编辑器左下角代码区的当前页面分类下单击 + 号，在弹出层中选择新建 JavaScript 方法。
?
?
?
分别创建 2 个自定义 JavaScript 方法以实现获取验证码和登录，代码如下：
获取验证码：
export default async function ({ event, data }) {
const { authInstance } = await $w.cloud.getCloudInstance();
?
try {
  const { verification_id } = await authInstance.getVerification({
    phone_number: `+86 ${$w.input1.value}`, // 这里为手机号输入框组件的 id
  });
?
  $w.page.setState({ verification_id });
?
} catch (e) {
  // 在这里处理登录失败的逻辑，例如：
  switch (e.error) {
    // 账号不存在
    case 'not_found':
      console.error(e.error_description)
      break;
    // 密码错误
    case 'invalid_password':
      console.error(e.error_description)
      break;
    // 参数不全
    case 'invalid_argument':
      console.error(e.error_description)
      break;
    default:
      console.error(e);
  }
}
}
登录：
export default async function ({ event, data }) {
?
const { authInstance, _config: { clientId, env } } = await $w.cloud.getCloudInstance();
?
try {
  // 使用验证码和 ID 换取 token
  const { verification_token } = await authInstance.verify({
    verification_code: $w.input2.value, // 这里为验证码输入框组件的 id
    verification_id: $w.page.dataset.state.verification_id
  });
?
  // 使用 SDK 方法进行应用登录
  const loginState = await authInstance.signIn({
    verification_token,
  })
?
  // 登录用户信息
  console.log('userInfo', loginState.user);
?
  // 把当前自定义应用的鉴权信息写为企业工作台
  localStorage.setItem(`credentials_${env}`, localStorage.getItem(`credentials_${clientId}`));
?
  // 跳转到企业工作台，也可以自行指定地址
  location.href = "https://lowcode-xxxxxx.tcloudbaseapp.com/adminportal/#/package?envType=prod";
?
} catch (e) {
  // 在这里处理登录失败的逻辑，例如：
  switch (e.error) {
    // 账号不存在
    case 'not_found':
      console.error(e.error_description)
      break;
    // 密码错误
    case 'invalid_password':
      console.error(e.error_description)
      break;
    // 参数不全
    case 'invalid_argument':
      console.error(e.error_description)
      break;
    default:
      console.error(e);
  }
}
}

步骤5：设置登录按钮和获取验证码按钮的事件

从页面编辑区或大纲树中选中登录按钮，在右侧事件区选择点击（tap）事件，在弹出层中选择 JavaScript 代码。
?
?
?
方法类型选择已有方法，执行方法里选择 步骤4 创建的代码，最后单击保存。
?
?
?

步骤6：保存并发布应用

?
?
?

步骤7：在企业工作台中设置自定义登录页

在企业工作台 > 工作台设置 > 登录配置中，设置自定义登录页，地址写为该应用的登录页地址。最后保存并等待生效即可。
?
?
?

其他登录方式

中国站


http://www.vxiaotou.com