如果你是一个前端开发者，同时也是一个 WordPress 用户，那么你可能遇到过需要在前端应用中使用 WordPress 登录验证的情况。在这种情况下，为了避免暴露你的 WordPress 登录凭据，你需要使用一个 OAuth2 代理来进行身份验证。这就是 npm 包 wordpress-oauth2-proxy 的作用。
什么是 wordpress-oauth2-proxy？
Wordpress-oauth2-proxy 是一个 Node.js 模块，可以用于在前端应用中与 WordPress 网站进行 OAuth2 认证交互，而无需在前端应用中存储 WordPress 凭据。与其他解决方案相比，wordpress-oauth2-proxy 具有如下优势：
- 不需要在前端应用中存储 WordPress 凭据。
- 支持多站点 WordPress。
- 可与 React, Vue, Angular 和纯 JavaScript 应用配合使用。
如何使用 wordpress-oauth2-proxy？
准备工作
在开始使用 wordpress-oauth2-proxy 之前，请先确保你已经完成了以下准备工作：
- 已经在 WordPress 后台设置了 OAuth2 应用程序（请参考 WordPress 官方文档）。
- 已经安装并配置了 wordpress-oauth2-proxy 的 Node.js 模块。
安装 wordpress-oauth2-proxy
你可以使用 npm 包管理器安装 wordpress-oauth2-proxy：
npm install --save wordpress-oauth2-proxy
配置 wordpress-oauth2-proxy
在使用 wordpress-oauth2-proxy 进行 OAuth2 认证之前，你需要在 Node.js 环境中配置一些参数，例如 WP_OAUTH_CLIENT_ID 和 WP_OAUTH_CLIENT_SECRET，这些参数可以在你的 WordPress 后台中找到。同时你还需要指定 WordPress 网站的基础 URL，以及 OAuth2 登录页面和回调 URL。
下面是一个简单的配置示例：
-- -------------------- ---- ------- ----- -------------------- - --------------------------------- ----- ----- - --- ---------------------- ---------- ----- ------ ---- -------------- ----- ------ -------- ------- ---------------------------- -------------- ---------------------- ----------------- ------------------------ --
在前端应用中使用 wordpress-oauth2-proxy
在前端应用中使用 wordpress-oauth2-proxy 是非常简单的，你只需要调用 proxy.getAuthorizationUrl() 方法，将用户重定向到 WordPress 登录页面，完成 OAuth2 认证流程。当用户授权完成后，WordPress 将会重定向回你指定的回调 URL，同时也会传递一个访问令牌（access token），你可以使用这个令牌进行后续的 API 调用。
下面是一个使用 React 和 react-router 的示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- ------------------
------ -------------------- ---- ------------------------
----- ----- ------- --------------- -
----------------- -- -
----- ----- - --- ----------------------
---------- ----- ------ ----
-------------- ----- ------ --------
------- ----------------------------
-------------- ----------------------
----------------- ------------------------
--
--------------- - ---------------------------
-
------ -- -
------ --------- ------ --
-
-
------ ------- -----在该示例中，当用户进入 /login 路由时，将会自动发起 OAuth2 认证请求，随后将会重定向到 WordPress 的登录界面。当用户完成认证后，他将会被重定向回你指定的回调 URL（即 /path/to/your/callback），同时 also 设置了 React 的 <Redirect> 组件，将他们重定向到主页。
总结
使用 wordpress-oauth2-proxy 可以帮助前端开发者在应用程序中安全地使用 WordPress 身份验证功能。当然，它也带有一定技术门槛，需要你对 OAuth2 认证流程和 JavaScript 开发有一定的了解。希望本篇文章对你在使用 wordpress-oauth2-proxy 时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671148dd3466f61ffe5a1