node.js - Node-Oauth 认证问题；访问令牌可能不会通过重定向传递？

Question

我正在构建一个 React-Node 应用程序以使用 OAuth 2 身份验证来使用 QuickBooks API。该应用程序的结构使得 React 应用程序在 localhost:3000 的开发服务器上运行，并将 http 请求代理到 localhost:3001 的 express 服务器。

所以，我在进行 API 调用时遇到了一些麻烦：负责渲染 API 数据的反应组件崩溃了，我收到以下错误

“缺少必需参数：access_token”

我的快速服务器中有以下代码，它将授权代码转换为访问令牌，然后（我认为）将该令牌传递给http://localhost:3000/companyInfo. 但是我怀疑这就是问题所在 - 令牌实际上是发送到这个地址，还是我误解了 OAuth 的工作原理？这是有问题的服务器端代码：

app.get("/callback", function (req, res) {
  oauthClient
    .createToken(req.url)
    .then(function (authResponse) {
      oauth2_token_json = JSON.stringify(authResponse.getJson(), null, 2);
    })
    .catch(function (e) {
      console.error(e);
    });

  res.redirect("http://localhost:3000/companyInfo" );
});

...这是我的整个服务器：

const express = require("express");
const OAuthClient = require("intuit-oauth");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const port = process.env.PORT || 3001;

let urlencodedParser = bodyParser.urlencoded({ extended: true });
let oauth2_token_json = null;
let oauthClient = null;

app.get("/authUri", urlencodedParser, (req, res) => {
  oauthClient = new OAuthClient({
    clientId: "****",
    clientSecret: "****",
    environment: "sandbox",
    redirectUri: "http://localhost:3001/callback",
  });
  let authUri = oauthClient.authorizeUri({
    scope: [OAuthClient.scopes.Accounting],
    state: "testState",
  });
  res.send(authUri);
});

app.get("/callback", function (req, res) {
  oauthClient
    .createToken(req.url)
    .then(function (authResponse) {
      oauth2_token_json = JSON.stringify(authResponse.getJson(), null, 2);
    })
    .catch(function (e) {
      console.error(e);
    });

  res.redirect("http://localhost:3000/companyInfo" );
});

app.get("/getCompanyInfo", (req, res) => {
  let companyID = oauthClient.getToken().realmId;

  let url =
    oauthClient.environment == "sandbox"
      ? OAuthClient.environment.sandbox
      : OAuthClient.environment.production;

  oauthClient
    .makeApiCall({
      url: url + "v3/company/" + companyID + "/companyinfo/" + companyID,
    })
    .then(function (authResponse) {
      console.log(
        "The response for API call is :" + JSON.stringify(authResponse)
      );
      res.send(JSON.parse(authResponse.text()));
    })
    .catch(function (e) {
      console.error(e);
    });
});


app.listen(port, () => {
  console.log(`Server is listening on port: ${port}`);
});

...这是我要呈现返回的 API 调用数据的反应组件：

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const CompanyInfo = () => {

    const [ info, setInfo ] = useState('')

    useEffect(() => {
        axios.get('/getCompanyInfo')
        .then(res => setInfo(res.data))
    },[])

    return(
        <div>
           <p> {info.CompanyInfo.CompanyName} </p>
        </div>
    )
}

export default CompanyInfo

奇怪的是，有时我可以在这个组件中渲染 API 调用数据，但我只能渲染一次。如果我刷新我的页面，它会崩溃，我必须再次启动登录过程才能使 API 调用正常工作。

标签： node.jsreactjsexpressoauthquickbooks