React.jsでREST APIにBearerトークンを送信する方法

2024-04-02

この解説では、Axiosを使ってBearerトークンを送信する方法について、以下の内容を説明します。

Bearerトークンとは
AxiosでBearerトークンを送信する
注意点

Bearerトークンは、OAuth 2.0で定義されている認証方式の一つです。Bearerトークンは、ユーザーの認証情報を表す文字列で、リクエストヘッダーに含めて送信します。

Bearerトークンは、以下のような特徴があります。

ユーザーの認証情報を暗号化せずに送信するため、HTTPSなどの安全な通信プロトコルを使用する必要があります。
有効期限が設定されているため、定期的に更新する必要があります。

AxiosでBearerトークンを送信するには、以下の手順を行います。

トークンを取得する
リクエストヘッダーにトークンを設定する

const axios = require('axios');

const token = 'YOUR_TOKEN';

const headers = {
  Authorization: `Bearer ${token}`,
};

axios.get('https://api.example.com/', { headers });

以下のコードは、Axiosを使ってBearerトークンを送信するサンプルコードです。

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  const [token, setToken] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    const headers = {
      Authorization: `Bearer ${token}`,
    };

    axios.get('https://api.example.com/', { headers });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={token} onChange={(e) => setToken(e.target.value)} />
        <button type="submit">送信</button>
      </form>
    </div>
  );
};

export default App;

注意点

Bearerトークンは、安全な場所に保管する必要があります。
Bearerトークンは、HTTPSなどの安全な通信プロトコルを使用する必要があります。

Bearerトークンは、API通信を行う際にユーザーを認証するために使用される重要な技術です。この解説を参考に、Bearerトークンを正しく使用して、安全なAPI通信を実現してください。

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
  const [token, setToken] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    const headers = {
      Authorization: `Bearer ${token}`,
    };

    axios.get('https://api.example.com/', { headers });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={token} onChange={(e) => setToken(e.target.value)} />
        <button type="submit">送信</button>
      </form>
    </div>
  );
};

export default App;

コードの説明

useState Hookを使って、トークン状態を管理しています。
handleSubmit 関数は、フォーム送信時に呼び出され、トークンをヘッダーに設定してAPIリクエストを送信します。
axios.get メソッドを使って、APIリクエストを送信します。

実行方法

上記のコードをファイルに保存します。
npm install コマンドを実行して、必要なライブラリをインストールします。
npm start コマンドを実行して、アプリを起動します。
ブラウザで http://localhost:3000 を開き、トークンを入力して送信ボタンをクリックします。

補足

上記のコードは、サンプルコードです。実際のアプリケーションでは、トークンを安全な場所に保管する必要があります。
APIリクエストのURLやヘッダーの内容は、使用するAPIによって異なります。

Bearerトークンを送信する他の方法

fetch APIは、ブラウザの標準機能で、HTTPリクエストを送信することができます。

const token = 'YOUR_TOKEN';

const headers = {
  Authorization: `Bearer ${token}`,
};

fetch('https://api.example.com/', { headers });

独自のライブラリを作成して、Bearerトークンを送信することもできます。

const myAxios = {
  get(url, headers) {
    return fetch(url, {
      headers: {
        ...headers,
        Authorization: `Bearer ${token}`,
      },
    });
  },
};

myAxios.get('https://api.example.com/');