配置Google登录

在新网站上线时,尤其是面向海外用户的网站,集成 Google 登录几乎是必不可少的,因为 Google 账户在国外的普及率极高。Google 登录的配置过程简单高效,我认为它在所有登录方式中的优先级甚至可以排在第一位。在网站上线初期,花三分钟快速配置 Google 登录并上线,无疑是性价比最高的选择。

尽管流程看似简单,但其中涉及的步骤并不少,且有一些关键细节会直接影响配置效率,进而影响网站的上线速度。因此,今天我借一个新站接入 Google 登录的机会,将全流程详细记录下来并分享给大家。只要按照步骤操作,即使是新手也能在三分钟内轻松完成配置!

第一步:创建 Google Cloud 项目

  1. 访问 Google Cloud Console https://console.cloud.google.com/apis/dashboard
  2. 点击右上角的"创建项目"按钮
  3. 输入你的项目名称(比如"我的网站")
  4. 点击"创建"完成项目创建
  5. 切换到新创建的项目
    20250127203415.png

第二步:配置 OAuth 权限请求页面

  1. 在左侧菜单中找到"API 和服务" → "OAuth 权限请求页面" https://console.cloud.google.com/apis/credentials/consent
  2. 用户类型(User Type)选择"外部"
  3. 填写应用名称、支持邮箱等基本信息 注意 ⚠️:这里不要上传应用徽标,否则会有一个验证的时间
  4. 添加你的应用域名,privacy policy 和 terms of service 的页面地址(需要提前在网站做好相关内容页)
  5. 已获授权的网域 - 网站域名(不用写 localhost)
  6. 选择需要的权限范围 - 一般是用户的基本信息,比如 userinfo.email, userinfo.profile,不知道选啥的话一般这俩就够了,按需自选
  7. 测试用户把自己添加上
  8. 测试完成后点击"发布应用",然后就可以让任意用户使用了,也就是正式上线
    20250127203843.png
    20250127204240.jpg

第三步:配置 OAuth 凭据

  1. 在左侧菜单中找到"API 和服务" → "凭据" https://console.cloud.google.com/apis/credentials

  2. 点击"创建凭据" → 选择"OAuth 客户端 ID"

  3. 选择应用类型(Web 应用)

  4. 设置应用名称

  5. 设置已获授权的 JavaScript 来源

    • 生产环境: (样例)https://你的域名/
      https://demo.idreamsoft.com
  6. 添加授权的重定向 URI:

    • 生产环境:
      https://demo.idreamsoft.com/user/login/google https://demo.idreamsoft.com/api.php/user/login/sign/google
  7. 点击"创建",你将获得:

    • 客户端 ID(Client ID)
    • 客户端密钥(Client Secret)

    20250127204402.jpg

第四步:配置 iCMS用户社交登陆

20250127204726.jpg