如何使Google OAuth按钮始终显示固定文本，禁用个性化提示

我用@react-oauth/google开发的Google OAuth按钮功能正常，但浏览器已登录Google账号时，按钮会显示“Sign in as {google_name}”，而非预期的固定文本“Sign up with Google”，需要让按钮始终显示指定内容。

当前React实现代码：

<GoogleOAuthProvider clientId="MY CLIENT ID">
    <GoogleLogin
        type="standard"
        text="signin_with"
        width={250}
        onSuccess={(credentialResponse) => {
            changeGoogleEmail(credentialResponse);
        }}
    />
   <br />
</GoogleOAuthProvider>

React解决方案 #

方案1：CSS强制覆盖文本 #

由于@react-oauth/google未提供禁用个性化文本的配置项，可通过CSS隐藏动态文本并添加固定内容：

/* 隐藏按钮内部的动态文本元素 */
.google-login-btn > div[aria-hidden="true"] {
    display: none;
}

/* 添加固定按钮文本，模拟原按钮布局 */
.google-login-btn::after {
    content: "Sign up with Google";
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

/* 保留Google图标层级 */
.google-login-btn > svg {
    position: relative;
    z-index: 1;
}

给GoogleLogin组件添加自定义类名：

<GoogleLogin
    className="google-login-btn"
    type="standard"
    text="signin_with"
    width={250}
    onSuccess={(credentialResponse) => {
        changeGoogleEmail(credentialResponse);
    }}
/>

方案2：自定义按钮触发授权 #

如果CSS方案不够可靠，可通过useGoogleLogin钩子手动实现授权逻辑，完全控制按钮文本：

import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';

const CustomGoogleSignupBtn = () => {
    const login = useGoogleLogin({
        onSuccess: (credentialResponse) => {
            changeGoogleEmail(credentialResponse);
        },
    });

    return (
        <button 
            onClick={login} 
            style={{
                padding: '10px 16px',
                border: '1px solid #dadce0',
                borderRadius: '4px',
                backgroundColor: '#fff',
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                cursor: 'pointer',
                fontSize: '14px',
                width: '250px',
                justifyContent: 'center'
            }}
        >
            {/* Google官方图标 */}
            <svg width="18" height="18" viewBox="0 0 18 18">
                <path fill="#4285F4" d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a7.8 7.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18Z"/>
                <path fill="#34A853" d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2a4.8 4.8 0 0 1-7.18-2.54H1.83v2.07A8 8 0 0 0 8.98 17Z"/>
                <path fill="#FBBC05" d="M4.5 10.52a4.8 4.8 0 0 1 0-3.04V5.41H1.83a8 8 0 0 0 0 7.18l2.67-2.07Z"/>
                <path fill="#EA4335" d="M8.98 4.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 0 0 1.83 5.4L4.5 7.49a4.77 4.77 0 0 1 4.48-3.3Z"/>
            </svg>
            Sign up with Google
        </button>
    );
};

// 使用自定义组件
<GoogleOAuthProvider clientId="MY CLIENT ID">
    <CustomGoogleSignupBtn />
    <br />
</GoogleOAuthProvider>

纯HTML解决方案 #

通过data-personalized="false"禁用个性化展示，同时绑定登录回调：

<script src="https://accounts.google.com/gsi/client" async defer></script>
<div id="g_id_onload"
    data-client_id="YOUR_GOOGLE_CLIENT_ID"
    data-auto_prompt="false"
    data-callback="handleGoogleLogin"> <!-- 绑定登录回调 -->
</div>
<div class="g_id_signin"
    data-type="standard"
    data-size="large"
    data-theme="outline"
    data-text="sign_up_with" <!-- 指定按钮文本为注册类文案 -->
    data-shape="rectangular"
    data-logo_alignment="left"
    data-personalized="false"> <!-- 禁用个性化账号展示 -->
</div>

<script>
// 登录成功回调函数，处理凭证信息
function handleGoogleLogin(credentialResponse) {
    console.log('Google登录凭证:', credentialResponse.credential);
    // 这里可调用业务逻辑，比如你的changeGoogleEmail方法
    // changeGoogleEmail(credentialResponse);
}
</script>

关键配置说明 #

• data-personalized="false"：强制按钮显示固定文本，不会根据已登录账号替换内容
• data-text="sign_up_with"：指定按钮默认文本为“Sign up with Google”
• data-callback="handleGoogleLogin"：登录成功后触发自定义回调函数，接收包含凭证的响应参数

内容的提问来源于stack exchange，提问作者Jesse