使用 jQuery OAUTH 检索临时访问令牌答案

【问题标题】：Retrieving Temporary Access Token using jQuery OAUTH使用 jQuery OAUTH 检索临时访问令牌
【发布时间】：2012-07-12 04:06:22
【问题描述】：

我正在尝试对 Shopify 进行 API OAUTH2 调用以进行身份验证。当我进入我的应用程序时，会出现第一个屏幕。我按下安装，然后它会将我重定向回我开始的位置。问题是当我被重定向时，我似乎无法在我的 jQuery ajax 函数中捕捉到它，因此我无法从 OAUTH 获取创建永久令牌所需的临时令牌。第二张图片显示了我按下安装后发生的情况。到目前为止，我的代码如下所示。运行 ajax 调用后，没有调用任何 console.log() 函数。

我的应用程序的应用程序 URL 设置为

http://localhost

我的应用程序正在从

运行

http://localhost/shippingcalculator.

我在外部 REST 客户端程序中测试了这些调用，并成功获得了我的访问令牌，因此我的凭据没有问题。

<!DOCTYPE html>

 <script type="text/javascript">
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    console.log(window.location.search);
    var results = regex.exec(window.location.search);
    if (results == null) return "";
    else return decodeURIComponent(results[1].replace(/\+/g, " "));
}

function getTemporaryToken(token) {
    jso_configure({
        "shopify": {
            client_id: "67d7af798dd0a42e731af51ffa", //This is your API Key for your App
            //redirect_uri: "", OPTIONAL - The URL that the merchant will be sent to once authentication is complete. Must be the same host as the Return URL specified in the application settings
            authorization: "https://emard-ratke3131.myshopify.com/admin/oauth/authorize",
            //In your case the authorization would be https://SHOP_NAME.myshopify.com/admin/oauth/authorize
            scope: ["read_products"], //Set the scope to whatever you want to access from the API. Full list here: http://api.shopify.com/authentication.html
        }
    });
    $.oajax({
        url: "https://emard-ratke3131.myshopify.com/admin/oauth/authorize",
        jso_provider: "shopify",
        jso_scopes: ["read_products"],
        jso_allowia: true,
        success: function(data) {
            //Use data and exchange temporary token for permanent one
            if (jqXHR.status === 200) {
                console.log("200");
            }
            if (jqXHR.status === 302) {
                console.log("300");
            }
            console.log("Response (shopify):");
            console.log(data);
        },
        error: function(e) {
            console.log("Fail GET Request");
            console.log(e);
        },
        complete: function(xmlHttp) {
            // xmlHttp is a XMLHttpRquest object
            console.log(xmlHttp.status);
        }
    });
    console.log("Code: " + getParameterByName("code"));
}
}
$(document).ready(function() {
    getTemporaryToken();
});
</script>
</head>
<body>
Hello World!
</body>
</html>

【问题讨论】：

标签： javascript jquery oauth-2.0 shopify

【解决方案1】：

在客户端执行所有这些操作是一个非常糟糕的主意，您的 API 密钥对于任何人都可以查看和使用。最重要的是，您将在哪里存储令牌？所有浏览器都内置了跨站点脚本限制，这将阻止 JavaScript 调用加载 js 的站点以外的站点。

您确实应该进行身份验证并从服务器进行所有 API 调用。

【讨论】：

好的，我已经编写了一个 node.js 服务器来帮助我的 OAUTH 调用
将令牌存储在 cookie 或 html5 本地存储中也不错