AWS Cloud9环境下使用angular5-social-login登录Google遇idpiframe_initialization_failed错误

我碰到过不少开发者遇到和你一样的问题——明明已经把URI加到白名单，却还是弹出idpiframe_initialization_failed的错误。结合你的AWS Cloud9场景，咱们可以从这几个方向逐一排查：

1. 核对Google Cloud Console的白名单配置细节 #

这是最容易踩坑的地方：

• 确认你是在OAuth 2.0 客户端ID的「已授权的 JavaScript 来源」中添加的URI，而不是「已授权的重定向URI」。前端Google登录初始化时，校验的是JS来源，不是重定向地址。
• 精确匹配URI：必须完全一致，包括协议（http://）、IP、端口（:8080），不能有多余的空格、斜杠。比如你要加的就是http://18.219.144.71:8080，不能少任何部分。
• 确认客户端ID：报错里的my_client_id.apps.googleusercontent.com要和Cloud Console里生成的客户端ID完全一致，别选错了项目或者客户端类型（比如选成了Web应用以外的类型）。

2. 清除浏览器缓存/用无痕模式测试 #

浏览器经常会缓存旧的OAuth配置信息，尤其是你之前用其他域名测试过的话。试试打开无痕窗口重新访问你的应用，或者手动清除Google相关的Cookie，再尝试登录。

3. 检查angular5-social-login的代码配置 #

确保代码里传入的客户端ID没有拼写错误：

import { AuthServiceConfig, GoogleLoginProvider } from 'angular5-social-login';

export function getAuthServiceConfigs() {
  const config = new AuthServiceConfig(
    [
      {
        id: GoogleLoginProvider.PROVIDER_ID,
        // 这里要替换成你正确的客户端ID
        provider: new GoogleLoginProvider('your-real-client-id.apps.googleusercontent.com')
      }
    ]
  );
  return config;
}

另外，别不小心混用了不同环境的客户端ID（比如把测试环境的ID用到生产环境）。

4. 确认AWS Cloud9实例的公网IP #

Cloud9实例重启后，公网IP可能会变化！你可以在Cloud9终端里运行：

curl ifconfig.me

看看返回的IP是不是18.219.144.71，如果不是，就得把新的IP加到白名单里，删掉旧的无效IP。

5. 等待Google配置生效 #

Google Cloud Console的OAuth配置有时候不会立即生效，可能需要等待5-10分钟（甚至更久一点）。别刚修改完就马上测试，等一会儿再试试。

6. 检查是否开启了必要的API（针对旧库） #

angular5-social-login属于比较老的库，有些版本可能依赖Google+ API（虽然Google+已经停用，但部分旧库逻辑还没更新）。你可以去Google Cloud Console的API库搜索「Google+ API」，如果没开启就开启试试，说不定能解决问题。

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