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

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の値をデコードして処理すれば問題ありません。

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