基于 Better Auth + Next.js 实现腾讯云短信验证：完整接入指南

# 腾讯云短信服务配置
TENCENT_SMS_SECRET_ID=your_secret_id
TENCENT_SMS_SECRET_KEY=your_secret_key
TENCENT_SMS_REGION=ap-guangzhou
TENCENT_SMS_SDK_APP_ID=your_sdk_app_id
TENCENT_SMS_SIGN_NAME=你的签名
TENCENT_SMS_TEMPLATE_ID=your_template_id

⚠️ 腾讯云短信服务的短信接口目前只开放在 ap-guangzhou 区域，填写其他区域会导致调用返回 “The action not support this region”。

3. 创建短信服务封装

创建 src/lib/sms/tencent-sms.ts 文件：

import { sms } from 'tencentcloud-sdk-nodejs';

const SmsClient = sms.v20210111.Client;

const client = new SmsClient({
  credential: {
    secretId: process.env.TENCENT_SMS_SECRET_ID!,
    secretKey: process.env.TENCENT_SMS_SECRET_KEY!,
  },
  region: process.env.TENCENT_SMS_REGION!,
});

export async function sendVerificationCodeSMS(
  phoneNumber: string,
  code: string
): Promise<{ success: boolean; error?: string }> {
  try {
    const params = {
      PhoneNumberSet: [phoneNumber],
      SmsSdkAppId: process.env.TENCENT_SMS_SDK_APP_ID!,
      SignName: process.env.TENCENT_SMS_SIGN_NAME!,
      TemplateId: process.env.TENCENT_SMS_TEMPLATE_ID!,
      TemplateParamSet: [code, '5'], // 验证码和有效期
    };

    const response = await client.SendSms(params);
    
    if (response.SendStatusSet?.[0]?.Code === 'Ok') {
      return { success: true };
    } else {
      return {
        success: false,
        error: response.SendStatusSet?.[0]?.Message || '发送失败',
      };
    }
  } catch (error) {
    console.error('腾讯云短信发送失败:', error);
    return {
      success: false,
      error: error instanceof Error ? error.message : '未知错误',
    };
  }
}

4. 配置 Better Auth

在 src/lib/auth/auth.ts 中添加 phoneNumber 插件：

import { betterAuth } from 'better-auth';
import { phoneNumber } from 'better-auth/plugins';
import { sendVerificationCodeSMS } from '@/lib/sms/tencent-sms';

export const auth = betterAuth({
  // ... 其他配置
  plugins: [
    phoneNumber({
      async sendOTP({ phoneNumber, otp }) {
        const result = await sendVerificationCodeSMS(phoneNumber, otp);
        if (!result.success) {
          throw new Error(result.error || '短信发送失败');
        }
      },
    }),
    // ... 其他插件
  ],
});

5. 更新数据库 Schema

在 prisma/schema.prisma 中添加手机号字段：

model User {
  id                   String    @id @default(cuid())
  email                String?   @unique
  phoneNumber          String?   @unique
  phoneNumberVerified  Boolean   @default(false)
  // ... 其他字段
}

运行数据库迁移：

bun run db:migrate

6. 配置客户端

在 src/lib/auth/client.ts 中添加 phoneNumber 客户端插件：

import { createAuthClient } from 'better-auth/react';
import { phoneNumberClient } from 'better-auth/client/plugins';

export const authClient = createAuthClient({
  baseURL: process.env.NEXT_PUBLIC_BETTER_AUTH_URL,
  plugins: [
    phoneNumberClient(),
    // ... 其他插件
  ],
});

7. 创建前端组件

创建 src/components/auth/phone-login.tsx：

'use client';

import { useState } from 'react';
import { authClient } from '@/lib/auth/client';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export function PhoneLogin() {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [otp, setOtp] = useState('');
  const [step, setStep] = useState<'phone' | 'otp'>('phone');
  const [loading, setLoading] = useState(false);
  const [countdown, setCountdown] = useState(0);

  const sendOTP = async () => {
    if (!phoneNumber) return;
    
    setLoading(true);
    try {
      await authClient.phoneNumber.sendOtp({ phoneNumber });
      setStep('otp');
      startCountdown();
    } catch (error) {
      console.error('发送验证码失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const verifyOTP = async () => {
    if (!otp) return;
    
    setLoading(true);
    try {
      await authClient.phoneNumber.verify({
        phoneNumber,
        code: otp,
      });
      // 登录成功，跳转或刷新页面
      window.location.reload();
    } catch (error) {
      console.error('验证失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const startCountdown = () => {
    setCountdown(60);
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
  };

  if (step === 'phone') {
    return (
      <div className="space-y-4">
        <Input
          type="tel"
          placeholder="请输入手机号"
          value={phoneNumber}
          onChange={(e) => setPhoneNumber(e.target.value)}
        />
        <Button
          onClick={sendOTP}
          disabled={loading || !phoneNumber}
          className="w-full"
        >
          {loading ? '发送中...' : '发送验证码'}
        </Button>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <Input
        type="text"
        placeholder="请输入验证码"
        value={otp}
        onChange={(e) => setOtp(e.target.value)}
      />
      <div className="flex gap-2">
        <Button
          onClick={verifyOTP}
          disabled={loading || !otp}
          className="flex-1"
        >
          {loading ? '验证中...' : '验证登录'}
        </Button>
        <Button
          variant="outline"
          onClick={sendOTP}
          disabled={countdown > 0 || loading}
        >
          {countdown > 0 ? `${countdown}s` : '重发'}
        </Button>
      </div>
    </div>
  );
}