开发指南

API 文档

短信验证码登录

最近更新时间:2020-10-14 15:59:15

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

功能特性

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

适用场景

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

前置要求

已经开通 云开发

扩展配置信息

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

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

计费

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

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

启用的 API 和创建的资源

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

权限授予

主账号

角色名称 授权策略名 角色类型 描述
TCB_QcsRole QcloudSMSFullAccess 服务角色 云开发(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

调用参数

名称 类型 是否必须 说明
action String 操作类型,支持 Send, Login, Verify
phone String 电话号码
app Cloudbase cloudbase 实例
smsCode String 短信验证码,action 为 LoginVerify 时需要传入
customDomain String HTTP 触发的自定义域名
注意:

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

返回内容

三种 action 都没有返回值。

调用示例

客户端使用:

"通过 CDN 使用"

<script src="//imgcache.qq.com/qcloud/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>

通过包管理器使用

const cloudbase = require("@cloudbase/js-sdk");
const extSms = require("@cloudbase/extension-sms");

const app = cloudbase.init({
  env: "您的环境ID"
});

cloudbase.registerExtension(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));
  }
}
注意:

目录