小编max*_*dev的帖子

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

我正在尝试将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>}
 />
Run Code Online (Sandbox Code Playgroud)

现在,我不明白如何{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>
   )}
 />
Run Code Online (Sandbox Code Playgroud)

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

我觉得这是我的概念性理解问题,如果有人能向我解释,我将非常感激.

oauth node.js oauth-2.0 meteor reactjs

6
推荐指数
1
解决办法
655
查看次数

标签 统计

meteor ×1

node.js ×1

oauth ×1

oauth-2.0 ×1

reactjs ×1