Django rest auth でuserをGETするには

こんにちは。Qiita初投稿のH-goto16です。

みなさんはDjango REST Frameworkを使っていますか。
DjangoとReactの連携をした際にDRFを用いてアプリケーションを作りました。
その時に、Djangoのほうではuser情報が簡単にとれるのにAxiosなどでGETするとエラーが出てしまうことはありませんか？

Django-rest-authの公式ドキュメントを読んでも解決しなかった。（書いてなかった）ため、ここでやり方を紹介します。

ここではDjango-rest-authについての具体的なインストール方法や使い方については触れません。
あらかじめインストールされたという前提です。

環境
Windows11 Pro
WSL2 Ubuntu20.04
Docker 20.10.16
docker-compose 1.29.2
Django 3.1.2
djangorestframework 3.12.2
django-rest-auth 0.9.5
django-allauth 0.43.0

準備

まずは http://localhost:8000/rest-auth/login/　
にアクセスして、ログインを行ってください。
アカウントを登録していない場合は /rest-auth/registration/ にアクセスして登録をしてください。

ログインをするとKeyが返ってきます。

そして、http://localhost:8000/rest-auth/user/
にアクセスすると。

こういった画面になると思います。もしくは

この画面になると思います。

ここから外部からAPIでUserの情報を取得しましょう。

方法

それでは、まずはPythonで実装していきたいと思います。

import json
import requests

response = requests.get("http://localhost:8000/rest-auth/user/")
print(json.loads(response.text))

としてみましょう。すると、

{'detail': '認証情報が含まれていません。'}

と返ってきます。これでおそらく解決しなかった人が多いと思います。

解決方法

import json
import requests

header = {"Authorization": "Token 1546b71af7249430ec6bfe69506d144459a21034"}

response = requests.get("http://localhost:8000/rest-auth/user/", headers=header)
print(response)
print(json.loads(response.text))

ヘッダーに認証情報を追記する必要があります。

{"Authorization": "Token 1546b71af7249430ec6bfe69506d144459a21034"}

の部分ですが、必ずTokenのあとは半角スペースを空けてください。

では実行してみます。

{'pk': 6, 'username': 'test0000', 'email': 'test0000@gmail.com', 'first_name': '', 'last_name': ''}

こんな風にレスポンスされます。
これでうまく取得することができました。あとは煮るなり焼くなりしてjsonを抽出するだけです。

Reactとの連携

ではReactで書いてみましょう。ここではTypescriptとAxiosを使用します。

import React, { useEffect, useState } from "react";
import axios from "axios";

export const Home: React.FC = () => {
  const [user, setUser] = useState("");
  const urlUser = "http://localhost:8000/rest-auth/user/";

  function getCookieArray() {
    const arr: any = new Array();
    if (document.cookie != "") {
      const tmp = document.cookie.split("; ");
      for (var i = 0; i < tmp.length; i++) {
        var data = tmp[i].split("=");
        arr[data[0]] = decodeURIComponent(data[1]);
      }
    }
    return arr;
  }

  const arr = getCookieArray();

  useEffect(() => {
    axios
      .get(urlUser, {
        headers: {
          Authorization: "Token " + arr["name"],
        },
      })
      .then(res => {
        setUser(res.data.username);
      });
  }, []);


以下略

ここで

axios
      .get(urlUser, {
        headers: {
          Authorization: "Token " + arr["name"],
        },
      })
      .then(res => {
        setUser(res.data.username);
      });

ここのheadersとAuthorizationを記述すれば取得できると思います。

ちなみに今回ではcookieに保存してあるデータからログインをしています。
要望があればやり方をまた追記します。

arr["name"]

はログインした後に返されるキーです。

まとめ

headerを追加する。
Authorization Token "key"を書く。
この二つでuser情報を取得することができます。

最後まで読んでいただきありがとうございました。