使用 Google 谷歌 OAuth 2.0 服务登录第三方网站，图文教程

要使用 Google 谷歌 OAuth 2.0 服务登录第三方网站，你一般需要进行以下 4 步的操作配置（注意需科学上网，不然会连接超时）：

第 1 步：在谷歌开发者后台配置客户端 ID 和重定向地址（回调地址）。
第 2 步：在谷歌开发者后台创建一个应用，配置 OAuth 权限请求页面。
第 3 步：根据客户端 ID 和回调地址构造登录页面，让用户授权，以获取访问令牌。
第 4 步：有了访问令牌 Token 就能够访问谷歌的开放资源。

在开始之前，我们先来了解一下什么是 OAuth 2.0?

什么是 OAuth 2.0?

OAuth 2.0 是一种开放标准的授权协议，用于授权第三方应用程序访问受保护的资源，而无需提供用户的用户名和密码。它允许用户在不直接向第三方应用程序披露其凭据的情况下，授权其访问受保护资源，OAuth 2.0 被广泛用于 Web 和移动应用程序中，以提供安全的授权机制。

OAuth 2.0 协议涉及以下角色：

资源所有者（Resource Owner）：通常是用户，拥有受保护的资源，例如图片、个人资料等。
客户端（Client）：第三方应用程序，想要访问资源所有者的受保护资源。
授权服务器（Authorization Server）：负责认证资源所有者并授权客户端访问资源的服务器。
资源服务器（Resource Server）：存储受保护资源的服务器，提供访问受保护资源的 API。

OAuth 2.0 协议通过授权流程（Authorization Flow）来实现授权。其中，常见的授权流程包括：

授权码授权流程（Authorization Code Grant）：客户端重定向用户到授权服务器，用户登录并授权后，授权服务器返回授权码给客户端，客户端使用授权码与客户端凭证交换访问令牌。
密码授权流程（Resource Owner Password Credentials Grant）：资源所有者直接将用户名和密码提供给客户端，客户端使用这些凭据向授权服务器请求访问令牌。
客户端凭证授权流程（Client Credentials Grant）：客户端使用自己的凭据直接向授权服务器请求访问令牌，适用于客户端自身需要访问资源的情况。
隐式授权流程（Implicit Grant）：用于在浏览器中直接从客户端获得访问令牌，通常用于 Web 前端应用。

谷歌在 Web 中使用的 OAuth 2.0 授权流程就是隐式授权流程（Implicit Grant），下面就来介绍一下怎么实现，并讲述如何在 Apifox 中调试。

步骤 1：配置客户端 ID 和重定向 URL

我们首先需要访问 Google API Console 获取 OAuth 2.0 凭据。点击左侧边栏的“Credentials”选项，然后创建一个客户端 ID（OAuth client ID）。

然后选择你的应用类型，可以选择 Web 站点、Android、或者 IOS 应用等，这取决于你的业务。接着在 “Authorized JavaScript origins” 这一栏目，填写你的网站域名即可，如果是本地调试的话，通常设置为http://localhost，如果有端口，加一个端口名，如 http://localhost:8000，这里的目的是让谷歌知道你网站托管的 HTTP 来源。然后在“Authorized redirect URIs”这一栏目，填写你的重定向地址，一般是你的登录路径，也可以是其它任一域名，只要能访问就行。

上文相关的选项都配置好以后，就可以点击“CREATE”按钮来保存了，此时会生成客户端 ID（Client ID）和客户端密钥（Client secret），这两个东西是我们等会儿要用到的。

步骤 2：配置 OAuth 权限请求页面

在页面上点击左侧列表的“OAuth consent srceen” 选项，在这里创建一个应用。

在页面中，填写应用的基本信息，比如名字、邮箱、域名等。这个页面的信息，会显示在弹出的确认授权登录框中，可帮助最终用户了解你是谁并与你联系。

Scopes 配置

上一步配置好以后，来到下一步，这里需要配置可访问的权限，将权限勾选后保存即可。

添加测试账户

