重定向URL配置
使用Supabase Auth设置重定向URL。
概述
Supabase Auth 允许您的应用程序在您授权的网页或移动应用中接收用户会话。
当使用无密码登录或第三方提供商时,Supabase 客户端库方法提供了 redirectTo
参数来指定用户认证后的重定向位置。默认情况下,用户将被重定向到 SITE_URL
,但您可以修改 SITE_URL
或向允许列表添加额外的重定向 URL。将必要 URL 添加到允许列表后,您就可以在 redirectTo
参数中指定希望用户重定向到的 URL。
当使用Web3 登录时,用户在 Web3 钱包应用中签名的消息将显示签名发生的 URL。Supabase Auth 会拒绝针对未允许 URL 签名的消息。
要编辑允许列表,请前往URL 配置页面。在本地开发或自托管项目中,请使用配置文件。
在重定向URL中使用通配符
Supabase允许您在将重定向URL添加到允许列表时使用通配符。您可以使用通配符匹配模式来支持来自Netlify和Vercel等提供商的预览URL。
通配符 | 描述 |
---|---|
* | 匹配任何非分隔符字符序列 |
** | 匹配任何字符序列 |
? | 匹配任何单个非分隔符字符 |
c | 匹配字符c(c不等于* 、** 、? 、\ 、[ 、{ 、} ) |
\c | 匹配字符c |
[!{ character-range }] | 匹配不在{ character-range } 范围内的任何字符序列。例如,[!a-z] 将不匹配从a到z的任何字符。 |
URL中的分隔符定义为.
和/
。使用此工具来测试您的匹配模式。
建议
虽然"globstar"(**
)对于本地开发和预览URL很有用,但我们建议在生产环境中为您的站点URL设置精确的重定向URL路径。
使用通配符的重定向URL示例
重定向URL | 描述 |
---|---|
http://localhost:3000/* | 匹配 http://localhost:3000/foo 、http://localhost:3000/bar ,但不匹配 http://localhost:3000/foo/bar 或 http://localhost:3000/foo/ (注意末尾斜杠) |
http://localhost:3000/** | 匹配 http://localhost:3000/foo 、http://localhost:3000/bar 以及 http://localhost:3000/foo/bar |
http://localhost:3000/? | 匹配 http://localhost:3000/a 但不匹配 http://localhost:3000/foo |
http://localhost:3000/[!a-z] | 匹配 http://localhost:3000/1 但不匹配 http://localhost:3000/a |
Netlify预览URL
对于Netlify部署,将SITE_URL
设置为您正式站点的URL。为本地开发和部署预览添加以下额外的重定向URL:
http://localhost:3000/**
https://**--my_org.netlify.app/**
Vercel 预览 URL
对于使用 Vercel 的部署,请将 SITE_URL
设置为您正式网站的 URL。同时为本地开发和部署预览添加以下额外的重定向 URL:
http://localhost:3000/**
https://*-<team-or-account-slug>.vercel.app/**
Vercel 提供了一个名为 NEXT_PUBLIC_VERCEL_URL
的环境变量来获取部署的 URL。更多详情请参阅 Vercel 文档。您可以使用此变量根据环境动态重定向。同时还应设置名为 NEXT_PUBLIC_SITE_URL
的环境变量,在生产环境中应将其设置为您的站点 URL,以确保重定向功能正常工作。
123456789101112131415161718const getURL = () => { let url = process?.env?.NEXT_PUBLIC_SITE_URL ?? // 在生产环境中设置为您的站点 URL process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // 由 Vercel 自动设置 'http://localhost:3000/' // 确保非本地环境包含 `https://` url = url.startsWith('http') ? url : `https://${url}` // 确保包含结尾的 `/` url = url.endsWith('/') ? url : `${url}/` return url}const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github', options: { redirectTo: getURL(), },})
使用 redirectTo
时的邮件模板
当使用 redirectTo
选项时,您可能需要在邮件模板中将 {{ .SiteURL }}
替换为 {{ .RedirectTo }}
。更多信息请参阅邮件模板指南。
例如,进行如下更改:
1234567<!-- 旧版 --><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">确认邮件</a><!-- 新版 --><a href="{{ .RedirectTo }}/auth/confirm?token_hash={{ .TokenHash }}&type=email" >确认邮件</a>
移动端深度链接URI
对于移动应用程序,您可以使用深度链接URI。例如,对于SITE_URL
,您可以指定类似com.supabase://login-callback/
的URI;如果需要额外的重定向URL,可以指定类似com.supabase.staging://login-callback/
的URI。
了解更多关于深度链接的信息并查看不同框架的代码示例,请参阅此处。
错误处理
当认证失败时,用户仍会被重定向到提供的重定向URL。不过,错误详情会以URL中的查询片段形式返回。您可以解析这些查询片段并向用户显示自定义错误信息。例如:
123456const params = new URLSearchParams(window.location.hash.slice())if (params.get('error_code').startsWith('4')) { // 如果是4xx错误则显示错误信息 window.alert(params.get('error_description'))}