为何Safari与Chrome中Sign In with Google按钮显示有差异？

我在测试Web应用中使用Google Identity的Sign In With Google for Web功能，已经按照《Display the Sign In With Google button》文档完成实现。按钮（含One Tap功能）在Google Chrome中显示正常，能展示我的姓名和邮箱地址；但在Safari里仅显示通用按钮。我已能通过Safari和Chrome正常登录测试应用，因此排除首次登录导致的通用按钮问题。我了解两款浏览器的按钮体验应一致，因为文档概述页面的Sign In with Google按钮在Safari和Chrome中均能正常显示。请问是什么原因导致Safari无法在按钮中显示我的姓名和邮箱？

按钮代码如下：

<div id="g_id_onload"
     data-client_id="<%=google_client_id%>"
     data-context="signin"
     data-ux_mode="redirect"
     data-login_uri="<%=login_uri%>"
     data-nonce=""
     data-itp_support="true">
</div>

<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

可能原因及解决方法 #

核心原因：Safari的ITP（智能跟踪预防）机制限制 #

Safari的隐私保护规则远严于Chrome，即便你配置了data-itp_support="true"，仍可能存在以下限制：

• 第三方Cookie存储限制：Google身份服务依赖第三方Cookie识别已登录用户，但Safari默认会限制或拦截这类Cookie，导致服务无法读取你的身份信息，只能显示通用按钮。
• 跨域资源访问限制：若你的测试域名与Google身份服务域名的跨域配置存在问题，Safari会直接拦截身份信息的读取请求。
• 缓存残留干扰：Safari可能缓存了旧的未登录状态数据，即便你已完成登录，也无法正确加载个人化信息。

针对性解决建议 #

1. 清除Safari隐私数据：
   清空Safari的缓存、Cookie及网站数据，重新登录测试应用后查看按钮状态。
2. 确认HTTPS配置：
   确保测试站点使用HTTPS协议，Safari对非HTTPS站点的Cookie和跨域请求限制更严格，会直接影响Google身份服务的正常工作。
3. 调整data-ux_mode参数：
   尝试将data-ux_mode="redirect"改为data-ux_mode="popup"，弹窗模式可能绕过Safari的部分跟踪限制，让身份服务正确读取用户信息。
4. 验证data-itp_support配置：
   确认data-itp_support="true"配置无误，该参数是Google专为适配Safari ITP设计的，同时要保证客户端ID和登录回调URI与Google控制台配置完全匹配。

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