Docker上のDjangoのWEBアプリにSSSのログイン機能を実装する。(23年2月)

- 【概要】
SymbolブロックチェーンにはSSSをいうChrome拡張機能がある。Metamaskみたいに使えて、WEBアプリケーションに署名できたりする。今回はPythonのWEBアプリ用のフレームワークであるDjangoにSSSを利用してログインする機能を試してみたい。とはいうものの、一から作るのではなく、先人の方のファイルをコピーしてDocker上でWEBアプリケーションを立ち上げるところまでを行う。

- 【環境・前提条件】
windows10
WSL 2
Python 3.10.9
Django 4.1.5
SSS-auth 0.0.2
Docker 20.10.22

- 【WSL2 環境構築】
WindowsでDockerを動かすにはWSL2が必要です。
まずはWSL2をインストールします。「windows10 wsl2 インストール」でググれば
やり方は出てくると思いますが、一応、参考にしたリンクは[__こちら__](https://chigusa-web.com/blog/wsl2-win11/)。
1.WidowsPowerShellを管理者権限で実行する。
2.WSL2をインストール```wsl --install```
3.「Windows の機能の有効化または無効化」から「Linux用Windows サブシステム」が有効になっているか確認。
4.Ubuntuの設定
※Ubuntuの設定はしてもしなくてもいいかもしれません。

- 【Docker 環境構築】
1.[__Docker Desktop for Windows__](https://docs.docker.com/desktop/install/windows-install/
)からダウンロード。
2.「Use WSL 2 instead of Hyper-V (recommended)」のチェックを入れをインストール。
3.デスクトップのショートカットからチュートリアルを実施。実際にコンテナを動かしてみます。

- 【SSS拡張機能】
1.[__chrome ウェブストア__](https://chrome.google.com/webstore/detail/sss-extension/llildiojemakefgnhhkmiiffonembcan?hl=ja)からchromeに追加。
2.アカウントをセッティング（[__参照__](https://docs.sss-symbol.com/ja/UsersGuide/AccountSetting)）

- 【サンプルファイルダウンロード】
Githubの[__SafelySignSymbol/django-sss-auth-boilerplate__](https://github.com/SafelySignSymbol/django-sss-auth-boilerplate)からダウンロード。
もしくはクローン。
```https://github.com/SafelySignSymbol/django-sss-auth-boilerplate.git```
実際に使用するフォルダはexampleのフォルダだけです。
中身は[__こちら__](https://github.com/SafelySignSymbol/django-sss-auth-boilerplate/tree/master/example)

- 【ファイル構成】
フォルダの構成を以下のようにします。
pythonフォルダを作成しDjango関連ファイルを移動してください。
1.Dockerfileのpythonバージョンを指定
2.SSS_auth_example/config/setting.pyの秘密鍵などの情報を変更します。
```
SERVER_SECRET = 'Your testnet privatekey'
PUB = "Your testnet publickey"
OWNER = "Your testnet adress"
NETWORK_TYPE = 152 # mainnet: 104, testnet: 152
EXPIRATION_DATE = 60 * 1 * 1 * 1000
```


```
SSS_auth_example
├─ docker-compose.yml
├─ docker
│    ├─ Dockerfile
│    └─ requirements.txt
├─ python
│  ├─ db.sqlite3
│  ├─ manage.py
│  │  
│  ├─ accounts
│  │  ├─ admin.py
│  │  ├─ apps.py
│  │  ├─ models.py
│  │  ├─ tests.py
│  │  ├─ urls.py
│  │  ├─ views.py
│  │  ├─ __init__.py
│  │  │  
│  │  ├─ migrations
│  │  └─__pycache__
│  │
│  ├─ config
│  │  ├─ asgi.py
│  │  ├─ settings.py
│  │  ├─ urls.py
│  │  ├─ views.py
│  │  ├─ wsgi.py
│  │  ├─ __init__.py
│  │  │  
│  │  └─__pycache__
│  │          
│  └─ templates
│      ├─ base.html
│      ├─ home.html
│      ├─ index.html
│      │
│      └─ accounts
│            ├─ login.html
│            └─ signup.html
└─ script
     └─ start.sh
```


- 【Dockerコンテナ起動】
```docker-compose up -d```  で起動します。
```http://localhost:8000```にアクセスします。
![スクリーンショット (203).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794143/756610a9-92e7-9ce3-e483-b12f09f1cbfa.png)


- 【WEBページ】
1.ページ右上のLoginからログインします。
2.成功するとページが切り替わります。
3.missinngをいうメッセージが出る場合、ブラウザを閉じて再度開いてください。
以下、画像を参考にしてください。

![スクリーンショット (202).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794143/77f7032d-7509-504e-2483-3e6523802576.png)

![スクリーンショット (207).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794143/0e5648b0-27a1-3577-0d57-8ccd1bab56e3.png)

![スクリーンショット (208).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794143/d7c1ffc9-ddfe-408c-a4c2-ed4a037e2c7c.png)

![スクリーンショット (209).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1794143/7393f7d0-6de2-6288-b29a-4f47ff34532a.png)

- 【あとがき】
今回はサンプルのサイトを参考にDjangoのWEBアプリケーションにSSSでログインする機能をDocker上に建ててみました。今後、Djangoでdappsを開発される方やSSSを実装してみたい方は試してみてはいかがでしょうか。

- 【引用リンク】
[__SSS Extension(SSS-auth)__](https://docs.sss-symbol.com/ja/category/sss-auth)
[__SafelySignSymbol/django-sss-auth-boilerplate__](https://github.com/SafelySignSymbol/django-sss-auth-boilerplate)
[__WSL を使用して Windows に Linux をインストールする__](https://learn.microsoft.com/ja-jp/windows/wsl/install)
[__Windows に Docker Desktop をインストール__](https://docs.docker.jp/docker-for-windows/install.html)
[__Django documents__](https://docs.djangoproject.com/ja/4.1/)
[__chrome ウェブストア(SSS Extension)__](https://chrome.google.com/webstore/detail/sss-extension/llildiojemakefgnhhkmiiffonembcan?hl=ja)