javascriptのXMLHttpRequestでcurlのpostコマンドが再現できない

Question

実現したいこと

以下のcurlコマンドをjavascriptで再現したいのですがうまくいきません。

curl --request POST \
  --url https://testdomain/oauth2/v1/token \
  --header 'accept: application/json' \
  --header 'cache-control: no-cache' \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data 'grant_type=authorization_code&client_id=0oabygpxgk9lXaMgF0h7&redirect_uri=yourApp%3A%2Fcallback&code=CKA9Utz2GkWlsrmnqehz&code_verifier=M25iVXpKU3puUjFaYWg3T1NDTDQtcW1ROUY5YXlwalNoc0hhakxifmZHag'

発生している問題・分からないこと

postmanで試した結果、正しい結果を取得できることは確認できましたが
javascriptで正しい結果を得ることができません。

該当のソースコード

        var restAPIURL=this.baseURL+"oauth2/v1/token";
        var req = new XMLHttpRequest(); // HTTPでファイルを読み込むためのXMLHttpRrequestオブジェクトを生成
        req.open("POST",restAPIURL, false); // アクセスするファイルを指定
        req.setRequestHeader("Accept","application/json");
        req.setRequestHeader("cache-control","no-cache");
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        var postData='grant_type=authorization_code'
        +'&redirect_uri='+encodeURIComponent(this.config.redirectUri)
        +'&code='+this.config.authorization_code
        +'&code_verifier='+code_verifier;

req.send(encodeURIComponent(postData));

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

以下の参考にしているページを張ります。

https://developer.okta.com/docs/guides/implement-grant-type/authcodepkce/main/?_gl=1%2a1eox44n%2a_ga%2aMTM4ODUxMDU4Ny4xNzEyNzEzODE4%2a_ga_QKMSDV5369%2aMTcxMjcxMzgxNy4xLjEuMTcxMjcxMzgyMS41Ni4wLjA.&_ga=2.44795940.1465596206.1712713818-1388510587.1712713818

補足

特になし

Comments

[maisumakun]

そもそも論ですが、そのトークンは書いて大丈夫なものでしょうか？

（回答すると質問自体が削除されづらくなってしまうので、問題がないことを確認してから回答に移りたい、という感覚です）

[tamina0624]

はい、書いてはいけないものは削除しています。

[maisumakun]

> javascriptで正しい結果を得ることができません。

具体的に、どうなっているのですか？

[tamina0624]

以下のようなエラーが発生します。
{"error":"invalid_client","error_description":"Browser requests to the token endpoint must use Proof Key for Code Exchange."}

[maisumakun]

> 以下のようなエラーが発生します。

書かれたメッセージから調べてみたこと、試したことなどはありませんか？

[tamina0624]

以下のページにたどり着き、bodyにcode_verifierを追加しました。

https://developer.okta.com/docs/guides/implement-grant-type/authcodepkce/main/?_gl=1%2a1eox44n%2a_ga%2aMTM4ODUxMDU4Ny4xNzEyNzEzODE4%2a_ga_QKMSDV5369%2aMTcxMjcxMzgxNy4xLjEuMTcxMjcxMzgyMS41Ni4wLjA.&_ga=2.44795940.1465596206.1712713818-1388510587.1712713818

[Lhankor_Mhy]

これではないですか？
https://support.okta.com/help/s/article/Browser-requests-to-the-token-endpoint-must-use-Proof-Key-for-Code-Exchange?language=en_US

[tamina0624]

ありがとうございます。
postmanでヘッダにOrigin要素を追加したところ同じエラーを確認できました。

[Lhankor_Mhy]

ご解決ということでよろしいでしょうか？

[tamina0624]

はい、解決しました。ご協力ありがとうございました。

[Lhankor_Mhy]

それは何よりです。

お手数ですが、自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself

Answer 1

req.send(encodeURIComponent(postData));

この encodeURIComponent() が余計かもしれません。

FormData や URLSearchParams を使うとエスケープ処理をいちいち書かなくて済みます。

let postData = new FormData();
postData.append('grant_type', 'authorization_code');
postData.append('redirect_uri', this.config.redirectUri);
postData.append('code', this.config.authorization_code);
postData.append('code_verifier', code_verifier);
req.send(postData);

Comments

[tamina0624]

ダメでした。以下のエラーが出ます。
{\"error\":\"invalid_client\",\"error_description\":\"Browser requests to the token endpoint must use Proof Key for Code Exchange.\"}"

code_verifierパラメータを認識していないように見えます。

[int32_t]

> code_verifierパラメータを認識していないように見えます。

では変数 code_verifier の内容が間違っているのではないでしょうか。
ブラウザの開発者ツールで何が送られているか確認できるので、意図した値になっているか確認してください。

[tamina0624]

はい、値をconsoleに出力して、postmanで同じパラメータで試すとうまくいきます。。。

[int32_t]

JavaScript の方では client_id パラメータを設定していないように見えますが、そこは大丈夫なのでしょうか。

[tamina0624]

はい、postmanを確認したところclient_idがない状態で動いていました。

Answer 2

javascriptで正しい結果を得ることができません。

相手サーバがCORSに対応していなければ、ブラウザJavaScriptから結果を取得することはできません。

Comments

[tamina0624]

cors対応されているようです。

[maisumakun]

それは失礼いたしました。

Answer 3

調整版

const req = new XMLHttpRequest();
const data={
grant_type:'authorization_code',
redirect_uri:'sampleURI',
code:'sampleCode',
code_verifier:'sampleVerifierテスト',
};

const postData=Object.entries(data).map(x=>`${encodeURIComponent(x[0])}=${encodeURIComponent(x[1])}`).join('&');
req.open('POST',restAPIURL);
req.setRequestHeader("Accept","application/json");
req.setRequestHeader("cache-control","no-cache");
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.onload = function() {
  console.log(JSON.parse(this.response));
};
req.send(postData);

きょうび、fetchで送るほうが楽だとおもいます。
fetchの場合データはformDataで格納すればエンコードも必要ありません

参考

参考までにUSP版も

const req = new XMLHttpRequest();
const data={
grant_type:'authorization_code',
redirect_uri:'sampleURI',
code:'sampleCode',
code_verifier:'sampleVerifierテスト',
};
const postData = Object.entries(data).reduce((x,y)=>(x.append(y[0],y[1]),x),new URLSearchParams());
req.open('POST',restAPIURL);
req.responseType = 'json';
req.setRequestHeader("Accept","application/json");
req.setRequestHeader("cache-control","no-cache");
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.onload = function() {
  console.log(this.response);
};
console.log(postData);
req.send(postData);

Comments

[tamina0624]

ダメでした。以下のエラーが出ます。
{\"error\":\"invalid_client\",\"error_description\":\"Browser requests to the token endpoint must use Proof Key for Code Exchange.\"}"

code_verifierパラメータを認識していないように見えます。

[yambejp]

参考までにusp版も追記しています。
サーバー側の解釈の問題もあるので検証環境がない限りコレ以上の補足は難しいですね
（私の環境ではただしく動作するので）

[tamina0624]

原因が別問題でしたが、当初知りたかった内容にピンポイントで答えを出していただいたのでベストアンサーとさせていただきます。