CentOS LAMP环境下Google OAuth报错：域名不被客户端ID允许

问题概况 #

在CentOS LAMP开发环境中，通过Windows hosts文件映射自定义域名http://centos-myapp.com，配置Google OAuth时遇到以下问题：

• 前端能正常渲染"Sign in with Google"按钮，但点击后弹出窗口为空
• 控制台报错：m=credential_page_library:48 [GSI_LOGGER]: The given origin is not allowed for the given client ID.
• 此前WAMP的localhost环境可正常运行，切换到自定义域名后失效；改回http://localhost可恢复，但无法同时运行多域名项目

核心错误原因 #

1. Google OAuth的HTTPS强制要求：除localhost外，所有域名必须使用HTTPS协议，你的自定义域名使用HTTP，导致origin不被Google认可
2. 重定向URI配置错误：配置的http::/localhost/index.php格式错误（多了一个冒号），且与实际请求的origin不匹配
3. GSI脚本地址不完整：引入的脚本缺少https://前缀，可能引发混合内容问题

解决步骤 #

1. 为自定义域名配置自签名HTTPS证书 #

Google OAuth要求非localhost域名必须使用HTTPS，因此需要给centos-myapp.com配置HTTPS：

• 生成自签名证书（CentOS环境执行）：

# 生成私钥
openssl genrsa -out centos-myapp.com.key 2048
# 生成证书签名请求
openssl req -new -key centos-myapp.com.key -out centos-myapp.com.csr
# 生成有效期365天的自签名证书
openssl x509 -req -days 365 -in centos-myapp.com.csr -signkey centos-myapp.com.key -out centos-myapp.com.crt

• 配置Apache虚拟主机HTTPS（编辑/etc/httpd/conf.d/centos-myapp.conf）：

<VirtualHost *:443>
    ServerName centos-myapp.com
    DocumentRoot /var/www/html/your-project-directory

    SSLEngine on
    SSLCertificateFile /path/to/centos-myapp.com.crt
    SSLCertificateKeyFile /path/to/centos-myapp.com.key

    # 添加PHP支持等常规配置
    <Directory /var/www/html/your-project-directory>
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

• 重启Apache服务：

systemctl restart httpd

• Windows hosts文件保持centos-myapp.com指向CentOS服务器IP不变，访问https://centos-myapp.com时，选择信任浏览器的不安全证书提示（仅开发环境适用）

2. 修正Google OAuth客户端配置 #

登录Google云控制台的OAuth客户端页面，更新以下配置：

• 已授权的JavaScript来源：替换为https://centos-myapp.com
• 已授权的重定向URI：设置为实际回调地址，例如https://centos-myapp.com/index.php（确保格式正确，无多余符号）
• 保存配置后等待几分钟，让Google生效

3. 修正前端代码配置 #

• 调整g_id_onload的data-login_uri为HTTPS地址：

<div id='g_id_onload'
     data-client_id='$google_clientId'
     data-login_uri='https://centos-myapp.com'
     data-auto_prompt='false'>
</div>
<div class='g_id_signin'
     data-type='$googleLoginType'
     data-size='$googleLoginSize'
     data-theme='$googleLoginTheme'
     data-text='$googleLoginText'
     data-shape='$googleLoginShape'
     data-logo_alignment='$googleLoginType'>
</div>

• 补全GSI脚本的HTTPS前缀：

<script src='https://accounts.google.com/gsi/client' async defer></script>

4. 验证修复效果 #

清除浏览器缓存，访问https://centos-myapp.com，点击登录按钮，即可正常触发Google OAuth流程。

补充说明 #

Google OAuth对localhost做了特例处理，允许使用HTTP协议，但自定义域名不属于这个范围，必须使用HTTPS。通过自签名证书配置HTTPS后，即可在开发环境使用自定义域名，同时满足多项目不同域名的需求。

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