logo

手机号验证码登录

在 Memfire 开启手机号验证

如果你业务大部分的用户是国内用户,那么支持手机号验证码登录还是很有必要的。如果你不想使用短信验证服务,那你只需要在<LoginBox>组件中,注释掉邮箱和手机号验证的 Tab 切换即可,非常简单。

如果你期望使用短信服务,你可以在「Memfire 控制台」 - 「用户验证」 - 「服务商」中,开启手机号验证码。

手机号

使用阿里云短信服务

Memfire 支持多个短信服务商,包括阿里云、Twilio、MessageBird 等。各个服务商之间的配置虽然略有不同,但是本质上都是在服务商的控制台配置号后,填入对应的短信配置信息。这里我们以大家比较熟悉的阿里云为例,来看一下我们如何使用阿里云的短信验证服务。

短信服务商

1. 购买短信套餐

如果你是第一次使用阿里云的短信服务,你需要再阿里云控制台开通「短信服务」。之后你需要购买短信套餐,前期你只需要购买 1000 条最低套餐即可。

购买短信套餐

当你购买完短信套餐后,回到「短信服务」控制台,然后进入到「快速学习和测试」,在这个页面中,你需要走完所有的学习流程步骤,特别是前 3 步的内容必须走完才能获取到我们在 Memfire 控制台中需要填写的所有内容:

  1. 新增资质:资质是申请签名的实名化信息,可复用
  2. 申请签名:签名是短信中能代表发送者属性的字段
  3. 申请模板:模板即具体发送的短信服务

流程

2. 新增资质

点击「新增资质」,进入到对应的页面。在这个页面中,你需要填写你的个人信息,然后提交审核,资质命名可以填写个人姓名,例如:李四。

审核通过后,你就可以在后续的步骤中使用这个资质。整个审核时间大概 2 个小时,

新增资质

3. 申请签名

点击「申请签名」,进入到对应的页面。在这个页面中,你需要填写完成对应的表单,然后提交审核,整个的审核时间大概 2 个小时。

但在这一部中有 2 个地方需要注意,否则容易审核不通过:

  • 签名:需要填写自己的网站名称,例如 NuxtBase
  • 更多资料:这个截图需要上传带有你网站名称的网站截图,例如网站首页截图,如果你上次的截图和你的网站无关,那么审核很有可能无法通过。

申请签名

4. 申请模板

点击「申请模板」,进入到对应的页面。在这个页面中,你需要配置你的短信模板,建议模板内容使用阿里云的「常用模板推荐」 - 「登录/验证」这一个模板。基本上就可以不用审核,直接通过。

申请模板

5. 获取阿里云的 AccessKey 和 AccessSecret

点击你的头像,进入到「AccessKey 管理」,然后点击「创建 AccessKey」,获取到你的 AccessKey 和 AccessSecret。

阿里云AccessKey

6. 进入到 Memfire 控制台,填写对应的配置信息

当你填写完上面 3 部后,就已经获取到了我们 Memfire 控制台中需要填写的所有表单字段信息。你可以在阿里云的「短信服务」 -「国内消息」中查看你的相信信息。

阿里云字段获取

之后我们进入到 Memfire 控制台,点击「用户认证」 - 「服务商」 - 「阿里云」,复制对应的阿里云的字段,填写到对应的表单中即可。

手机号

7. 完成

当你完成上面的步骤后,你就可以在你的登录页面中,使用手机号验证码登录了。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",
});