51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
"use client";
|
|
/**
|
|
* Google 登录按钮（GIS 渲染）
|
|
*
|
|
* 原始 Dart: lib/ui/auth/widgets/google_sign_in_web.dart
|
|
*
|
|
* 通过 `google.accounts.id.renderButton` 把 GIS 官方按钮渲染到指定 div。
|
|
* 登录成功由 `setOnGoogleSignInSuccess` 设置的回调处理。
|
|
*/
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import {
|
|
renderGoogleButton,
|
|
setOnGoogleSignInSuccess,
|
|
type GoogleSignInSuccess,
|
|
} from "@/integrations/google-identity";
|
|
import styles from "./google-sign-in-button.module.css";
|
|
|
|
export interface GoogleSignInButtonProps {
|
|
onSuccess: (success: GoogleSignInSuccess) => void;
|
|
}
|
|
|
|
export function GoogleSignInButton({ onSuccess }: GoogleSignInButtonProps) {
|
|
const ref = useRef<HTMLDivElement | null>(null);
|
|
|
|
useEffect(() => {
|
|
setOnGoogleSignInSuccess(onSuccess);
|
|
return () => setOnGoogleSignInSuccess(null);
|
|
}, [onSuccess]);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
let cancelled = false;
|
|
// GIS 异步加载，轮询直到可用
|
|
const tryRender = () => {
|
|
if (cancelled) return;
|
|
if (window.google?.accounts?.id) {
|
|
renderGoogleButton(ref.current!, { theme: "outline", size: "large" });
|
|
} else {
|
|
setTimeout(tryRender, 100);
|
|
}
|
|
};
|
|
tryRender();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
return <div ref={ref} className={styles.slot} />;
|
|
}
|