Skip to content
Auth

手机登录

手机登录是一种认证方式,允许用户无需密码就能登录网站或应用。用户通过接收到的一次性密码(OTP)进行认证,这个密码会通过短信或 WhatsApp 等渠道发送。

🌐 Phone Login is a method of authentication that allows users to log in to a website or application without using a password. The user authenticates through a one-time password (OTP) sent via a channel (SMS or WhatsApp).

用户还可以使用内置身份提供者通过手机进行本地移动登录。关于 Android 和 iOS 的本地移动登录,请参阅 社交登录指南

🌐 Users can also log in with their phones using Native Mobile Login with the built-in identity provider. For Native Mobile Login with Android and iOS, see the Social Login guides.

手机验证码登录可以:

🌐 Phone OTP login can:

  • 通过不要求用户创建和记住密码来提升用户体验
  • 通过降低与密码相关的安全漏洞风险来提高安全性
  • 减少处理密码重置和其他与密码相关流程的支持负担

启用手机登录 #

🌐 Enabling phone login

在托管的 Supabase 项目的 认证提供商页面 启用手机认证。

🌐 Enable phone authentication on the Auth Providers page for hosted Supabase projects.

对于自托管项目或本地开发,请使用 配置文件。请查看 auth.sms 下的配置变量。

🌐 For self-hosted projects or local development, use the configuration file. See the configuration variables namespaced under auth.sms.

你还需要设置一个短信服务提供商。每个提供商都有自己的配置。支持的提供商包括 MessageBird、Twilio、Vonage 和 TextLocal(社区支持)。

🌐 You also need to set up an SMS provider. Each provider has its own configuration. Supported providers include MessageBird, Twilio, Vonage, and TextLocal (community-supported).

Configuring SMS Providers

默认情况下,用户每 60 seconds 只能请求一次 OTP,并且它们会在 1 hour后过期。

用手机 OTP 登录 #

🌐 Signing in with phone OTP

使用一次性密码(OTP),用户可以在不设置账户密码的情况下登录。他们每次登录时都需要验证手机号。

🌐 With OTP, a user can sign in without setting a password on their account. They need to verify their phone number each time they sign in.

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
4
5
// ---cut---
6
const { data, error } = await supabase.auth.signInWithOtp({
7
phone: '+13334445555',
8
})

用户会收到一条包含6位验证码的短信,你必须在60秒内验证。

🌐 The user receives an SMS with a 6-digit pin that you must verify within 60 seconds.

验证手机 OTP #

🌐 Verifying a phone OTP

要验证发送到用户手机号的一次性密码 (OTP),请用手机号和 OTP 调用 verifyOtp():

🌐 To verify the one-time password (OTP) sent to the user's phone number, call verifyOtp() with the phone number and OTP:

你应该向用户展示一个表单,让他们输入6位数的密码,然后将其和电话号码一起发送到 verifyOtp

🌐 You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to verifyOtp:

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
4
5
// ---cut---
6
const {
7
data: { session },
8
error,
9
} = await supabase.auth.verifyOtp({
10
phone: '13334445555',
11
token: '123456',
12
type: 'sms',
13
})

如果成功,用户现在将已登录,你应该会收到一个有效的会话信息,如下:

🌐 If successful the user will now be logged in and you should receive a valid session like:

1
{
2
"access_token": "<ACCESS_TOKEN>",
3
"token_type": "bearer",
4
"expires_in": 3600,
5
"refresh_token": "<REFRESH_TOKEN>"
6
}

访问令牌可以作为 Bearer 令牌发送到 Authorization 头中,用于在 supabase-js 上进行任何 CRUD 操作。有关按用户限制访问的更多信息,请参阅我们的 行级安全 指南。

🌐 The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on Row Level Security for more info on restricting access on a user basis.

更新电话号码 #

🌐 Updating a phone number

要更新用户的电话号码,用户必须先登录。使用他们的电话号码调用updateUser():

🌐 To update a user's phone number, the user must be logged in. Call updateUser() with their phone number:

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
4
5
// ---cut---
6
const { data, error } = await supabase.auth.updateUser({
7
phone: '123456789',
8
})

用户会收到一条包含6位数字验证码的短信,你必须在60秒内验证。调用verifyOTP更新用户手机号时使用phone_change类型。

🌐 The user receives an SMS with a 6-digit pin that you must verify within 60 seconds. Use the phone_change type when calling verifyOTP to update a user’s phone number.