收到错误Oauth错误invalid_request：是否没有通过本地主机从Shopify API访问中将redirect_uri列入白名单？

问题描述

我在这里查看了其他shopify问题，但是这次错误似乎是由我相信的其他原因引起的。我正在尝试通过nodejs上的localhost创建/访问shopify应用，以便将来使用Product API。但是遇到上述错误：

这是我的NGROK日志：

GET  /shopify                  302 Found                                                                                GET  /shopify                  302 Found                                                                                GET  /shopify                  302 Found                                                                                GET  /shopify                  302 Found                                                                                GET  /shopify                  302 Found                                                                                GET  /shopify                  302 Found

1-这是我的index.js文件：

///////////// Initial Setup /////////////

const dotenv = require('dotenv').config();
const express = require('express');
const crypto = require('crypto');
const cookie = require('cookie');
const nonce = require('nonce')();
const querystring = require('querystring');
const axios = require('axios');

const shopifyApiPublicKey = process.env.SHOPIFY_API_PUBLIC_KEY;
const shopifyApiSecretKey = process.env.SHOPIFY_API_SECRET_KEY;
const scopes = 'write_products';
const appUrl = 'https://20a11edc124f.ngrok.io/';

const app = express();
const PORT = 3000

app.get('/',(req,res) => {
  res.send('Ello Govna')
});

///////////// Helper Functions /////////////

const buildredirectUri = () => `${appUrl}/shopify/callback`;

const buildInstallUrl = (shop,state,redirectUri) => `https://${shop}/admin/oauth/authorize?client_id=${shopifyApiPublicKey}&scope=${scopes}&state=${state}&redirect_uri=${redirectUri}`;

const buildAccesstokenRequestUrl = (shop) => `https://${shop}/admin/oauth/access_token`;

const buildShopDataRequestUrl = (shop) => `https://${shop}/admin/shop.json`;

const generateEncryptedHash = (params) => crypto.createHmac('sha256',shopifyApiSecretKey).update(params).digest('hex');

const fetchAccesstoken = async (shop,data) => await axios(buildAccesstokenRequestUrl(shop),{
  method: 'POST',data
});

const fetchShopData = async (shop,accesstoken) => await axios(buildShopDataRequestUrl(shop),{
  method: 'GET',headers: {
    'X-Shopify-Access-Token': accesstoken
  }
});

///////////// Route Handlers /////////////

app.get('/shopify',res) => {
  const shop = req.query.shop;

  if (!shop) { return res.status(400).send('no shop')}

  const state = nonce();

  const installShopUrl = buildInstallUrl(shop,buildredirectUri())

  res.cookie('state',state) // should be encrypted in production
  res.redirect(installShopUrl);
});

app.get('/shopify/callback',async (req,res) => {
  const { shop,code,state } = req.query;
  const stateCookie = cookie.parse(req.headers.cookie).state;

  if (state !== stateCookie) { return res.status(403).send('Cannot be verified')}

  const { hmac,...params } = req.query
  const queryParams = querystring.stringify(params)
  const hash = generateEncryptedHash(queryParams)

  if (hash !== hmac) { return res.status(400).send('HMAC validation Failed')}

  try {
    const data = {
      client_id: shopifyApiPublicKey,client_secret: shopifyApiSecretKey,code
    };
    const tokenResponse = await fetchAccesstoken(shop,data)

    const { access_token } = tokenResponse.data

    const shopData = await fetchShopData(shop,access_token)
    res.send(shopData.data.shop)

  } catch(err) {
    console.log(err)
    res.status(500).send('something went wrong')
  }
});

///////////// Start the Server /////////////

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

2-这是我的环境文件

SHOPIFY_API_PUBLIC_KEY=key here
SHOPIFY_API_SECRET_KEY=key here

3-这是我的package.json文件

{
  "name": "TestQasim","version": "1.0.0","description": "","main": "index.js","scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"keywords": [],"author": "","license": "ISC","dependencies": {
    "axios": "^0.20.0","cookie": "^0.4.1","dotenv": "^8.2.0","express": "^4.17.1","nodemon": "^2.0.4","nonce": "^1.0.4"
  }
}

我正在使用NGROK隧道并使用此链接：

https://20a11edc124f.ngrok.io/shopify?shop=testqasim121312.myshopify.com

但出现上述错误。

我已经检查了API URLS等，似乎也找不到任何问题。

这是错误的屏幕截图

解决方法

如果您仍然面临这个问题，

从 appURL 中删除尾部斜杠，我认为应该可以解决这个问题。

使用const appUrl = 'https://20a11edc124f.ngrok.io'

不是const appUrl = 'https://20a11edc124f.ngrok.io/'

并且不要忘记重新启动您的节点服务器。

,

登录到您的合作伙伴帐户，对于带有API密钥的应用，将网址列入白名单。真的就是这么简单。

,

使用您的应用设置网址和允许的重定向网址检查您的 ngrok 网址，两者都可以像 https 或 http 一样正确检查

,

对于以后遇到同样问题的人，我留言。 我刚刚解决了。

在你的 package.json 中，你可能有这个命令。 => "dev": "node server.js"

在编辑代码时它永远不会重新启动您的服务器。 因此，在链接 ngrok 地址（例如，https://12k1ml2kd1m.ngrok.io）之后，重新启动您的服务器。

简而言之，更改您的 ngrok 地址并重新启动您的节点服务器。