一键登录
一键登录插件允许用户使用 Google 的 One Tap API 通过单次点击登录。该插件 提供了一种简单的方式将 One Tap 集成到您的应用程序中,为您处理客户端和服务器端逻辑。
安装
添加服务器插件
将一键登录插件添加到您的认证配置中:
import { betterAuth } from "better-auth";
import { oneTap } from "better-auth/plugins";
export const auth = betterAuth({
plugins: [
oneTap(), // 添加一键登录服务器插件
]
});添加客户端插件
添加客户端插件并指定用户在登录后应该被重定向到哪里,或者如果需要额外验证(如 2FA)。
import { createAuthClient } from "better-auth/client";
import { oneTapClient } from "better-auth/client/plugins";
export const authClient = createAuthClient({
plugins: [
oneTapClient({
clientId: "YOUR_CLIENT_ID",
// 可选的客户端配置:
autoSelect: false,
cancelOnTapOutside: true,
context: "signin",
additionalOptions: {
// Google initialize 方法的任何额外选项
},
// 配置提示行为和指数退避:
promptOptions: {
baseDelay: 1000, // 基础延迟(毫秒)(默认:1000)
maxAttempts: 5 // 在触发 onPromptNotification 之前的最多尝试次数(默认:5)
}
})
]
});使用
要显示一键登录弹出窗口,只需在您的认证客户端上调用 oneTap 方法:
await authClient.oneTap();自定义重定向行为
默认情况下,登录成功后插件会将用户硬重定向到 /。您可以按以下方式自定义此行为:
避免硬重定向
传递带有 onSuccess 回调的 fetchOptions 来处理登录响应,而无需页面重新加载:
await authClient.oneTap({
fetchOptions: {
onSuccess: () => {
// 例如,使用路由器在不完全重新加载的情况下导航:
router.push("/dashboard");
}
}
});指定自定义回调 URL
要登录后硬重定向到不同页面,请使用 callbackURL 选项:
await authClient.oneTap({
callbackURL: "/dashboard"
});使用指数退避处理提示关闭
如果用户关闭或跳过提示,插件将使用基于您配置的 promptOptions 的指数退避重试显示一键登录提示。
如果在成功登录前达到最大尝试次数,您可以使用 onPromptNotification 回调来接收通知——允许您渲染替代 UI(例如,传统的 Google 登录按钮),以便用户可以手动重新启动过程:
await authClient.oneTap({
onPromptNotification: (notification) => {
console.warn("提示被关闭或跳过。请考虑显示替代登录选项。", notification);
// 在此处渲染您的替代 UI
}
});客户端选项
- clientId:Google One Tap API 的客户端 ID。
- autoSelect:如果用户已登录,则自动选择账户。默认值为 false。
- context:一键登录 API 应使用的上下文(例如,"signin")。默认值为 "signin"。
- cancelOnTapOutside:当用户点击弹出窗口外部时取消一键登录弹出窗口。默认值为 true。
- additionalOptions:根据 Google Identity Services 文档 传递给 Google initialize 方法的额外选项。
- promptOptions:提示行为和指数退避的配置:
- baseDelay:重试的基础延迟(毫秒)。默认值为 1000。
- maxAttempts:在调用 onPromptNotification 回调之前的最多提示尝试次数。默认值为 5。
服务器选项
- disableSignUp:禁用注册选项,仅允许现有用户登录。默认值为
false。 - ClientId:可选,如果未在您的社交提供程序配置中提供,请在此处传递客户端 ID。