Supabase 集成
Supabase Authentication(通常简称为 Supabase Auth)是 Supabase 平台提供的完整用户认证和管理系统。它允许开发者轻松实现用户注册、登录、身份验证和访问控制功能,而无需从零构建这些复杂的安全系统。
概览
本指南为开发者提供快速集成 Supabase Auth 的步骤说明,以及基础的边缘函数功能开发,并提供将项目部署在 EdgeOne Pages 的教程。下文将详细介绍集成步骤,快速完成项目中的用户管理功能开发。
快速入门
您可以选择 Pages 提供的 Supabase Auth 集成模版,快捷迅速进入到开发当中,点击 Supabase Auth Starter 模版。本教程大致分为三步:Supabase 配置、开发调试、EdgeOne Pages 部署配置,下面将详细介绍每个步骤的具体操作。
Supabase 准备
1、账号注册和配置
2、Authentication 介绍
Supabase 平台提供的 Authentication 功能可高效管理用户数据。通过左侧导航栏访问 Authentication 管理界面,您将看到预配置的用户数据表及相关设置。此界面支持配置电子邮件验证流程、访问策略(Policies)以及会话(Session)参数等核心功能。如需深入了解特定功能,请参阅官方文档中的详细说明。

本地开发
1、Supabase 用户管理接口说明
Supabase 平台为用户管理提供了全面的预置API接口。您可通过左侧导航栏的
API Docs
部分,选择 User Management
选项卡查阅这些接口文档。
这套完备的接口体系覆盖了主要用户管理需求。在后续章节中,我们将详细探讨如何在边缘函数环境中调用这些 Supabase 接口,实现 Next.js 应用中的完整用户管理流程。

2、边缘函数调用 Supabase 用户管理接口
开始实践前,请先参考 EdgeOne CLI 文档了解边缘函数的本地开发与调试流程。本指南将基于 Supabase Auth Starter 模版开发代码,演示如何实现用户身份管理的核心功能,包括注册、登录、注销以及密码管理等操作。
首先,在您的 Next.js 项目根目录创建
.env
文件,并配置以下必要环境变量:# supabase 连接参数SUPABASE_URL=https://xxxxx.supabase.coSUPABASE_ANON_KEY=xxxx# local dev vars# 前端启动地址FRONT_END_URL_DEV=http://localhost:5173/# 后台边缘函数地址VITE_PUBLIC_API_URL_DEV=http://localhost:8088/DEV=true
本地开发启动项目可以在命令行执行
npm run dev
启动前端,前端运行成功后点击 New Terminal
,并在新的命令行接口执行 edgeone pages dev --fePort=5173
启动边缘函数后台服务。
在边缘函数
functions
文件夹下需要创建两套接口,分别是 auth
认证核心功能接口和 lib
基本功能函数。
在
lib
基本功能函数中创建 Supabase 客户端配置。import { createClient } from "@supabase/supabase-js";export const createSupabaseClient = (env, access_token) => {return createClient(// 连接参数env.SUPABASE_URL,env.SUPABASE_ANON_KEY,{// 认证配置auth: {autoRefreshToken: false,persistSession: false,detectSessionInUrl: false},// 全局配置global: {headers: access_token ? {Authorization:Bearer $
{
access_token
}
} : {}}});}
在
auth
中以用户注册功能为例,我们可在 API 层实现定制化的数据校验逻辑。首先对邮箱格式与密码强度进行严格验证,随后通过导入createSupabaseClient
工具函数,并调用await createSupabaseClient(env).auth.xxx()
方法序列来无缝对接 Supabase 提供的服务。import { createSupabaseClient } from "../libs/supabase";export async function onRequestPost(context) {const { request, env } = context;const formData = await request.formData();const email = formData.get("email")?.toString();const password = formData.get("password")?.toString();if (!email || !password) {return new Response("Email and password are required", { status: 400 });}const { data, error } = await createSupabaseClient(env).auth.signUp({email,password,});if (error) {return new Response(error.code, { status: 500 });}return new Response(null, { status: 200 });}
部署到 EdgeOne Pages
这一节会详细介绍将开发好的项目部署到 EdgeOne Pages。
1、上传项目到 git(从模版创建项目忽略此步)
创建新仓库
登录您的 GitHub 账户,进入
Dashboard
点击右上角的
New
按钮填写仓库名称、描述等信息
选择仓库可见性(Public 或 Private)
点击
Create repository
完成创建
上传本地项目
在本地项目目录下初始化 Git(如未初始化)
将项目文件提交并推送到新建的远程仓库
然后在本地关联远程仓库,并上传本地代码。
# Push your code to your git repository (e.g. GitHub, Gitee).git initgit add .git commit -m "First commit"git remote add origin "your Git address"git push -u origin master
通过以上步骤,您的项目代码将成功托管至 GitHub,为后续部署做好准备。
2、填写环境变量
在部署设置页面填写
Environment Variables
。如果是自定义部署,Variable name
应该与本地项目中的 .env
保持一致。
当出现 "Congratulations!" 表示部署成功,部署大致会花费1-3分钟。如果项目出现部署失败,可以根据
Build Logs
和 Build Summary
信息修改项目,或者联系工作人员解决。
部署成功后到项目首页复制
Domain
。
