你如何在 React 和 Express 之间使用 Oauth 回调？

Question

我正在尝试将 MailChimp 的 API 集成到我的 React 应用程序中，这将允许用户授权他们的 MailChimp 帐户在我的应用程序中使用。我还没有找到关于它的教程，所以我正在关注这个只使用 express 的教程：https://www.codementor.io/mattgoldspink/integrate-mailchimp-with-nodejs-app-du10854xp

我已经通过 Mailchimp 设置了我的 app/my 客户端 secret/client id 等：

重定向 URI

```http://127.0.0.1:3001/mailchimp/auth/callback````

我保留了与教程相同的 express 代码，除了我将客户端密码放在 .env 文件中：

server.js

const querystring = require('querystring');
const mailchimpClientId = `${process.env.MC_CLIENT}`

app.get('/mailchimp/auth/authorize', function (req, res) {
  res.redirect('https://login.mailchimp.com/oauth2/authorize?' +
    querystring.stringify({
      'response_type': 'code',
      'client_id': mailchimpClientId,
      'redirect_uri': 'http://127.0.0.1:3000/mailchimp/auth/callback'
    }));
});

然而，在教程中，回调函数在一个 HTML 文件中，这样写：

<!doctype html>
<html>
    <head>
        <title>Integrate MailChimp</title>
    </head>
    <body>
        <a class="btn btn-primary" href="/mailchimp/auth/authorize">Connect with MailChimp</a>
    </body>
</html>

我添加了这个（使用 JSX 语法）：

MailChimp.jsx

class MailChimp extends Component {

  render() {
    return (
      <div>
        <h1>MailChimp Auth</h1>
        <a href={'http://127.0.0.1:3000/mailchimp/auth/authorize'}>Mailchimp</a>
      </div >
    )
  }
}

export default withRouter(MailChimp);

在我的 React 应用程序的路由 localhost:3001/mailchimp 中单击 link 后，我被发送到 mailchimp，在那里我使用我的帐户（不是请求权限的帐户）成功登录，然后我返回到反应应用

但是，我收到以下错误：

GET /mailchimp/auth/callback 404 2.818 ms - 162
Failed to load resource: the server responded with a status of 404 (Not Found)

我在网上搜索过，试图找到一个使用 React & Express for MailChimp Oauth 进行应用程序授权的工作示例，但我还没有找到。我的问题是，我是否在重定向中设置了错误，或者是否有更好的建议在 React 中处理此请求？

Answer 1

404 错误表示您没有映射到 /mailchimp/auth/callback 的路线。从你的代码看来你没有写那个。

除非您没有提供代码，否则您需要教程中代码中提到的路由处理程序：

app.get('/mailchimp/auth/callback', function(req, res) {
  request.post('https://login.mailchimp.com/oauth2/token')
         .send(querystring.stringify({
   ...
}

你如何在 React 和 Express 之间使用 Oauth 回调？

How do you use an Oauth callback between React and Express?

node.js

reactjs

mailchimp

mailchimp-api-v3.0

重定向 URI

server.js

MailChimp.jsx