跳到主要内容

短信验证码登录

短信验证码登录支持在客户端使用短信验证码进行登录，封装了短信验证码的生成、发送、校验和定时清理逻辑，帮助开发者进行鉴权。登录成功后，用户身份将转化为正式用户。

功能特性​

开通后，开发者可以在客户端调用扩展，给用户手机发送验证码。用户可以使用验证码进行正式登录。

适用场景​

用于客户端用户的正式登录。

前置要求​

已经开通云开发。

扩展配置信息​

您可以通过以下配置参数：

  • 环境 ID：选择要部署的环境，在哪个环境下使用。
  • 签名：短信服务(SMS)的签名。
  • 模板：短信模板。
  • 有效期：验证码有效期，单位是"分钟"。
  • appid 和 appkey：短信服务(SMS)的信息。

计费​

此扩展使用云开发或其他腾讯云服务，可能会产生相关费用：

当您使用云开发扩展时，您只需要为您使用的云资源付费；云开发与云上其他资源分开计费，您可以在 费用中心 查看具体信息。

启用的 API 和创建的资源​

  • Type: 短信 SMS Description: 为开发者提供短信发送服务。
  • Type: Cloud DataBase Description: 存储验证码、过期时间和对应的手机号。
  • Type: Cloud Function Description: 生成、校验和定时清理验证码，下发用于正式登录的 ticket。

权限授予​

主账户​

角色名称授权策略名角色类型描述
TCB_QcsRoleQcloudSMSFullAccess服务角色云开发（TCB）会对您的短信资源进行操作，方便您在扩展能力中使用该服务

子账户​

如果想让子账户也能使用该扩展，需要为子账户授予如下权限才能使用：

  • 策略: QcloudAccessForTCBRole 描述: 云开发（TCB）对云资源的访问权限。
  • 策略: QcloudSMSFullAccess 描述: 短信资源全读写访问权限。

安装扩展​

您可以通过 云开发控制台，来安装和管理扩展。

使用扩展​

提示

如果您在 web 网站使用该扩展，请先在 云开发控制台 将网站域名添加为当前环境的安全域名。

1. 安装扩展 SDK 到项目​

方法一：通过包管理器引入

npm install --save @cloudbase/extension-sms

方法二：通过 CDN 引入

<script src="//unpkg.com/@cloudbase/extension-sms/built/index.umd.js"></script>

2. 调用扩展 SDK​

调用参数

名称类型是否必须说明
actionString是操作类型，支持 Send, Login, Verify
phoneString是电话号码
appCloudbase是cloudbase 实例
smsCodeString否短信验证码，action 为 Login 或 Verify 时需要传入
customDomainString否HTTP 触发的自定义域名
注意事项

绑定 HTTP 触发的自定义域名之前，请先设置您的域名的 CNAME 记录值为 ${envId}.service.tcloudbase.com，envId 是您的环境 Id。CNAME 记录不存在时会导致域名绑定失败！

返回内容

三种 action 都没有返回值。

调用示例

客户端使用：

<!-- 注：可前往npm源查看当前最新版本 https://www.npmjs.com/package/@cloudbase/js-sdk -->
<script src="//static.cloudbase.net/cloudbase-js-sdk/${version}/cloudbase.full.js"></script>
<script src="//unpkg.com/@cloudbase/extension-sms/built/index.umd.js"></script>
<script>
  const app = cloudbase.init({
    env: "您的环境ID"
  });

  cloudbase.registerExtension(window.extSms);

  demo();

  async function demo() {
    try {
      let phone = ""; // 输入用户手机号
      // 发送短信验证码
      await cloudbase.invokeExtension(extSms.name, {
        action: "Send",
        app,
        phone
      });

      let smsCode = ""; // 用户填写验证码
      // 验证码校验
      await cloudbase.invokeExtension(extSms.name, {
        action: "Verify",
        app,
        phone,
        smsCode
      });

      // 验证码登录
      await cloudbase.invokeExtension(extSms.name, {
        action: "Login",
        app,
        phone,
        smsCode
      });
      console.log("登录成功，目前是正式用户");
    } catch (err) {
      console.log(JSON.stringify(err, null, 4));
    }
  }
</script>
注意事项