How does one securely authenticate a React client via OAuth if everything is client-side?

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/49047059/how-does-one-securely-authenticate-a-react-client-via-oauth-if-everything-is-cli