如果一切都是客户端，如何通过 OAuth 安全地验证 React 客户端? [英] How does one securely authenticate a React client via OAuth if everything is client-side?

问题描述

我正在尝试将 OAuth 与 React(前端)和 Meteor(服务器)项目一起使用.我尝试使用 OAuth 的服务不是广受欢迎的广泛支持的服务之一(即 Google、Facebook)，所以我在弄清楚如何解决这个问题时遇到了一些麻烦.

Meteor 支持安全的服务器端settings.json"文件，该文件存储您的应用程序的 api 密钥和机密，我大概会用它来验证客户端.我只是不明白如何.

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

<a href={url}>连接到 Dropbox</a>}/>

现在，我不明白 {process.env.CLIENT_ID} 如何能够安全地存储/获取，因为客户端可以使用整个应用程序?所以我不能使用 Meteor.settings.CLIENT_ID 之类的东西，因为反应应用程序无法使用该应用程序的客户端 ID.

OauthReceiver 组件也一样:

(<div>{处理&&<p>现在授权...</p>}{错误&&(<p className="error">发生错误:{error.message}</p>)}

)}/>

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

我觉得这是我的概念理解问题，如果有人能向我解释，我将不胜感激.

解决方案

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

如果您没有使用 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"}}

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

如果您已经有一个后端(您已经这样做了)，请考虑实施 此流程可增强安全性.

I'm trying to use OAuth with a React (frontend) and Meteor (server) project. The service that I'm trying to OAuth to is not one of the popular widely supported ones (i.e. Google, Facebook), so I've been having some trouble figuring out how to go about this.

Meteor has support for a secure server-sided 'settings.json' file that stores your app's api keys and secrets, which I would presumably use to authenticate the client. I just don't understand how.

I found this package https://www.npmjs.com/package/react-oauth-flow and the 'send OAuth request' component looks like this:

<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>}
 />

Now, I don't understand how {process.env.CLIENT_ID} would be able to be stored/fetched securely since the entire app is available to the client? So I couldn't use something like Meteor.settings.CLIENT_ID, because the app's client ID is not available to the react application.

The same for the OauthReceiver component:

<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>
   )}
 />

How is {process.env.CLIENT_SECRET} fetched? Again, cannot use Meteor.settings.CLIENT_SECRET, since it's only available to the server and the component is rendered client-side.

I feel this is a conceptual understanding issue on my part and if anyone could explain it to me, I would be very grateful.

解决方案

process.env.CLIENT_SECRET refers to an environment variable passed into your application from the command line at runtime. If you are using Create React App, the documentation on how to implement this is here.

If you are not using CRA, then you will pass the environment variables into your webpack build command, either from your package.json or from the command line. The syntax will look like this:

{ // 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" } }

Using this syntax, you can pass in your client secret/etc as environment variables to your React application. However, these will then be made available to the client and is not as secure as proper authentication code flow for OAuth2.0.

If you already have a back-end (which you do), look to implement this flow for enhanced security.

这篇关于如果一切都是客户端，如何通过 OAuth 安全地验证 React 客户端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！