如何用云开发高效快捷地实现短信验证码登录?
云开发扩展能力之短信验证码登录
短信验证码登录支持在客户端使用短信验证码进行登录,封装了短信验证码的生成、发送、校验和定时清理逻辑,帮助开发者进行鉴权。登录成功后,用户身份将转化为正式用户。
本次实战我们将使用web云开发实现短信验证码登录并新增数据。
资源准备
云开发环境
腾讯云短信服务
短信验证码登录扩展能力
静态网站托管
一、云开发环境开通
如果已有云环境,可直接跳过这一步
打开云开发控制台新建云环境:
[图片]
打开云开发 CloudBase 控制台,打开左侧菜单里的数据库,点击添加集合,新增一个[代码]test[代码]集合用于新增数据测试。
[图片]
二、腾讯云短信服务
开通短信服务
登录腾讯云短信控制台,这里的账号不限于小程序的账号,其他账号也可以;也不限于是个人账号还是企业账号,不过账号需要进行实名认证,个人认证用户只能发送短信验证码、短信通知等,不能用于营销短信;企业认证用户可以发送短信验证码、短信通知、营销短信等。如果账号已经认证,直接申请短信服务就可以开通了。
创建签名和正文模板
国内短信由签名+正文组成,签名符号为【】,发送短信内容时必须带签名。所以要发送短信,需要申请短信签名和正文模板,两者都通过审核后,就可以开始发送短信了。
创建签名
打开左侧菜单里的国内短信-签名管理,点击创建签名,创建完签名后,这个[代码]签名内容[代码]之后会用到。
签名用途:选择【自用(签名为本账号实名认证的公司、网站、产品名等)】。
签名类型:选择【公众号】。
签名内容:输入公司名或小程序名或公众号名或产品名称
证明类型:选择公众号设置页面截图,然后上传小程序设置页面截图,可以参考案例;
[图片]
创建正文模板
打开左侧菜单里的国内短信-正文模板管理,点击创建正文模板,创建完模板后,会有一个模板[代码]ID[代码],这个之后会用到,也要记住你模板的变量位置。
模板名称,建议带有明确目的的名称,比如“注册通知”、“购买成功反馈”等;
短信类型:选择【普通短信】
短信内容:比如“您正在申请手机注册,验证码为:{1},{2}分钟内有效!”,这里的[代码]{1}[代码]和[代码]{2}[代码]是你要在代码里传入的变量,变量的编码必须是从{1}开始,传入变量时也要按照顺序传入
[图片]
三、短信验证码登录扩展能力
打开云开发 CloudBase 控制台,打开左侧菜单里的扩展能力,点击短信验证码登录模块进行安装。
[图片]
该扩展会创建以下云资源:
云函数:
tcb-sms-auth
生成校验码并发送到指定手机号,以实现短信验证码登录
云数据库:
tcb-sms-auth
存储验证码相关信息。
根据提示完成配置和安装。
四、开通静态网站托管
云开发为开发者提供静态网页托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由对象存储 COS 和拥有多个边缘网点的 CDN 提供支持。您可在腾讯云控制台进行静态网站的部署,提供给您的用户访问。
打开云开发 CloudBase 控制台,打开左侧菜单里的静态网站托管,点击开启使用,然后等待几分钟便可初始化完成。
[图片]
使用扩展
在 web 网站使用该扩展,请先在 云开发控制台 将网站域名添加为当前环境的安全域名。
打开云开发 CloudBase 控制台,复制静态网站托管-基础配置里的默认域名,然后打开左侧菜单里的环境-安全配置,将默认域名添加为WEB安全域名。
[图片]
一、使用方法
安装扩展 SDK 到项目
方法一:通过包管理器引入
[代码]npm install --save @cloudbase/extension-sms
[代码]
方法二:通过CDN引入
[代码]