从XHR请求接收OAuth2令牌 [英] Receive OAuth2 Token from XHR Request

问题描述

我正在尝试通过TypeScript中的XHR-Request获取OAuth2令牌，如本侧所述(

I am trying to get an OAuth2 Token via XHR-Request in TypeScript like mentioned on this side(https://developer.paypal.com/docs/integration/direct/make-your-first-call/). My code so far:

        var clientID = <clientID>;
        var secret = <mySecret>;

        var oReq = new XMLHttpRequest();
        oReq.open("POST", "https://api.sandbox.paypal.com/v1/oauth2/token", true);

        oReq.setRequestHeader('grant_type', "client_credentials");
        oReq.setRequestHeader('Username', this.clientID);
        oReq.setRequestHeader('Password', this.secret);
        oReq.setRequestHeader('Content-type', "application/x-www-form-urlencoded");
        oReq.setRequestHeader('Accept', "application/json");
        oReq.setRequestHeader('Accept-Language', "en_US");         
        oReq.onreadystatechange = function () {
            if (oReq.readyState === 4) {
                if (oReq.status === 200) {
                    console.log(oReq.responseText);
                } else { 
                    console.log("Error: " + oReq.status);
                } 
            }     
        console.log("Status: " + oReq.status);
        }; 
        console.log("Status: " + oReq.status);

        oReq.send();

可悲的是，我一直收到401作为回应.我已经使用相同的clientID和secret尝试了curl命令，这对我有用.有人可以告诉我代码有什么问题吗?

Sadly I keep getting 401 as response. I already tried the curl command with the same clientID and secret, which worked for me. Can someone tell me whats wrong with me code?

推荐答案

获得401响应的请求不是您的POST请求，而是浏览器会自动执行的CORS预检OPTIONS请求自己的.

The request you’re getting the 401 response for isn’t your POST request but instead the CORS preflight OPTIONS request that the browser automatically does on its own.

https://developer.mozilla.org/en -US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests 包含有关触发浏览器进行预检的详细信息，但是在这种特定情况下，您要添加grant_type，Username，和Password请求的标头以进行所需的身份验证-但浏览器会在没有这些标头的情况下发出预检OPTIONS请求(因为预检的目的是要求服务器指出接收请求是否可以包括那些请求标头).

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests has details about what triggers browsers to do a preflight but what it comes down to in this specific case is that you’re adding grant_type, Username, and Password request headers to the request in order to do the authentication needed—but your browser makes the preflight OPTIONS request without those headers (because the purpose of the preflight is to ask the server to indicate whether it’s OK with receiving requests that include those request headers).

因此发生了以下情况(使用curl复制只是出于说明目的):

And so what happens is the following (reproduced using curl just for illustration purposes):

$ curl -X OPTIONS -i -H "Origin: http://example.com" \
    'https://api.sandbox.paypal.com/v1/oauth2/token'

HTTP/1.1 401 Unauthorized
Date: Wed, 09 Aug 2017 09:08:32 GMT
Server: Apache
paypal-debug-id: f8963606c5654
Access-Control-Allow-Origin: http://example.com
Access-Control-Expose-Headers: False
HTTP_X_PP_AZ_LOCATOR: sandbox.slc
Paypal-Debug-Id: f8963606c5654
Set-Cookie: X-PP-SILOVER=name%3DSANDBOX3.API.1%26silo_version%3D1880%26app%3Dapiplatformproxyserv%26TIME%3D282167897%26HTTP_X_PP_AZ_LOCATOR%3Dsandbox.slc; Expires=Wed, 09 Aug 2017 09:38:32 GMT; domain=.paypal.com; path=/; Secure; HttpOnly
Set-Cookie: X-PP-SILOVER=; Expires=Thu, 01 Jan 1970 00:00:01 GMT
Content-Length: 0
Connection: close
Content-Type: text/plain; charset=ISO-8859-1

也就是说，即使对于OPTIONS请求，https://api.sandbox.paypal.com/v1/oauth2/token端点显然也需要身份验证.因为这样做，您无法直接从运行在浏览器中的前端JavaScript代码向该终结点发出POST请求.

That is, the https://api.sandbox.paypal.com/v1/oauth2/token endpoint apparently requires authentication even for OPTIONS requests. Because it does, there’s no way you can make POST requests to that endpoint directly from your frontend JavaScript code running in a browser.

因此，您需要从后端代码发出请求.

So you’ll instead need to make the request from your backend code.

这篇关于从XHR请求接收OAuth2令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！