chore: google onetap

This commit is contained in:
14790897 2024-03-08 11:38:58 +08:00
parent c91006564b
commit 2267c98d7a
3 changed files with 85 additions and 20 deletions

View File

@ -14,6 +14,7 @@ import PaperManagementWrapper from "@/components/PaperManagementWrapper";
import { useTranslation } from "@/app/i18n";
import { FooterBase } from "@/components/Footer/FooterBase";
import { IndexProps } from "@/utils/global";
import GoogleSignIn from "@/components/GoogleSignIn";
// import Error from "@/app/global-error";
export default async function Index({ params: { lng } }: IndexProps) {
@ -42,6 +43,7 @@ export default async function Index({ params: { lng } }: IndexProps) {
{/* 用来表示是否显示论文列表页 */}
<PaperListButtonWrapper />
{isSupabaseConnected && <AuthButton />}
{isSupabaseConnected && <GoogleSignIn />}
<SettingsLink />
</div>
</nav>

View File

@ -82,33 +82,15 @@ export default function RootLayout({
})(window, document, "clarity", "script", "l869naiex9");`}
</Script>
<Script src="https://accounts.google.com/gsi/client" async></Script>
<Script>{`async function handleSignInWithGoogle(response) {
{/* <Script>{`async function handleSignInWithGoogle(response) {
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'google',
token: response.credential,
})
}`}</Script>
}`}</Script> */}
<body className="bg-background text-foreground">
<main className="min-h-screen flex flex-col items-center">
{children}
<div
id="g_id_onload"
data-client_id="646783243018-m2n9qfo12k70debpmkesevt5j2hi2itb.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="popup"
data-callback="handleSignInWithGoogle"
data-itp_support="true"
></div>
<div
class="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left"
></div>
</main>
</body>
<GoogleAnalytics gaId="G-05DHTG9XQ5" />

View File

@ -0,0 +1,81 @@
import React, { useEffect } from "react";
import { createClient } from "@/utils/supabase/server";
import { cookies } from "next/headers";
const GoogleSignIn = () => {
const cookieStore = cookies();
const supabase = createClient(cookieStore);
// 加载Google身份验证库并初始化
useEffect(() => {
// 确保gapi脚本只被加载一次
if (!window.gapi) {
const script = document.createElement("script");
script.src = "https://accounts.google.com/gsi/client";
script.async = true;
script.defer = true;
script.onload = initGoogleSignIn;
document.body.appendChild(script);
} else {
initGoogleSignIn();
}
}, []);
// 初始化Google登录
const initGoogleSignIn = () => {
window.google.accounts.id.initialize({
client_id: "<your-client-id>.apps.googleusercontent.com", // 替换为你的客户端ID
callback: handleSignInWithGoogle,
auto_select: true, // 根据需要设置
itp_support: true,
});
window.google.accounts.id.renderButton(
document.getElementById("g_id_signin"),
{ theme: "outline", size: "large" }
);
};
// 处理登录响应
const handleSignInWithGoogle = async (response) => {
const { data, error } = await supabase.auth.signInWithIdToken({
provider: "google",
token: response.credential,
nonce: "", // 如果你使用nonce请在这里设置
});
if (error) {
console.error("Login failed:", error);
return;
}
console.log("Login successful:", data);
// 在这里处理登录成功后的逻辑
};
return (
<div>
<div
id="g_id_onload"
data-client_id="646783243018-m2n9qfo12k70debpmkesevt5j2hi2itb.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="popup"
data-callback="handleSignInWithGoogle"
data-nonce=""
data-auto_select="true"
data-itp_support="true"
></div>
<div
id="g_id_signin"
className="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left"
></div>
</div>
);
};
export default GoogleSignIn;