如果你业务大部分的用户是国内用户,那么支持手机号验证码登录还是很有必要的。如果你不想使用短信验证服务,那你只需要在<LoginBox>
组件中,注释掉邮箱和手机号验证的 Tab 切换即可,非常简单。
如果你期望使用短信服务,你可以在「Memfire 控制台」 - 「用户验证」 - 「服务商」中,开启手机号验证码。
Memfire 支持多个短信服务商,包括阿里云、Twilio、MessageBird 等。各个服务商之间的配置虽然略有不同,但是本质上都是在服务商的控制台配置号后,填入对应的短信配置信息。这里我们以大家比较熟悉的阿里云为例,来看一下我们如何使用阿里云的短信验证服务。
如果你是第一次使用阿里云的短信服务,你需要再阿里云控制台开通「短信服务」。之后你需要购买短信套餐,前期你只需要购买 1000 条最低套餐即可。
当你购买完短信套餐后,回到「短信服务」控制台,然后进入到「快速学习和测试」,在这个页面中,你需要走完所有的学习流程步骤,特别是前 3 步的内容必须走完才能获取到我们在 Memfire 控制台中需要填写的所有内容:
点击「新增资质」,进入到对应的页面。在这个页面中,你需要填写你的个人信息,然后提交审核,资质命名可以填写个人姓名,例如:李四。
审核通过后,你就可以在后续的步骤中使用这个资质。整个审核时间大概 2 个小时,
点击「申请签名」,进入到对应的页面。在这个页面中,你需要填写完成对应的表单,然后提交审核,整个的审核时间大概 2 个小时。
但在这一部中有 2 个地方需要注意,否则容易审核不通过:
点击「申请模板」,进入到对应的页面。在这个页面中,你需要配置你的短信模板,建议模板内容使用阿里云的「常用模板推荐」 - 「登录/验证」这一个模板。基本上就可以不用审核,直接通过。
点击你的头像,进入到「AccessKey 管理」,然后点击「创建 AccessKey」,获取到你的 AccessKey 和 AccessSecret。
当你填写完上面 3 部后,就已经获取到了我们 Memfire 控制台中需要填写的所有表单字段信息。你可以在阿里云的「短信服务」 -「国内消息」中查看你的相信信息。
之后我们进入到 Memfire 控制台,点击「用户认证」 - 「服务商」 - 「阿里云」,复制对应的阿里云的字段,填写到对应的表单中即可。
当你完成上面的步骤后,你就可以在你的登录页面中,使用手机号验证码登录了。NuxtBase 帮你封装了下面的所有前后端代码逻辑,你无需关心。
// 发送手机验证码
let { data, error } = await supabase.auth.signInWithOtp({
phone: form.value.phone,
});
// 验证手机验证码
let { data, error } = await supabase.auth.verifyOtp({
phone: phone,
token: code,
type: "sms",
});