因海外业务拓展，项目需要支持 Google、Facebook、Twitter、Line、Apple 这些第三方授权登录。目前第三方的授权登录有很多方案，且都有官方提供 SDK 方便接入。但由于我这个项目需要同时支持H5、iOS、Android，所以选择**在不接入官方提供的 SDK 的情况下，配合后端为 Web 网页实施基于浏览器的授权登录**。本文围绕 Google OAuth 2.0 展开。当然，不同厂商的流程有些许区别，文章也会有所提及。 ![Snipaste_2023-08-04_16-22-50.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f5ed613683c418babae9223faac5ad3~tplv-k3u1fbpfcp-watermark.image?) ## OAuth 2.0 简介 OAuth 即 Open Authorization，是“开放授权”的简写，它是一个关于授权（authorization）的开放网络标准。一句话，OAuth2.0 是一种授权协议。无论使用哪种三方平台，最重要的一步就是获取三方授权的 `token`，当然不同的厂商叫法不一样，有的叫 `access_token`，有的叫 `oauth_token`，还有的叫 `code`，无所吊谓。关键是拿到这个凭证后，你就有权限继续去三方获取用户的昵称、头像、动态、好友列表之类的信息。当然，权限也是有范围和有效期的。对 OAuth 2.0 感兴趣的，可以看一些社区相关文章： - [OAuth2.0原理浅析](https://juejin.cn/post/7010636081305485319?searchId=2023080410101136ED238783DB7D662756#heading-18) - [一文带你搞懂OAuth2.0](https://juejin.cn/post/7175385017479069754?searchId=2023080410101136ED238783DB7D662756) ## 前端接入 Google 首先，我们要去[谷歌开发者](https://console.cloud.google.com/getting-started?pli=1)备案，创建项目并按提示填写信息。其中有两步是开发过程中会用到的，一个是 `创建 OAuth 客户端 ID`，该步骤会生成 `client_id`。还有一个是 `已获授权的重定向 URI`，该步骤能在授权成功后，携带 `token` 重定向你设置的 URI 上。具体后台配置推荐直接看这篇文章 👉 [谷歌OAuth2.0开发的正确配置步骤](https://juejin.cn/post/7247044423023689788) ### Google Web 端应用流程整个 OAuth 的授权登录流程如下： ![Google OAuth流程图.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91d0be2ebf10442391d8329c7b209fa1~tplv-k3u1fbpfcp-watermark.image?) 我们着重看下和 OAuth 相关的第二、三两步（其他几步都是后端给出 api 接口，前端调用即可）。 ### Google OAuth 2.0 参数在访问 Google 授权登录页之前，需要准备以下必传网址参数。 | 参数 | 是否必传 | 说明 | | --------- | -------- | ---- | | client_id | Y | 客户端 ID | | redirect_uri | Y | 完成授权后，API 服务器会将用户重定向到该地址 | | response_type | Y | JS 设为 'token' | | scope | Y | 授权范围 | | state | N（推荐）| 维护授权请求和授权服务器状态的任何字符串值，防止 CSRF 攻击 | `response_type`：设为 'token' 的意思是，授权后的 token 令牌将以 `access_token=abcxxx` 键值对的格式返回，并且会以 fragments 网址片段（即 location.hash，不是 location.search）的形式拼接到重定向的 URI 后面。 `scope`：这个授权范围比较重要，令人吐槽的是官方文档说了一大堆，示例里还写错了（不管用），我们这里应该填写 `https://www.googleapis.com/auth/userinfo.profile`。至于我是怎么找到的，可以看下面[OAuth 2.0 Playground](#OAuth-2.0-Playground)的演示。 `state`：防止 `redirect_uri` 被别人猜到，确保请求和响应源自同一浏览器，从而防范 CSRF 跨站请求伪造等攻击。前端可以使用 [uuid](https://www.npmjs.com/package/uuid)（[通用唯一识别码](https://zh.wikipedia.org/zh-hans/%E9%80%9A%E7%94%A8%E5%94%AF%E4%B8%80%E8%AF%86%E5%88%AB%E7%A0%81)）来生成 state。其他可选参数，详见 👉 [获取 OAuth 2.0 访问令牌](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn#redirecting) ### OAuth 2.0 Playground >如需查看关于将 OAuth 2.0 与 Google 搭配使用（包括使用您自己的客户端凭据的选项）的交互式演示，请试用 OAuth 2.0 Playground。官网给了个 Playground 演练场，我们可以在里面找到对应的授权服务，模拟授权登录场景，Google 会显示出对应的响应信息，方便我们进行调试，这一点开始很贴心的。 #### step 1 选择授权 API 选择 Google OAuth 2 API V2，并按需要勾选授权范围，我们这里全部勾选，并点击 `Authorize APIs` 看看会发生什么。 ![Snipaste_2023-08-06_21-30-15.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/170ed4082d8947f0b916e5868b1d6add~tplv-k3u1fbpfcp-watermark.image?) 随后，会拉起 Google 登录页面，我们登录即可。 ![Snipaste_2023-08-04_10-59-06.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4036bf0446e46e7bd12372cfad53d89~tplv-k3u1fbpfcp-watermark.image?) #### step 2 生成 access_token 调用 API 后，会来到第二步，右边会显示刚刚的请求响应信息。主要看下 `Request`，会发现其中的 `scope`，我们解析出来看看是什么： ```js decodeURIComponent('scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid') // outout: 'scope=https://www.googleapis.com/auth/userinfo.email+https://www.googleapis.com/auth/userinfo.profile+openid' ``` 可以看到是由三部分拼接而成，对应我们第一步中选中的 `email`、`profile` 和 `openid`。 ![Snipaste_2023-08-06_21-39-42.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae50606fc46e48fcaf73d1f4ad10ccf5~tplv-k3u1fbpfcp-watermark.image?) 所以，这就是我为什么说文档里写的示例不管用的原因了，文档示例如下： ```js 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 ``` 它给的是 `https://www.googleapis.com/auth/drive.metadata.readonly`，但其实也不能说它错，只能说它没有生效，因为这里面有一个[增量授权](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn#incrementalAuth)的问题： > 在登录时，应用可能会请求 `openid` 和 `profile` 范围来执行基本登录，然后在第一次请求保存时混合请求 `https://www.googleapis.com/auth/drive.file` 范围。所以，在我理解授权登录还需要额外指定 `userinfo.profile` 和 `openid`，所以不能只填写文档示例中的链接，而应该填写 Playground 中给出的链接。但是 `userinfo.profile` 和 `openid` 额外的授权范围会最终追加到 `auth/drive.file` 中。最后，我们点击 `exchange authorization code for tokens`，Playground 就会给我们生成 `access_token` 以及其他信息。 ![Snipaste_2023-08-06_22-02-46.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f18c6305907647788148faefdfff8e6b~tplv-k3u1fbpfcp-watermark.image?) 模拟结束，其实到这里就已经成功了。 ### 哈希片段获取access_token 从 Google 那边授权成功后，会返回到前端指定的 `redirect_uri` 页面中，我们可以从 URL 地址的哈希片段（注意是 `hash`，不是 `search`）中拿到 `access_token`，并传给后端。 ```js // utils：获取 location.search/hash 中的值 const searchParams = (search, ...keys) => { search = search.replace(/#|\?/, ''); const params = new URLSearchParams(search); return flatMap(keys).reduce((prev, key) => { prev[key] = params.get(key) || undefined; return prev; }, {}); }; // redirect_uri 页面 export default { created() { // 成功 if (/code|token/.test(this.$route.fullPath)) { const tokenInfo = this.getAccessToken(); // 拿着 tokenInfo 请求后端接口······ } }, methods: { // 获取 access_token getAccessToken() { const { access_token: googleToken } = searchParams( this.$route.hash, 'access_token' ); return { googleToken }; } } } ``` ### 错误处理如果 Google 授权失败，那么根据文档说明，会携带 `error` 字段： ```js https://oauth2.example.com/callback#error=access_denied ``` ```js // redirect_uri 页面 export default { created() { // 成功···见上 // 失败： const { error } = searchParams(this.$route.hash, 'error'); if (error) { // 处理失败······ } } } ``` ## Facebook、Line、Apple 配置大全最后，我们来看看其他几个三方都需要哪些参数，主要区别在于参数名称、返回方式（hash 还是 search）、返回字段名称等，仅供参考。 |三方|授权请求地址|请求参数|响应类型|成功响应|失败响应| |--|--|--|--|--|--| | Google | https://accounts.google.com/o/oauth2/v2/auth | `client_id`
`redirect_uri`
`response_type`: 'token'
`scope`: 'https://www.googleapis.com/auth/userinfo.profile' |hash 片段|access_token|error| | Facebook | https://www.facebook.com/v17.0/dialog/oauth | `client_id`
`redirect_uri`
`response_type`: 'token' |hash 片段| access_token | error_description | | Apple | https://appleid.apple.com/auth/authorize | `client_id`
`redirect_uri`
`response_type`: 'code id_token'
`response_mode`: 'fragment'| hash 片段 | code
id_token | error | | Line | https://access.line.me/dialog/oauth/weblogin | `client_id`
`redirect_uri`
`response_type`: 'code' | search 片段 | code | error_description
errorMessage 等 | 其中，Line 有点特别。在获取到 `code` 后，还需要拿着 `code` 调用接口换取 `access_token`： ```bash curl -v -X POST https://api.line.me/v2/oauth/accessToken \ -H 'Content-Type: application/x-www-form-urlencoded' \ -d 'grant_type=authorization_code' \ -d 'code=b5fd32eacc791df' \ -d 'redirect_uri=https%3A%2F%2Fexample.com%2Fauth' \ -d 'client_id=12345' \ -d 'client_secret=d6524edacc8742aeedf98f' ``` ```json { "access_token": "bNl4YEFPI/hjFWhTqexp4MuEw5YPs7qhr6dJDXKwNPuLka...", "expires_in": 2591977, "refresh_token": "8iFFRdyxNVNLWYeteMMJ", "scope": "P", "token_type": "Bearer" } ``` 这一步，只能交给后端来处理，前端会有跨域问题。此外，针对表格还有几点需要说明： 1. 这里仅罗列必传参数，完整参数还请查阅参考链接中的官方文档； 2. 有些三方返回方式是由参数 `response_type` 决定而非是固定的。比如 Facebook，如果 response_type=code，那么所包含的响应数据为网址参数形式（search），而不会是网址片段形式(hash)； 3. Twitter 我的项目中用的是 1.0，所以就不写入其中了，不过 2.0 的文档也给在了下面。 ## 总结本文以 Google OAuth 2.0 为例，给大家分享了前端不使用 SDK 时，接入三方授权的流程与步骤。其实步骤并不是很繁琐，善于查阅文档并通晓其使用流程就能正确接入三方服务了。 ## 参考资料 - [Google Cloud](https://console.cloud.google.com/getting-started?pli=1) - [Google | 适用于客户端 Web 应用的 OAuth 2.0](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn) - [OAuth 2.0 Playground](https://developers.google.com/oauthplayground/?hl=zh-cn) - [Facebook | 手动构建登录流程](https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow) - [Apple | Incorporating Sign in with Apple into other platforms](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/incorporating_sign_in_with_apple_into_other_platforms) - [Line | Authenticating users and making authorization requests](https://developers.line.biz/en/docs/line-login/integrate-line-login-v2/#making-an-authorization-request) - [Twitter | OAuth 2.0](https://developer.twitter.com/en/docs/authentication/oauth-2-0/authorization-code) - [谷歌OAuth2.0开发的正确配置步骤](https://juejin.cn/post/7247044423023689788) - [接入谷歌OAuth2.0登录的分析和代码实践](https://juejin.cn/post/7252584767593627707) - [实现 Google 第三方授权登录](https://www.idzd.top/archives/2754) - [实现 Facebook 第三方授权登录](https://www.idzd.top/archives/2754)