使用场景
注意:
功能实现
账号密码登录
步骤1:创建自定义应用
步骤2:创建一个应用页面
创建一个符合自身需求的登录页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/24feb2f8fd0a05fbae6b105d7b5651c4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/24feb2f8fd0a05fbae6b105d7b5651c4.png)
步骤3:新建 JavaScript 方法
在编辑器左下角代码区的当前页面分类下单击 + 号,在弹出层中选择新建 JavaScript 方法。
![](https://qcloudimg.tencent-cloud.cn/image/document/d97c92a5c2f658a737da04a2f2254de8.png)
在代码编辑器中输入以下代码并保存。
![](https://qcloudimg.tencent-cloud.cn/image/document/d97c92a5c2f658a737da04a2f2254de8.png)
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, // 这里为账号输入框组件的 idpassword: $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);}}}
![](https://qcloudimg.tencent-cloud.cn/image/document/0bf7197e3135054cba6d0c50b7c42c16.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0bf7197e3135054cba6d0c50b7c42c16.png)
步骤4:设置登录按钮的事件
从页面编辑区或大纲树中选中登录按钮,在右侧事件区选择点击(tap)事件,在弹出层中选择 JavaScript 代码。
![](https://qcloudimg.tencent-cloud.cn/image/document/6a2fadbad41d5b46feaa6080b427e254.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6a2fadbad41d5b46feaa6080b427e254.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d19af143a0708e94d68173c4786ac12c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d19af143a0708e94d68173c4786ac12c.png)
步骤5:保存并发布应用
![](https://qcloudimg.tencent-cloud.cn/image/document/0b27899373a10d25ad80d8f4f3f70b2f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0b27899373a10d25ad80d8f4f3f70b2f.png)
步骤6:在企业工作台中设置自定义登录页
在企业工作台 > 工作台设置 > 登录配置中,设置自定义登录页,地址写为该应用的登录页地址。最后保存并等待生效即可。
![](https://qcloudimg.tencent-cloud.cn/image/document/c4d058b983f122618330a8b99db7293a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c4d058b983f122618330a8b99db7293a.png)
短信验证码登录
步骤1:创建自定义应用
![](https://qcloudimg.tencent-cloud.cn/image/document/35ffcfe432663e7cc0ee1192b111196b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/35ffcfe432663e7cc0ee1192b111196b.png)
步骤2:创建一个应用页面
创建一个符合自身需求的登录页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/3b7f4d56074e52aab4e9d4a6bad55464.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/3b7f4d56074e52aab4e9d4a6bad55464.png)
步骤3:创建变量
在左下角代码区创建自定义变量
verification_id
,方便后续赋值取值。![](https://qcloudimg.tencent-cloud.cn/image/document/ab11ff04e113d21b038d52e9e750dc75.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ab11ff04e113d21b038d52e9e750dc75.png)
选填好需要的内容,单击保存。
![](https://qcloudimg.tencent-cloud.cn/image/document/4247c19e2f6993a708fafe9e583f8f02.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/4247c19e2f6993a708fafe9e583f8f02.png)
步骤4:新建 JavaScript 方法
在编辑器左下角代码区的当前页面分类下单击 + 号,在弹出层中选择新建 JavaScript 方法。
![](https://qcloudimg.tencent-cloud.cn/image/document/41b7d4216255345214d638f424e0d6a8.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/41b7d4216255345214d638f424e0d6a8.png)
分别创建 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 换取 tokenconst { verification_token } = await authInstance.verify({verification_code: $w.input2.value, // 这里为验证码输入框组件的 idverification_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 代码。
![](https://qcloudimg.tencent-cloud.cn/image/document/bea1bbde720c781b02a97df98877fdf1.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/bea1bbde720c781b02a97df98877fdf1.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d92b4b1505ee7993ab248fa8ffa2611a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d92b4b1505ee7993ab248fa8ffa2611a.png)
步骤6:保存并发布应用
![](https://qcloudimg.tencent-cloud.cn/image/document/5a95e0391b85105febb0cbe3129f0b48.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/5a95e0391b85105febb0cbe3129f0b48.png)
步骤7:在企业工作台中设置自定义登录页
在企业工作台 > 工作台设置 > 登录配置中,设置自定义登录页,地址写为该应用的登录页地址。最后保存并等待生效即可。
![](https://qcloudimg.tencent-cloud.cn/image/document/d2a8e68afb3f8a3af18bee98a34bed88.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d2a8e68afb3f8a3af18bee98a34bed88.png)