你可以添加一个测试账户，也就是在未正式上线之前，可以进行 OAuth 2.0 登录的邮箱账户，这里允许的用户数上限为 100。

以上信息配置完成之后保存即可，然后我们正式进入 OAuth 2.0 授权的主流程。

步骤 3：获取访问令牌 Token

当上文的第一步和第二步都准备好以后，我们就可以去申请访问令牌 Token，获取访问令牌这一步，我们通过 Apifox 来演示，Apifox 是一款非常优秀的接口调试、管理工具，你可以在 Apifox 中直接获取到 Token 访问令牌。如果你还没有安装 Apifox，现在就去下载一个吧！

立即体验 Apifox

在 Apifox 中新建一个 HTTP 项目后打开，然后在项目里新建一个请求，选择【修改文档 -> Auth -> OAuth 2.0】选项。

选择授权模式为“隐式模式”

Apifox 中 OAuth 2.0 默认选择的授权模式为 Authorization Code（授权码模式），因为谷歌“客户端 Web 应用的 OAuth 2.0”用的是隐式模式（Implicit），所以你需要在“授权模式”这里做相应的切换。

填写客户端 ID 和重定向地址

接着在页面下方找到 Client ID 和 Callback URL，将从谷歌 OAuth 2.0 服务中获取到的应用 ID 和配置的重定向地址填进去即可，具体参数就是上文在第一步中的配置。

获取访问令牌 Token

根据谷歌官方文档的描述，要申请到访问令牌，需要请求的 URL 为：

 https://accounts.google.com/o/oauth2/v2/auth

将这个地址填写到 Auth URL 输入项内即可。

谷歌官方文档还要求在路径后面携带其它参数，如：

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

注：实际应用中不需要换行

但是在 Apifox 中一般不需要，因为必要的参数已经在其它选项单独配置了，如果你要配置，可以点击 Auth URL 后面的图标来配置，或者点击“更多”来展开其它配置项，比如这里要在 Scope 中加一个openid值，这里的 Scope 就是上文“第二步”勾上的权限。

上文的配置项都设置好以后，就可以点击“获取 Token”按钮来获取 Token 了。点击后，如果是初次登录，会弹出一个窗口让你授权，填写即可。

填写完用户名密码后，可能会发短信验证码来验证你的账号，或者直接就可以关联账号，获取访问令牌。

授权完成后，就会自动获取到访问令牌，并显示在页面上，同时，会将谷歌返回的其它信息也一并解析出来。

注意，如果你开了代理，你需要到“设置”里把代理打开，不然有可能会连接失败（注意需科学上网，不然会连接超时）。遇到其它错误，你可以检查一下是不是某些第三方平台需要的必填项没有填写，修改错误后，点击“清除 Cookie”并重新获取 Token 即可。

步骤 4：根据 Token 访问开放资源

有了访问令牌 Token 之后，你就可以拿这个访问令牌调取谷歌的开放资源了，具体有什么样的开放资源，可以在 OAuth 2.0 Playground 中试用所有 Google API 并查看其权限范围。发送请求时 Apifox 会自动将 Token 附加到请求头的Authorization 中，添加至Bearer 后发送出去。如果你要将 Token 携带在 URL 上，你也可以在页面的配置项中修改 Token 的“添加位置”，将其选择为“Query Params”即可。

总结

Google OAuth 2.0 登录的实现步骤分为四个主要步骤。首先，在步骤一中，需要配置客户端 ID 和重定向 URL，以获取 OAuth 2.0 凭据。然后，在步骤二中，确定访问权限范围，并创建应用，配置相关信息，包括可访问的权限和测试账户。接着，在步骤三中，通过请求访问令牌 Token 来获取权限，可以使用工具如 Apifox 辅助。最后，在步骤四中，利用获取到的访问令牌 Token，可以访问谷歌的开放资源。总体而言，通过以上步骤，实现了用户通过 Google OAuth 2.0 登录并获取相关权限的流程。

免费使用 Apifox

使用 Google 谷歌 OAuth 2.0 服务登录第三方网站，图文教程