システム開発・構築の神様

新しいサービスや技術を使った開発や構築。その他不具合解決など

jqueryのajaxから認証用のauthorization bearerヘッダーを送信する

最近フロントエンドの開発を、ポチポチ触っていてのメモ書きです。

 

JWTやoAuthなどの認証で、authorization bearerヘッダーを送信した認証を構築しようと思っています。

 

なるほど~apiを使った外部システムからの認証は、このような仕様になっているんですね。

 

サーバー側とのセット(クッキー、セッション)でしかシステムを構築したことが無かったので、目からウロコです。。。

 

適当なライブラリを使えば、JWTやoAuthの実装は用意ですが、肝心のフロント周りでの処理がよく分かっていません。

 

curlを元にしたテストが確認できたので、次はフロント側のHTMLから処理をテストしてみようと・・・

 

jqueryのajaxでどうやって送信するのだろうか?

 

最終的はnuxt.jsでの利用を考えていますが、あえてjqueryで動作確認をしようと思ったのですが・・・

 

いろいろ調べてみると、下記の感じで問題なく動作しました。

 

$.ajax( {
  type: 'post',
  url: './api/test',
  dataType: 'json',
  beforeSend: function( xhr, settings ) { xhr.setRequestHeader( 'Authorization', 'Bearer '+ token ); }
} )
.done( ( data ) => {

} )
.fail( ( data ) => {
} );

 

後は、サーバー側でHTTP_AUTHORIZATIONの値をデコードして処理すれば問題ありません。

 

いやはや、フロント開発は奥が深いですね。