node.js - 如果一切都是客户端，如何通过 OAuth 安全地验证 React 客户端？

Question

我正在尝试将 OAuth 与 React(前端)和 Meteor(服务器)项目一起使用。我尝试进行 OAuth 的服务不是流行且广泛支持的服务之一(即 Google、Facebook)，因此我在弄清楚如何解决此问题时遇到了一些麻烦。

Meteor 支持安全的服务器端“settings.json”文件，该文件存储应用程序的 api key 和 secret ，我可能会用它来验证客户端。我只是不明白怎么办。

我找到了这个包https://www.npmjs.com/package/react-oauth-flow “发送 OAuth 请求”组件如下所示:

<OauthSender
   authorizeUrl="https://www.dropbox.com/oauth2/authorize"
   clientId={process.env.CLIENT_ID}
   redirectUri="https://www.yourapp.com/auth/dropbox"
   state={{ from: '/settings' }}
   render={({ url }) => <a href={url}>Connect to Dropbox</a>}
 />

现在，我不明白如何安全地存储/提取 {process.env.CLIENT_ID} ，因为整个应用程序可供客户端使用？所以我无法使用像 Meteor.settings.CLIENT_ID 这样的东西，因为应用程序的客户端 ID 不可用于 react 应用程序。

OauthReceiver 组件也是如此:

<OauthReceiver
   tokenUrl="https://api.dropbox.com/oauth2/token"
   clientId={process.env.CLIENT_ID}
   clientSecret={process.env.CLIENT_SECRET}
   redirectUri="https://www.yourapp.com/auth/dropbox"
   onAuthSuccess={this.handleSuccess}
   onAuthError={this.handleError}
   render={({ processing, state, error }) => (
     <div>
       {processing && <p>Authorizing now...</p>}
       {error && (
         <p className="error">An error occured: {error.message}</p>
       )}
    </div>
   )}
 />

如何获取{process.env.CLIENT_SECRET}？同样，不能使用 Meteor.settings.CLIENT_SECRET，因为它仅适用于服务器，并且该组件在客户端呈现。

我觉得这是我的概念理解问题，如果有人能给我解释一下，我将非常感激。

Answer 1

process.env.CLIENT_SECRET 指的是运行时从命令行传递到应用程序的环境变量。如果您使用的是 Create React App，有关如何实现这一点的文档是 here .

如果您不使用 CRA，那么您将通过 package.json 或命令行将环境变量传递到 webpack 构建命令中。语法如下所示:

{//package.json 脚本的其余部分: { "dev": "webpack --env.API_URL=http://localhost:8000 --config webpack.config.dev.js", "build": "webpack --env.API_URL=https://www.myapi.com --config webpack.config.build.js"} }

使用此语法，您可以将客户端 key /等作为环境变量传递给您的 React 应用程序。但是，这些将可供客户端使用，并且不如 OAuth2.0 的正确身份验证代码流那么安全。

如果您已经有后端(您确实有)，请考虑实现 this流以增强安全性。