收到错误 Oauth 错误 invalid_request：redirect_uri 未通过本地主机从 Shopify API 访问中列入白名单？答案

【问题标题】：Getting error Oauth error invalid_request: The redirect_uri is not whitelisted from Shopify API access through local host?收到错误 Oauth 错误 invalid_request：redirect_uri 未通过本地主机从 Shopify API 访问中列入白名单？
【发布时间】：2021-01-22 06:40:08
【问题描述】：

我在这里查看了其他 shopify 问题，但这次错误似乎来自我认为的其他问题。我正在尝试通过 nodejs 上的 localhost 创建/访问 shopify 应用程序，以便将来使用产品 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', (req, res) => {
  const shop = req.query.shop;

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

  const state = nonce();

  const installShopUrl = buildInstallUrl(shop, state, 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 URL 等，似乎也找不到任何问题。

这是错误截图

【问题讨论】：

标签： node.js shopify shopify-app shopify-api-node

【解决方案1】：

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

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

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

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

别忘了重启你的节点服务器。

【讨论】：

谢谢。我今天遇到了同样的问题。就我而言，我在 .env 中将 appURl 定义为 HOST，并且在删除最后一个正斜杠后，错误已修复。
太棒了！很高兴能提供帮助。

【解决方案2】：

登录您的合作伙伴帐户，并为具有 API 密钥的应用程序，将 URL 列入白名单。真的就是这么简单。

【讨论】：

【解决方案3】：

检查你的 ngrok url 与你的应用程序设置 url 和允许的重定向 URL(s) 都像 https 或 http 一样正确检查

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：