Djangoアプリでユーザ認証した人だけ画像を見せられるようにする

Djangoにはデフォルトで画像などのメディアファイルをアップロードする仕組みが搭載されていますが、アップロード先にはURLさえ分かれば誰でもアクセスできるような状態となってしまいます。
そのため、ユーザ認証した人だけに画像などのメディアファイルを見れるようにしたい場合は、別段の対応が必要となります。

いろいろやり方はあるようですが、画像表示用の専用アプリを作ることで対応できたので、備忘録としてこの記事をまとめました。

目次
ユーザ認証した人だけメディアファイルを表示させるには？
ユーザ認証した人だけ画像を表示するアプリを作成する
画像が見れるか確認してみる
1. 補足　画像をアップロードする方法について
関連情報
参考
広告

ユーザ認証した人だけメディアファイルを表示させるには？

ネットで調べてみると、Nginxの機能を使った方法やBASIC認証を使った方法、DjangoのアプリでContent-type: image/****のHTTPレスポンスで返す方法など、、、やり方はいろいろありそうです。

画像ファイルはNginxなどのリバースプロキシから返すのが主流のため、上の記事の中では「X-Accel-Redirect」を使う方法が良さそうですが、、、
私自身、Nginxに詳しくないことと、Djangoの勉強目的でWebアプリを作ろうとしていたこともあって、今回はAPLサーバ上で動作する画像表示用の専用アプリから画像を返す方法を採用することにしました。

動作イメージとしては以下です。

③と④の通信はユーザ認証搭載のWebアプリを介して行われるため、ユーザ認証した人のみ画像ファイルにアクセスできるようになります。
画像ファイルの格納先は外部には公開していないため、WebサーバやApplicationサーバから直接アクセスすることはできません。

ユーザ認証した人だけ画像を表示するアプリを作成する

ここでは、上の図でいうところの「ユーザ認証機能搭載Webアプリ」の部分を作る方法をまとめます。
ただし、構築する環境としては、runserverコマンドでできあがるサーバ環境を想定します。

なお、私の環境とディレクトリ構成は以下です。

Python: 3.8
Django: 3.0.4

mysite
│  manage.py
│
├─config      (<= 設定ディレクトリ)
│  │  urls.py
│  └─ settings.py
│
├─apl         (<= 画像を表示するためのアプリ)
│  │  urls.py
│  └─ views.py
|
└─mymedia     (<= 画像ファイルを格納するディレクトリ)
   |  sample.jpg

※細かいファイルは省略しています。

手順１　ライブラリのインストール

Pythonで画像を扱うために、「Pillow」というライブラリを使用しますので、事前にインストールをします。
以下のコマンドでインストールできます。

$ pip install Pillow

手順２　設定ファイルに画像を格納するディレクトリを設定する

設定ファイル(settings.py)に画像を格納するディレクトリを設定します。

【mysite/config/settings.py】

MEDIA_ROOT = os.path.join(BASE_DIR, 'mymedia/')

MEDIA_ROOTは、Djangoでメディアファイルをアップロードするときに指定するパラメータです。
今回の記事では、アップロード機能は説明しませんが、上記のように設定することでアップロードしたファイルを「画像を表示するためのアプリ」で表示することができるようになります。

手順３　画像を表示するためのアプリを作成する

画像を表示するために以下のような「view.py」を作成します。
※アプリをまだ作成していなかった場合、「python manage.py startapp [アプリ名]」でアプリを作成してください。

【mysite/apl/views.py】

from django.views.generic import View
from django.contrib.auth.mixins import LoginRequiredMixin
from django.conf import settings
from PIL import Image
from django.http import HttpResponse
import io

class MediaView(LoginRequiredMixin,View):
    """ 画像取得 のビュー """
    def get(self, request, filename, *args, **kwargs):      
        img = Image.open(settings.MEDIA_ROOT+filename)
        imgByteArr = io.BytesIO()
        img.save(imgByteArr, format=img.format)
        imgByteArr = imgByteArr.getvalue()

        response = HttpResponse(imgByteArr,status=200)
        response["Content-Type"] = "image/jpeg"
        response["Content-Disposition"] = "inline; filename={0}".format(filename)
        return response

MediaViewはLoginRequiredMixinを継承することで、ユーザ認証が必須のビューとしています。
MEDIA_ROOTにあるファイルをImage.open()で読み取り、それをバイナリデータ化しimgByteArrに格納しています。
HttpResponseには、正常を表すステータス200を設定し、コンテンツタイプを画像だと伝えています。
response["Content-Disposition"] = "inline; filename={0}".format(filename)を設定しないとブラウザがファイルダウンロードと間違えてしまうので、設定をしています。

手順４　URLconfに画像を表示するためのアプリを設定する

DjangoのURLディスパッチャでアクセスされたURLとビュー関数を紐づけてもらえるようにURLconfに設定をします。

【mysite/config/urls.py】

urlpatterns = [
    path('', include('apl.urls')), # 追加
]

【mysite/apl/urls.py】

from django.urls import path
from . import views

app_name = 'apl'

urlpatterns = [
    path('media/<str:filename>/', views.MediaView.as_view(), name='media'),
]

「自分のURL/media/画像ファイル名」にアクセスすると、指定した画像ファイルを取得できます。

画像が見れるか確認してみる

インターネット上にある画像を表示するのと同じように、imgタグを使って画像を表示できるようになっているはずです。

Djangoのテンプレート上で「mysite/mymedia/sample.jpg」を表示するには、以下のようにリンクを張ればみれるはずです。

【任意のテンプレート】

<img src="{% url 'apl:media' 'sample.jpg' %}" alt="">

補足　画像をアップロードする方法について

この記事では、画像ファイルを格納するディレクトリ「mysite/mymedia/」に画像ファイルが保存されている前提で記事を記載しましたが、画像ファイルをアップロードするディレクトリと「mysite/mymedia/」ディレクトリを同じにすることで、アップロードファイルを表示することができます。

画像をアップロードする方法については以下の記事が分かりやすかったです。
参考にリンクを載せておきます。

404 Not Found

参考

勉強がてらLinuxの環境をちょっと触ってみたい
⇒管理者権限が実行可能なLinuxサーバ環境が構築可能です！
スモールスタートでサービスを提供して、うまくいったら規模をスケールアップしたい
⇒後からメモリサイズやCPU数などのスケールアップ/スケールダウン可能です！
AWSやGCPなどのクラウドサービスは高いので、もっと安くサーバ構築したい
⇒初期費用なし、月数百円(1時間単位も可)で利用可能です！

以上！

目次

ユーザ認証した人だけメディアファイルを表示させるには？

ユーザ認証した人だけ画像を表示するアプリを作成する

手順１ ライブラリのインストール

手順２ 設定ファイルに画像を格納するディレクトリを設定する

手順３ 画像を表示するためのアプリを作成する

手順４ URLconfに画像を表示するためのアプリを設定する

画像が見れるか確認してみる

補足 画像をアップロードする方法について

関連情報

参考

広告

コメント

手順１　ライブラリのインストール

手順２　設定ファイルに画像を格納するディレクトリを設定する

手順３　画像を表示するためのアプリを作成する

手順４　URLconfに画像を表示するためのアプリを設定する

補足　画像をアップロードする方法について