一、快速入门
你可以选择 Makers 提供的 Supabase Auth 集成模板,快捷进入到开发当中,点击 Supabase Auth Starter 模板。本教程大致分为三步:Supabase 配置、开发调试、EdgeOne Makers 部署配置,下面将详细介绍每个步骤的具体操作。
二、1. 账号注册和配置
如果你是首次接触 Supabase,请参阅我们的 Supabase 集成指南,获取账户注册及环境初始化的完整流程。
三、2. Authentication 介绍
Supabase 平台提供的 Authentication 功能可高效管理用户数据。通过左侧导航栏访问 Authentication 管理界面,你将看到预配置的用户数据表及相关设置。此界面支持配置电子邮件验证流程、访问策略(Policies)以及会话(Session)参数等核心功能。如需深入了解特定功能,请参阅 产品文档 中的详细说明。
四、1. Supabase 用户管理接口说明
Supabase 平台为用户管理提供了全面的预置 API 接口。你可通过左侧导航栏的 API Docs 部分,选择 User Management 选项卡查阅这些接口文档。
这套完备的接口体系覆盖了主要用户管理需求。在后续章节中,我们将详细探讨如何在 Next.js 框架中调用这些 Supabase 接口,实现应用中的完整用户管理流程。
五、2. Next.js + Supabase 完成用户管理
开始实践前,请先了解 Next.js 的全栈开发模式,用户可以参考 Supabase Auth Starter 模板开发 代码,模板代码中演示了如何实现用户身份管理的核心功能,包括注册、登录、注销以及密码管理等操作。
首先,在你的 Next.js 项目根目录创建 .env 文件,并配置以下必要环境变量:
# supabase 连接参数NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.coNEXT_PUBLIC_SUPABASE_ANON_KEY=xxxx# 后台地址NEXT_PUBLIC_SITE_URL=http://localhost:3000/
本地开发启动项目可以在命令行执行 npm run dev 启动 Next.js 框架开发项目。项目后台功能集成在/app/api 路径下,建议参考提供的 模板代码,以便了解身份验证各项功能的实现。
六、部署到 EdgeOne Makers
这一节会详细介绍将开发好的项目部署到 EdgeOne Makers。
七、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,为后续部署做好准备。
进入到 EdgeOne Makers 控制台 中,上传自己的项目到 GitHub,点击 创建项目 > 导入 Git 仓库,选择你的项目。
八、2. 填写环境变量
在部署设置页面填写 环境变量。如果是自定义部署,变量名称 应该与本地项目中的 .env 保持一致。
当出现 “恭喜!” 表示部署成功,部署大致会花费1-3分钟。如果项目出现部署失败,可以根据 Build Logs 和 Build Summary 信息修改项目,或者联系工作人员解决。
部署成功后,到项目域名管理处复制域名。
接下来,访问 Supabase 控制台 并导航至 URL 配置部分。将你的域名信息复制到 Site URL 字段中,这样在用户完成注册流程后,将自动重定向至你的网站主页。