在 Web 开发中，OAuth 是常见的用户认证授权方式。但是，因为 OAuth 细节繁多，实现起来并不容易。于是就有了很多第三方库，比如 oauth-shim。本文将介绍如何使用 npm 包 oauth-shim，来进行 OAuth 认证授权。
前置知识
在阅读本文之前，您需要了解以下知识：
- Node.js 与 npm
- OAuth 认证授权的基本概念，包括 OAuth1 和 OAuth2 的不同
- 前端基本的网络请求方法，比如 fetch 或 XMLHttpRequest
安装
我们可以使用 npm 来安装 oauth-shim：
npm install oauth-shim
OAuth1 和 OAuth2
oauth-shim 支持 OAuth1 和 OAuth2。这两种协议的实现略有不同。
登录过程中，OAuth1 会让您跳转到一个第三方网站，然后要求您输入您的用户名和密码。完成认证后，您会得到一个 token。将这个 token 发送给我们的服务器，服务器就可以用它来访问第三方 API。
OAuth2 方式不需要您输入密码，因为它已经有了您的密码。您只需要使用您的账户信息来授权即可。然后您会得到一个 access_token，并用它来访问第三方 API。
在 oauth-shim 中，OAuth1 和 OAuth2 的配置基本一致，唯一的不同是认证的 URL 不一样。我们只需要根据需要来修改配置即可。
使用
接下来，我们将按照 OAuth2 的方式来讨论如何使用 oauth-shim。
请首先配置您的 app 和 OAuth 服务商。比如，如果您使用 GitHub，您需要在 GitHub 上创建一个 app。在 “Authorization callback URL” 里输入您的服务器地址，这将是我们在 oAuth 回调时所用的地址。
在 OAuth 服务商的后台中能够获取以下四个信息：
client_id：您的应用 ID。client_secret：您的应用密码。authorize：OAuth 认证 URL。access_token：OAuth access_token URL。
然后您需要启动 oauth-shim，将其绑定到您的本地服务器。具体方法就是使用以下命令：
oauth-shim --client-id=[client_id] --client-secret=[client_secret]
其中，[client_id] 和 [client_secret] 是您在 OAuth 服务商处申请的 ID 和密码。
接下来，我们假设在本地服务器上已经运行了 oauth-shim，并且 authorize 和 access_token 已经在 OAuth 服务商处配置好了。
我们现在需要编写一个前端代码，来与 oauth-shim 进行交互。以下代码假设您在 https://localhost 上运行了一个服务器，并在本地 8000 端口上开了一个静态文件服务，将以下代码保存为 sample.html：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
----- ----------------
--------
----- -------- - -------------------------------------
----- ------------ - ------------------------------------
----- -------- ----------- -
----- ------ - --- ----------------- ------------- ------------- ----------- ---------- ---
----- -------- - ----- -------------- - --- - ------- - ------- ------ ---
----- ---- - ----- ----------------
------------------
-
---------
-------
------
------- ----------------------------------------
-------
-------在这个 HTML 文件中，我们最先定义了我们需要用到的 oauth-shim 服务器地址和本地文件服务地址。接着，我们在其中写了一个 authorize 函数，其作用是发出一条请求，让用户进行认证。
此时，您还需要设置 callback URL。在 OAuth 服务商的控制面板中，您需要把重定向网址配置为 /oauth/callback，如下所示：
redirect URL: https://localhost:5000/oauth/callback
在这个过程中，您需要注意两件事情。第一，不要忘记把本地 8000 端口与服务器上运行的端口进行匹配。第二，您需要确保 callback URL 和 authorization server 都是 HTTPS。
在您使用 authorize 函数之前，您需要先开启本地的 HTTP 服务器：
python -m SimpleHTTPServer
随后访问 http://localhost:8000/sample.html，您将看到这样一款应用：
结果页面：
当您点击 “Authorize” 按钮时，authorize 函数便会被调用。该函数将会发送认证请求。您可以在调试工具中查看返回值，这通常包括 access_token 和 refresh_token。
现在您可以使用 access_token 来访问第三方 API 并收到返回值。但是，我们还需要找到一个地方存储 access_token 和其他相关信息。具体实现可能因应用而异，但通常情况下是将 access_token 保存在浏览器的本地存储（localStorage）中。当需要使用 access_token 时，我们可以从其中取出并使用。
window.localStorage.setItem('access_token', data.access_token);
总结
在本文中，我们介绍了如何使用 oauth-shim 这个 npm 包，来实现 OAuth 的认证和授权。我们首先简要地介绍了 OAuth1 和 OAuth2 的区别。接着，我们通过一个简单的示例，展示了如何通过 oauth-shim 进行 OAuth2 认证，以及如何将 access_token 存储在浏览器的本地存储中。
在您开发应用的过程中，如果您需要进行 OAuth 认证，oauth-shim 绝对是您的首选之一。它有丰富的配置选项，所以无论您要连接哪个提供商，都可以轻松实现访问其 API。
示例代码
您可以在以下 GitHub 仓库中找到本文中提到的示例代码：https://github.com/manoharbhattarai/oauth-shim-demo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/request-shim