天天看点

如何用云开发高效快捷地实现短信验证码登录?

利用云开发提供的短信验证码登录扩展能力,配合云开发的SDK在web端很方便的实现了自定义登录并新增数据

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

本次实战我们将使用web云开发实现短信验证码登录并新增数据。

云开发环境

腾讯云短信服务

短信验证码登录扩展能力

静态网站托管

如果已有云环境,可直接跳过这一步

打开云开发控制台新建云环境:

如何用云开发高效快捷地实现短信验证码登录?

打开云开发 CloudBase 控制台,打开左侧菜单里的数据库,点击添加集合,新增一个<code>test</code>集合用于新增数据测试。

如何用云开发高效快捷地实现短信验证码登录?

开通短信服务

登录腾讯云短信控制台,这里的账号不限于小程序的账号,其他账号也可以;也不限于是个人账号还是企业账号,不过账号需要进行实名认证,个人认证用户只能发送短信验证码、短信通知等,不能用于营销短信;企业认证用户可以发送短信验证码、短信通知、营销短信等。如果账号已经认证,直接申请短信服务就可以开通了。

创建签名和正文模板

国内短信由签名+正文组成,签名符号为【】,发送短信内容时必须带签名。所以要发送短信,需要申请短信签名和正文模板,两者都通过审核后,就可以开始发送短信了。

创建签名

打开左侧菜单里的国内短信-签名管理,点击创建签名,创建完签名后,这个<code>签名内容</code>之后会用到。

签名用途:选择【自用(签名为本账号实名认证的公司、网站、产品名等)】。

签名类型:选择【公众号】。

签名内容:输入公司名或小程序名或公众号名或产品名称

证明类型:选择公众号设置页面截图,然后上传小程序设置页面截图,可以参考案例;

如何用云开发高效快捷地实现短信验证码登录?

创建正文模板

打开左侧菜单里的国内短信-正文模板管理,点击创建正文模板,创建完模板后,会有一个模板<code>ID</code>,这个之后会用到,也要记住你模板的变量位置。

模板名称,建议带有明确目的的名称,比如“注册通知”、“购买成功反馈”等;

短信类型:选择【普通短信】

短信内容:比如“您正在申请手机注册,验证码为:{1},{2}分钟内有效!”,这里的<code>{1}</code>和<code>{2}</code>是你要在代码里传入的变量,变量的编码必须是从{1}开始,传入变量时也要按照顺序传入

如何用云开发高效快捷地实现短信验证码登录?

打开云开发 CloudBase 控制台,打开左侧菜单里的扩展能力,点击短信验证码登录模块进行安装。

如何用云开发高效快捷地实现短信验证码登录?

该扩展会创建以下云资源:

云函数:

tcb-sms-auth

生成校验码并发送到指定手机号,以实现短信验证码登录

云数据库:

存储验证码相关信息。

根据提示完成配置和安装。

云开发为开发者提供静态网页托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由对象存储 COS 和拥有多个边缘网点的 CDN 提供支持。您可在腾讯云控制台进行静态网站的部署,提供给您的用户访问。

打开云开发 CloudBase 控制台,打开左侧菜单里的静态网站托管,点击开启使用,然后等待几分钟便可初始化完成。

如何用云开发高效快捷地实现短信验证码登录?

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

打开云开发 CloudBase 控制台,复制静态网站托管-基础配置里的默认域名,然后打开左侧菜单里的环境-安全配置,将默认域名添加为WEB安全域名。

如何用云开发高效快捷地实现短信验证码登录?

安装扩展 SDK 到项目

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

方法二:通过CDN引入

调用扩展 SDK

调用参数

名称

类型

是否必须

说明

action

String

操作类型,支持 Send 和 Login

phone

电话号码

app

Tcb

tcb实例

smsCode

短信验证码,action 为 Login 时需要传入

customDomain

HTTP触发的自定义域名

返回内容

目前两种 action 都没有返回值。(本例采用 <code>auth.hasLoginState()</code> 来判断登录 )

写了一个简单的demo来实现登录并新增数据功能,代码如下:

完成demo编写后,将代码上传至静态网站托管,完成部署。

控制台上传

打开云开发 CloudBase 控制台,打开左侧菜单里的静态网站托管,将刚刚编写的文件<code>sms.html</code>上传。

如何用云开发高效快捷地实现短信验证码登录?

CLI 工具上传

CloudBase CLI 是一个开源的命令行界面交互工具,用于帮助用户快速、方便的部署项目,管理云开发资源。具体安装步骤和使用方法可以访问云开发 CLI 工具文档进行查看。

发送短信

如何用云开发高效快捷地实现短信验证码登录?

登录验证

如何用云开发高效快捷地实现短信验证码登录?

新增数据

如何用云开发高效快捷地实现短信验证码登录?

通过上述步骤,利用云开发提供的短信验证码登录扩展能力,配合云开发的SDK在web端很方便的实现了自定义登录并新增数据,大家快去试试吧!

继续阅读