如何在React中限制Google登录弹窗仅允许特定邮箱域名登录

问题根源 #

你设置hd参数时多写了@符号，Google的hd自定义参数只需要填域名部分，不需要带@。

修正代码 #

把provider.setCustomParameters({'hd': '@ac.sce.ac.il'});改成下面这行：

provider.setCustomParameters({'hd': 'ac.sce.ac.il'});

关键补充：强制验证邮箱域名 #

注意：hd参数只是引导用户优先使用指定域名的账号登录，无法完全阻止其他域名的账号通过弹窗登录。要实现严格的域名限制，必须在登录成功后手动验证用户邮箱的后缀：

const googleSignIn = () => {
    const provider = new GoogleAuthProvider();
    // 修正hd参数，去掉@
    provider.setCustomParameters({'hd': 'ac.sce.ac.il'});

    signInWithPopup(auth, provider)
        .then(function (result) {
            const user = result.user;
            const userEmail = user.email;
            // 验证邮箱后缀是否符合要求
            if (userEmail.endsWith('@ac.sce.ac.il')) {
                // 验证通过，执行后续逻辑
                console.log('登录成功', user);
            } else {
                // 验证不通过，登出并提示错误
                signOut(auth).then(() => {
                    alert('仅允许使用@ac.sce.ac.il域名的邮箱登录');
                });
            }
        })
        .catch(function (error) {
            console.error('登录失败', error);
        });
};

额外说明 #

如果需要更严格的限制（比如完全不让其他域名账号出现在登录选项中），你需要在Google Cloud控制台的OAuth 2.0客户端设置里，配置组织限制，指定允许登录的域名。但这需要你拥有该域名的Google Workspace管理权限。

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