如果一切都是客户端,如何通过OAuth安全地验证React客户端？

Question

我正在尝试将OAuth与React(前端)和Meteor(服务器)项目一起使用.我尝试OAuth的服务并不是广受欢迎的服务之一(即Google,Facebook),所以我一直在努力弄清楚如何解决这个问题.

Meteor支持安全的服务器端"settings.json"文件,该文件存储应用程序的api密钥和密钥,我可能会使用它来验证客户端.我只是不明白怎么做.

我发现这个包https://www.npmjs.com/package/react-oauth-flow,'send OAuth request'组件如下所示:

<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，有关如何实现这一点的文档位于此处。

如果您不使用 CRA，那么您可以从 package.json 或命令行将环境变量传递到 webpack 构建命令中。语法如下：

{ // the rest of your package.json scripts: { "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" } }

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

如果您已经有后端（您确实有），请考虑实现此流程以增强安全性。