Angular 中的 Twitter API Request_Token

Question

所以，我在为我的 Angular 应用程序制作 Twitter 登录方法时遇到了麻烦。问题是我什至无法完成第一步。我需要向 request_token API 发出一个发布请求（我正在执行此步骤 https://dev.twitter.com/web/sign-in/implementing），但我仍然收到“错误的身份验证数据” ' 错误（只是为了让您知道：我一直在搞乱我的代码以使其工作，而我得到的最好的结果是 'Could not authenticate you' 错误） .

所以在我展示我的代码之前，让我确保我正确理解了这一点。由于我请求令牌，我没有在我的代码中传递任何access_token。当我创建我的签名并且我在授权请求中传递 oauth_callback 字符串时，我没有在任何地方使用令牌。

所以，这是我对 request_token 进行 POST 的代码。

callTwLogin(): void{
    const url = 'https://api.twitter.com/oauth/request_token';
    const callback = encodeURIComponent('http://127.0.0.1/');

    this.Oauth_timestamp = this.createTimestamp(); // We create a timestamp in seconds.
    this.Oauth_nonce = this.randomString(32); // We create a 32-long random string.

    this.http.post(url, {headers: new HttpHeaders().set('Content-Type','application/x-www-form-urlencoded')
                    .set('Authorization','OAuth oauth_consumer_key="'+this.Oauth_consumerkey+'", oauth_nonce="'+this.Oauth_nonce+'"oauth_signature="'+encodeURIComponent(this.createSignature())+'", oauth_signature_method="HMAC-SHA1", oauth_timestamp="'
                    +this.Oauth_timestamp+'", oauth_version="1.0"')
                    })
      .subscribe(rsp => console.log("Twitter: " +rsp)); // Should it have Access Token if it is a request token?
   }

createTimestamp() 和 randomString() 函数非常简单，所以我不会展示它们。但是，createSignature() 函数非常重要，所以这里是：

createSignature():string{
    let rawURL: string = "POST&" + encodeURIComponent("https://api.twitter.com/oauth/request_token") + "&";
    let parameterString: string = "include_entities=true" + 
                                    "&oauth_consumer_key=" + this.Oauth_consumerkey + 
                                    "&oauth_nonce=" + this.Oauth_nonce + 
                                    "&oauth_signature_method=HMAC-SHA1"+ 
                                    "&oauth_timestamp=" + this.Oauth_timestamp + 

                                    "&oauth_version=1.0";
    let signingString = rawURL + encodeURIComponent(parameterString);
    let signingKey = encodeURIComponent(this.ConsumerSecret) + "&"; // No TokenSecret because its Request_Token.
    let signatur: string = this.CryptoJS.HmacSHA1(signingString, signingKey).toString(this.CryptoJS.enc.Base64);
    console.log("Signatur: " + signatur);
    return signatur;
   } 

如您所见，我已删除签名基本字符串和 signinkey 中的令牌。我究竟做错了什么？我已经为此苦苦挣扎了几个星期，但我无法完成。

请帮助我。 谢谢！

====================================更新 1 ========== =====================

所以我做了 Jon Susiak 要求我做的事情。我添加了之前忘记添加的逗号，我将 oauth_callback 添加到我的 parameterString 和我的授权请求中，并删除了 include_entities。

这是我新的 createSignature 方法：

let callback = "http://127.0.0.1/"
    let rawURL: string = "POST&" + encodeURIComponent("https://api.twitter.com/oauth/request_token") + "&";
    let parameterString: string =   "oauth_callback=" +callback+
                                    "&oauth_consumer_key=" + this.Oauth_consumerkey + 
                                    "&oauth_nonce=" + this.Oauth_nonce + 
                                    "&oauth_signature_method=HMAC-SHA1"+ 
                                    "&oauth_timestamp=" + this.Oauth_timestamp +        
                                    "&oauth_version=1.0";
    let signingString = rawURL + encodeURIComponent(parameterString);
    let signingKey = encodeURIComponent(this.ConsumerSecret) + "&"; // No TokenSecret because its Request_Token.
    let signatur: string = this.CryptoJS.HmacSHA1(signingString, signingKey).toString(this.CryptoJS.enc.Base64);
    console.log("Signatur: " + signatur);
    return signatur;

还有我的新邮政编码

const url = 'https://api.twitter.com/oauth/request_token';
    const callback = encodeURIComponent('http://127.0.0.1/');
    const body = {
      oauth_callback: callback
    };
    this.Oauth_timestamp = this.createTimestamp(); // We create a timestamp in seconds.
    this.Oauth_nonce = this.randomString(32); // We create a 32-long random string.
    this.http.post(url, {headers: new HttpHeaders()
                    .set('Authorization','OAuth oauth_callback="' + callback
                    + '", oauth_consumer_key="' + this.Oauth_consumerkey
                    + '", oauth_nonce="' + this.Oauth_nonce
                    + '", oauth_signature="' + encodeURIComponent(this.createSignature())
                    + '", oauth_signature_method="HMAC-SHA1", oauth_timestamp="' + this.Oauth_timestamp
                    + '", oauth_version="1.0"')
                    })
      .subscribe(rsp => console.log("Twitter: " +rsp)); 

它仍然不起作用，如果我不将回调作为 POST 参数发送，它会抛出“错误的身份验证数据（错误 400）”。如果我确实将它作为参数发送，它会抛出“无法验证您（错误 401）”

请帮忙！

Answer 1

First include_entities 不是获取请求令牌时使用的参数。获取访问令牌后，可以稍后使用此参数。

其次，您没有在参数字符串或授权标头中包含oauth_callback 参数。

第三，您在 Authorization 标头中的 oauth_nonce 后面漏掉了一个逗号。请注意，如有必要，参数值应进行百分比编码。

因此，您的参数字符串应如下所示：

let parameterString: string = "oauth_callback" + callback
"&oauth_consumer_key=" + this.Oauth_consumerkey + 
"&oauth_nonce=" + this.Oauth_nonce + 
"&oauth_signature_method=HMAC-SHA1"+ 
"&oauth_timestamp=" + this.Oauth_timestamp + 
"&oauth_version=1.0";

您的授权标头应该是：

'OAuth oauth_callback="' + callback
+ '", oauth_consumer_key="' + this.Oauth_consumerkey
+ '", oauth_nonce="' + this.Oauth_nonce
+ '", oauth_signature="' + encodeURIComponent(this.createSignature())
+ '", oauth_signature_method="HMAC-SHA1", oauth_timestamp="' + this.Oauth_timestamp
+ '", oauth_version="1.0"'

Answer 2

更新：

你从不使用body。它是第二个参数，最终的选项是第三个。