【问题标题】：How do you use an Oauth callback between React and Express?你如何在 React 和 Express 之间使用 Oauth 回调？
【发布时间】：2020-03-13 15:06:12
【问题描述】：

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

我已经通过 Mailchimp 设置了我的应用程序/我的客户端密码/客户端 ID 等：

重定向 URI

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

我保留了与教程相同的快速代码，除了我将我的客户端密码放在 .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 中的该链接后，我会被发送到 mailchimp，在那里我成功地使用我的帐户（不是请求权限的帐户）登录，然后我返回到 react 应用程序。

但是，我收到以下错误：

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 中处理此请求是否有更好的建议？

【问题讨论】：

使用localhost 代替127.0.0.1 有什么不同吗？
@GBWDev 是的，文档要求您使用 127.0.0.1 而不是 localhost。
我可以看看你的回购吗？我需要实现相同的，谢谢
@KaleemElahi 我这里有一个使用 GITHUB 进行 OAuth 访问的示例：github.com/seanbfield/pern

标签： node.js reactjs mailchimp mailchimp-api-v3.0

【解决方案1】：

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

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

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

【讨论】：

谢谢你指出这一点，我眼睛一亮，以为和mailchimp/auth/authorize一样。我能够登录和回调代码。