https://cloud.tencent.com/document/product/876/48796

在控制台开启 “短信验证码登录” 的选项, 妈的要钱这个
image.png

短信验证使用的是 js-sdk,手册在这里登录认证 | 云开发 CloudBase - 一站式后端云服务,所以先安装:npm install@cloudbase/js-sdk

因为我们需要在多个地方使用,因此先进行封装,这里选在使用 Vue 插件的方式。
\src\assets\auth.js

20、用户管理与登录授权服务之短信验证码注册 - 图2

不要忘记在入口文件中导入:\src\main.js

20、用户管理与登录授权服务之短信验证码注册 - 图3

首先完成手机验证码的发送。

image.png

登录验证是非常简单的,那么,我们是如何保持登录状态的呢?

登录状态的保持有三种不同的方式,登录认证 | 云开发 CloudBase - 一站式后端云服务

local:在显式退出登录之前的 30 天内保留身份验证状态
session:在窗口关闭时清除身份验证状态
none:在页面重新加载时清除身份验证状态

在初始化调用auth方法时,传入:\src\assets\auth.js
20、用户管理与登录授权服务之短信验证码注册 - 图5

不同的登录状态都可以在浏览器的控制台的 “Appliction” 中查看;那么在不同的组件中,如何获取登录状态和登录的数据呢?

auth 对象中,有 getLoginState 方法,看名字也知道,时获取登录状态的,我们在首页中使用挂载的生命周期函数进行验证,\src\components\Index.vue

20、用户管理与登录授权服务之短信验证码注册 - 图6

当然,你也可以使用 Vue-router 提供的导航守卫进行全局的登录状态验证。

上线部署

20、用户管理与登录授权服务之短信验证码注册 - 图7

申请 SSL 证书,添加 CNAME 记录执行服务器地址即可。