基于Supabase实现短信验证登录

更新时间:

短信验证码登录是应用登录体系的重要组成部分,也是广为用户接受的注册登录方式。云原生数据仓库AnalyticDB PostgreSQL深度集成开源Supabase的身份认证系统,在Supabase原生提供的短信服务提供者基础上,同时支持阿里云短信服务(SMS),帮助开发者搭建快速稳定的短信验证登录能力。本文主要介绍如何在云原生数据仓库AnalyticDB PostgreSQLSupabase项目中使用阿里云SMS实现短信登录。

前提条件

  • 创建Supabase项目。已开通的云原生数据仓库AnalyticDB PostgreSQLSupabase项目,创建时间需晚于20250930日。

  • 开通阿里云SMS,并完成申请资质、签名、模板等工作,具体操作请参见新手指引。使用阿里云短信服务会产生一定费用,计费信息请参见计费概述

  • 已为云原生数据仓库AnalyticDB PostgreSQLSupabase项目开通公网访问

操作步骤

  1. 登录Supabase Dashboard,在Dashboard侧边栏单击Authentication>Sign In/Providers

  2. Auth Providers中单击Phone

    image

  3. 配置短信服务。

    1. 开启Enable Phone provider

      image

    2. SMS provider中选择短信服务者。

      本示例选择Aliyun SMS,配置参数说明如下,其他配置方式请参见Phone Login

      参数

      说明

      Aliyun Access Key ID

      阿里云账号的访问密钥,获取方式请参见创建AccessKey

      Aliyun Access Key Secret

      Aliyun SMS Sign Name

      您在阿里云SMS上申请的签名名称,申请方式请参见申请短信签名

      Aliyun SMS Template Code

      您在阿里云SMS上申请的模板名称,申请方式请参见申请短信模板

      Enable phone confirmations

      开启代表用户需要使用验证码登录。

      SMS OTP Expiry

      验证码过期时间,单位为秒。

      SMS OTP Length

      验证码的长度。

      SMS Message

      发送短信的模板,填写为Aliyun SMS Template Code对应的短信模板内容,其中将验证码内容替换为{{ .Code }}

      Test Phone Numbers and OTPs

      用于测试的电话号码及验证码。

    3. 单击Save保存后,即可以使用阿里云SMS发送短信验证登录。

使用方式

配置完成后,您可以通过以下方式使用短信验证登录。

通过URL调用

  1. 调用注册接口。

    登录Supabase Dashboard,在Dashboard页面左上角单击Connect,然后在弹出窗口中单击App Frameworks,获取SUPABASE_PUBLIC_URLANON_KEY。示例如下。

    curl -X POST 'https://<SUPABASE_PUBLIC_URL>/auth/v1/signup' \
      -H 'apikey: YOUR_ANON_KEY' \
      -H 'Content-Type: application/json' \
      -d '{
        "phone": "+86xxxxxxxxx",
        "password": "password"
      }'
  2. 手机接收到短信后,使用验证码确认。

    curl -X POST 'https://<SUPABASE_PUBLIC_URL>/auth/v1/verify' \
      -H 'apikey: YOUR_ANON_KEY' \
      -H 'Content-Type: application/json' \
      -d '{
        "phone": "86xxxxxxxxx",
        "type": "sms",
        "token": "xxxxxx"
      }'

通过supabase-js调用

supabase-js的安装与使用,请参见supabase-js

  1. 调用注册接口。

    const { data, error } = await supabase.auth.signUp(
      {
        phone: '+86xxxxxxxxx',
        password: 'password',
        options: {
          data: {
            first_name: 'John',
            age: 27,
          }
        }
      }
    )
  2. 手机接收到短信后,使用验证码确认。

    const { data, error } = await supabase.auth.verifyOtp({ phone, token, type: 'sms'})