前後端分離開發深入解析：用Python Django打造現代登入註冊系統

首先，我們打開Terminal，並切換到專案資料夾下，

cd AlfredWiki

啟動虛擬環境，

source ~/VENV/bin/activate

安裝本次需要的Python模組，

pip3 install pycryptodome

並輸入以下指令建立一個新的APP，名稱為Member所有跟會有相關的驗證都在這邊處理。

python manage.py startapp Member

from Member.urls import urlpatterns as memberUrl

並在檔案最後加入 ，

urlpatterns+=memberUrl

接著開啟Member資料夾，新增一個urls.py，並貼上以下程式碼，

from django.urls import path

urlpatterns = []

三、URL端點資源定義

在採用前後端分離架構的Web應用中，前端通過API與後端進行溝通，這樣的設計模式下，精確定義URL端點資源就變得至關重要。URL端點不僅代表了後端提供的各種服務接口，也是前端與後端交流的關鍵節點。

首先，我們需要設計一個登入頁面的URL端點，這個端點將處理來自使用者登入請求的驗證和授權。其次，一個註冊頁面的URL端點也是必需的，以便使用者能夠創建新的帳戶。在註冊的過程中，後端將會接收到使用者提交的個人信息並處理這些數據，進行必要的驗證並在系統中創建新的用戶紀錄。

除了處理使用者身份的確認和註冊外，我們還需要定義一個專門用於登出的URL端點。該端點將用於清除用戶的Session資訊，確保使用者能夠安全地結束當前的Session。為了完善使用者的體驗，通常還需要一個簡單的首頁URL端點來展示一個成功登入後的歡迎界面或系統狀態的總覽。

結合起來，我們的URL設計將包含以下端點：

• /member/login/ : 理用戶登入請求，提供登入表格且驗證使用者憑據
  • GET : 伺服器回傳登入頁面，Response的Content-Type為text/html
  • POST : 接收使用者傳遞的登入資訊，Request的Content-Type為application/json
• /member/signup/ : 用於使用者的註冊表單提交和新用戶建立
  • GET : 伺服器回傳註冊頁面，Response的Content-Type為text/html
  • POST : 接收使用者傳遞的註冊資訊，Request的Content-Type為application/json
• /member/logout/ : 負責使用者的安全登出功能，登出後重新導向回登入頁
• / : 首頁，在用戶成功登入後顯示歡迎信息或其他內容。

我們遵循RESTful API的在一個端點下透過不同Verbs動詞定義資源，如GET返回登入頁面，POST接收登入資訊。

接著讓我們在Member資料夾下找到urls.py，增加以下內容，注意這段程式碼不要取代掉了from django.urls import path。

from Member.views import login, signup, logout, index

urlpatterns = [
    path('member/login/', login),  # login page
    path('member/signup/', signup),  # signup page
    path('member/logout/', logout),  # logout
    path('', index),
]

一開始我們從Member資料夾下views.py匯入4個function(將在下一節定義)，這些function會處理不同資源傳遞進來的請求。另外我們也將urlpatterns這個list擴充，加入前面規劃的端點。完成這個步驟後，記得要存檔，接下來我們將撰寫處理請求的function。

四、Views.py，視圖，資源請求處理

在前一節中我們在views.py中定義了四個function，login、signup、logout、index。請開啟Member資料夾下views.py，我們要來實作這些function了。

# Member/Views.py login

from django.shortcuts import render
from django.contrib import auth
from django.http import HttpResponseRedirect, JsonResponse
from Member.utils.secure.secureTools import sessionKeyGenerate
from Member.utils.loginSignup.login import loginCheck

import json

def login(request):
    # login page
    if request.method not in ['GET', 'POST']:
        return JsonResponse({'ok': False, 'message': 'Method Not Allowed.'}, status=405)

    if request.user.is_authenticated:
        return HttpResponseRedirect("/")

    if request.method == 'GET':
        session_public_key, session_private_key = sessionKeyGenerate()
        request.session['login_public_key'] = session_public_key
        request.session['login_private_key'] = session_private_key
        context = {
            "spk_client": session_public_key,
        }
        return render(request, 'member/login.html', context=context)

    # call api to login
    body = json.loads(request.body)

    lc = loginCheck()

    lc.decryptBody(body, request.session['login_private_key'])
    if not lc.lsr.ok:
        return JsonResponse({'ok': lc.lsr.ok, 'message': lc.lsr.message}, status=lc.lsr.code)

    lc.process()

    if lc.lsr.ok:
        auth.login(request, lc.lsr.user_obj)

    return JsonResponse({'ok': lc.lsr.ok, 'message': lc.lsr.message}, status=lc.lsr.code)

# Member/utils/secure/secureTools.py

import hmac
from base64 import b64decode
from hashlib import sha1
from urllib import parse

from Member.utils.secure.easyRSA import easyRSA


def sessionKeyGenerate():
    return easyRSA().session_key()


def sessionDecrypted(data_encrypted, session_private_key):
    data_encrypted = parse.unquote(data_encrypted)
    data_encrypted = b64decode(data_encrypted)

    results = {
        "status": "Success",
        "info": ""
    }

    try:
        results["info"] = b64decode(easyRSA().session_decrypted(
            data_encrypted, session_private_key.encode())).decode()
    except:
        results["status"] = "Fail"

    return results


def hmacsha(playerid, pass_ori):
    return hmac.new(playerid.encode(), pass_ori.encode(), sha1).hexdigest()

# Member/utils/secure/easyRSA.py

from Crypto.PublicKey import RSA
from Crypto.Random import get_random_bytes
from Crypto.Cipher import AES, PKCS1_OAEP, PKCS1_v1_5


class easyRSA:
    def session_key(self):
        key = RSA.generate(1024)
        private_key = key.export_key()
        public_key = key.publickey().export_key()

        return public_key.decode('utf-8'), private_key.decode('utf-8')

    def session_encrypted(self, data, session_public_key):
        public_key = RSA.import_key(session_public_key)
        cipher_rsa = PKCS1_v1_5.new(public_key)
        data_encrypted = cipher_rsa.encrypt(data)

        return data_encrypted.hex()

    def session_decrypted(self, data_encrypted, session_private_key):
        private_key = RSA.import_key(session_private_key)
        cipher_rsa = PKCS1_v1_5.new(private_key)
        data_decrypted = cipher_rsa.decrypt(data_encrypted, None)

        return data_decrypted.decode("utf-8")

    def encrypt(self, secret_code, oriText):
        key = RSA.generate(2048)

        encrypted_key = key.export_key(passphrase=secret_code, pkcs=8,
                                       protection="scryptAndAES128-CBC")

        public_key = key.publickey().export_key()

        recipient_key = RSA.import_key(public_key)
        session_key = get_random_bytes(16)
        cipher_rsa = PKCS1_OAEP.new(recipient_key)
        enc_session_key = cipher_rsa.encrypt(session_key)

        cipher_aes = AES.new(session_key, AES.MODE_EAX)
        ciphertext, tag = cipher_aes.encrypt_and_digest(
            oriText.encode("utf-8"))

        res_dict = {
            "public_key": public_key,
            "private_encrypted": encrypted_key,
            "enc_session_key": enc_session_key,
            "secret_code": secret_code,
            "nonce": cipher_aes.nonce,
            "tag": tag,
            "ciphertext_bin": ciphertext,
            "ciphertext_hex": ciphertext.hex(),
        }

        return res_dict

    def decrypt(self, encrypted_key, secret_code, nonce, enc_session_key, ciphertext, tag):
        private_key = RSA.import_key(encrypted_key, passphrase=secret_code)
        cipher_rsa = PKCS1_OAEP.new(private_key)
        session_key = cipher_rsa.decrypt(enc_session_key)
        cipher_aes = AES.new(session_key, AES.MODE_EAX, nonce)
        res = cipher_aes.decrypt_and_verify(ciphertext, tag)

        return res.decode('utf-8')

# Member/utils/loginSignup/fieldVaild.py

import re


class ValidException(Exception):
    def __init__(self, message):
        super().__init__(message)


def usernameVaild(username):
    regex = re.compile(r'([A-Za-z0-9])+')
    if not re.fullmatch(regex, username):
        return False

    return True


def emailVaild(email):
    regex = re.compile(r"[^@]+@[^@]+\.[^@]+")
    if not re.fullmatch(regex, email):
        return False

    return True


def passwordVaild(password):
    if len(password) < 7:
        return False

    regex = re.compile(r'([A-Z]+[a-z]+[0-9]+[!@#$%^&*()_+*/=~])+')
    if not re.fullmatch(regex, password):
        return False

    return True

# Member/utils/loginSignup/loginSignup.py

from abc import ABCMeta, abstractmethod


class loginSignupResult:
    ok = True
    message = "Success."
    user_obj = None
    code = 200

    def setFail(self, message, code):
        self.ok = False
        self.message = message
        self.code = code


class loginSignupBase(metaclass=ABCMeta):
    def __init__(self):
        self.lsr = loginSignupResult()

    @abstractmethod
    def decryptBody(self):
        pass

    @abstractmethod
    def process(self):
        pass

# Member/utils/loginSignup/login.py

from django.contrib import auth
from django.contrib.auth.models import User
import sys
from Member.utils.secure.secureTools import hmacsha, sessionDecrypted
from Member.utils.loginSignup.fieldVaild import emailVaild, ValidException
from Member.utils.loginSignup.loginSignup import loginSignupBase


class loginCheck(loginSignupBase):
    def decryptBody(self, body, login_private_key):
        try:
            userEmail_encrypt = body['userEmail']
            userEmail_decrypt = sessionDecrypted(
                userEmail_encrypt, login_private_key)

            pass_encrypt = body['pass']
            pass_decrypt = sessionDecrypted(pass_encrypt, login_private_key)

            if not userEmail_decrypt['status'] or not pass_decrypt['status']:
                raise

            self.userEmail_decrypt = userEmail_decrypt['info']
            self.isMail = False
            if emailVaild(self.userEmail_decrypt):
                self.isMail = True

            self.pass_decrypt = pass_decrypt['info']
        except ValidException as e:
            self.lsr.setFail(str(e), 400)
        except Exception as e:
            print(e)
            self.lsr.setFail('Invalid Parameter.', 400)

    def process(self):
        try:
            if self.isMail:
                username_tmp = User.objects.get(
                    email=self.userEmail_decrypt
                ).username
            else:
                username_tmp = User.objects.get(
                    username=self.userEmail_decrypt
                ).username

            pass_hash = hmacsha(username_tmp, self.pass_decrypt)

            try:
                user_obj = auth.authenticate(
                    username=username_tmp, password=pass_hash)

                if user_obj is not None:
                    if not user_obj.is_active:
                        self.lsr.setFail("User not active.", 401)
                    else:
                        self.lsr.user_obj = user_obj
                else:
                    self.lsr.setFail("Incorrect login info.", 401)
            except Exception as e:
                exception_type, exception, exc_tb = sys.exc_info()
                print(exception_type, exception, exc_tb)

                self.lsr.setFail(str(e), 401)
        except Exception as e:
            print(e)
            self.lsr.setFail("User not exist.", 401)

# Member/Views.py signup

from Member.utils.loginSignup.signup import signupCheck


def signup(request):
    # signup page
    if request.method not in ['GET', 'POST']:
        return JsonResponse({'ok': False, 'message': 'Method Not Allowed.'}, status=405)

    if request.user.is_authenticated:
        return HttpResponseRedirect("/")

    if request.method == 'GET':
        session_public_key, session_private_key = sessionKeyGenerate()
        request.session['signup_public_key'] = session_public_key
        request.session['signup_private_key'] = session_private_key
        context = {
            "spk_client": session_public_key,
        }
        return render(request, 'member/signup.html', context=context)

    body = json.loads(request.body)

    sc = signupCheck()
    sc.decryptBody(body, request.session['signup_private_key'])

    if not sc.lsr.ok:
        return JsonResponse({'ok': sc.lsr.ok, 'message': sc.lsr.message}, status=sc.lsr.code)

    sc.process()

    return JsonResponse({'ok': sc.lsr.ok, 'message': sc.lsr.message}, status=sc.lsr.code)

# Member/utils/loginSignup/signup.py

from django.contrib.auth.models import User
from django.core.exceptions import ObjectDoesNotExist
from Member.utils.secure.secureTools import hmacsha, sessionDecrypted
from Member.utils.loginSignup.fieldVaild import usernameVaild, emailVaild, passwordVaild, ValidException
from Member.utils.loginSignup.loginSignup import loginSignupBase


class signupCheck(loginSignupBase):
    def decryptBody(self, body, signup_private_key):
        try:
            username_encrypt = body['username']
            username_decrypt = sessionDecrypted(
                username_encrypt, signup_private_key)

            email_encrypt = body['email']
            email_decrypt = sessionDecrypted(email_encrypt, signup_private_key)

            pass_encrypt = body['pass']
            pass_decrypt = sessionDecrypted(pass_encrypt, signup_private_key)

            if not username_decrypt['status'] or not email_decrypt['status'] or not pass_decrypt['status']:
                raise

            self.username_decrypt = username_decrypt['info']
            if not usernameVaild(self.username_decrypt):
                raise ValidException("Invalid username.")

            self.email_decrypt = email_decrypt['info']
            if not emailVaild(self.email_decrypt):
                raise ValidException("Invalid email.")

            self.pass_decrypt = pass_decrypt['info']
            if not passwordVaild(self.pass_decrypt):
                raise ValidException("Invalid password.")

            self.pass_hash = hmacsha(self.username_decrypt, self.pass_decrypt)
        except ValidException as e:
            self.lsr.setFail(str(e), 400)
        except Exception as e:
            self.lsr.setFail('Invalid Parameter.', 400)

    def process(self):
        try:
            User.objects.get(username=self.username_decrypt)

            self.lsr.setFail('Username has been registered.', 400)
        except ObjectDoesNotExist as e:
            print('Username OK')

            try:
                User.objects.get(email=self.email_decrypt)

                self.lsr.setFail('Email has been registered.', 400)
            except ObjectDoesNotExist as e:
                print('Email OK')
            except Exception as e:
                print('Email', e)

                self.lsr.setFail('Invalid Parameter.', 400)
        except Exception as e:
            print('Username', e)

            self.lsr.setFail('Invalid Parameter.', 400)

        if not self.lsr.ok:
            return self.lsr

        try:
            user = User.objects.create_user(
                username=self.username_decrypt, email=self.email_decrypt, password=self.pass_hash)
            user.save()
        except Exception as e:
            self.lsr.setFail('Sign up fail.', 400)

# Member/Views.py logout

def logout(request):
    # logout

    auth.logout(request)

    return HttpResponseRedirect('/member/login/')

# Member/Views.py index

from django.http import HttpResponse
from django.contrib.auth.decorators import login_required

@login_required(login_url='/member/login/')
def index(request):
    return HttpResponse("<style>body{background:black} a{color:white}</style><a href='/member/logout/'>logout</a>")

base.html

在base.html中，我們預留了三個block : custom_head、content、custom_body，後續login.html及signup.html會匯入這個檔案，並填寫這些block，就能夠避免相同程式碼重複出現在多個地方，增加可維護性。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />

  <style>
    body,
    .navbar {
      font-family: "Roboto", Arial, Helvetica, sans-serif;
      background-color: #1f1d22;
      color: aliceblue;
    }

    .navbar {
      background-color: #0f09108a;
      margin: 0 0 50px 0;
    }

    .navbar-brand {
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .navbar-brand>img {
      height: 75px;
      margin-right: 10px;
    }

    .navbar-brand>span {
      color: aliceblue;
      font-size: 30px;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: fit-content;
      padding: 10px 50px 20px 50px;
      box-shadow: 0px -5px 10px #e8edf9, 0px 5px 10px #e8edf9, 0px 3px 8px #e8edf9, 0px 5px 10px #e8edf9;
      border-radius: 20px;
      background: #1c1923;
      margin-bottom: 5vh;
    }

    .container-ele {
      width: 310px;
      margin: 10px 0;
    }

    @media screen and (max-width:768px) {
      .navbar-brand>img {
        height: 60px;
        margin-right: 10px;
      }

      .navbar-brand>span {
        font-size: 20px;
      }
    }

    @media screen and (max-width:431px) {
      .container {
        padding: 30px;
      }

      .container-ele {
        width: 300px;
        margin: 5px 0;
      }
    }

    @media screen and (max-width:415px) {
      .container-ele {
        width: 280px;
      }
    }

    @media screen and (max-width:376px) {
      .container-ele {
        width: 250px;
      }
    }

    h1 {
      font-weight: bolder;
      text-align: center;
    }

    .input-div {
      display: flex;
      display: flex;
      flex-direction: column;
    }

    span {
      font-size: 20px;
    }

    .input-div>input {
      display: block;
      font-size: 1rem;
      font-weight: 400;
      inline-size: 100%;
      box-sizing: border-box;
      border-radius: 4px;
      border: 1px solid #878787;
      padding-inline: 14px;
      padding-block-start: 8px;
      padding-block-end: 8px;
      background-color: #202124;
      color: aliceblue;

    }

    .input-div>input:hover {
      box-shadow: inset 0 0 0 1px #000000;
    }

    .action-btn {
      background-color: #A19FE1;
      color: #000000;
      --bs-btn-hover-color: #000000;
      --bs-btn-hover-bg: #645FCE;
      font-size: 20px;
      border-radius: 500px;
      border: 1px solid #878787;
    }

    .third-login-method {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border-radius: 500px;
      border: 1px solid #878787;
    }

    .third-login-method>img {
      width: 30px;
    }

    .third-login-method>span {
      width: 250px;
    }

    .third-login>a.btn {
      --bs-btn-hover-color: #f8f9fa;
      --bs-btn-hover-bg: #202124;
    }

    hr {
      color: #f8f9fa;
      width: 100%;
    }

    .copyright {
      text-align: center;
      width: 100%;
      font-weight: 100;
      font-family: math;
      color: #8b9399;
      margin-bottom: 2.5vh;
    }
  </style>
  {% block custom_head %}{% endblock %}
</head>

<body>
  {% block content %}{% endblock %}

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"></script>

  <script src="/static/member/js/jsencrypt.min.js"></script>

  <div>
    <div hidden>
      <input id="spk_client" value="{{spk_client}}" name="spk_client">
    </div>
  </div>

  <div class="copyright">
    <span>
      Copyright © 2023 alfred.wiki. All rights reserved.
    </span>
  </div>

  <script>
    let cInfo = function (info, s) {
      let jsEncrypt = new JSEncrypt()
      jsEncrypt.setPublicKey(s)
      let result = jsEncrypt.encrypt(btoa(info))

      return result
    }
  </script>

  {% block custom_body %}{% endblock %}

</body>

</html>

login.html

一開始的extends用途就是匯入base.html，接著我們就各自定義每個區塊所需自定義的內容。

{% extends 'member/base/base.html' %}

{% block content %}
<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href=".">
            <img src="/static/logo.png">
            <span>Alfred's Python Wiki</span>
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

        </div>
    </div>
</nav>

<div class="container">
    <h1 class="container-ele">
        Login
    </h1>

    <div class="container-ele input-div">
        <span>Username/Email</span>
        <input type="text" id="userEmail">
    </div>

    <div class="container-ele input-div">
        <span>Password</span>
        <input type="password" id="pass">
    </div>

    <button class="container-ele btn btn-outline-light action-btn" onclick="login()">Login</button>

    <hr />

    <a class="container-ele btn btn-outline-light third-login-method" href="/member/google/">
        <img src="/static/member/image/googleg_standard_color_128dp.png" />
        <span>Continue With Google</span>
    </a>

    <span>or</span>

    <a class="container-ele btn btn-outline-light third-login-method" href="/member/signup/">
        <span>Sign Up</span>
    </a>
</div>
{% endblock %}

{% block custom_body %}
<script>
    let login = function () {
        let spk_client = document.getElementById("spk_client").value;

        let userEmail = document.getElementById("userEmail").value;
        let pass = document.getElementById("pass").value;

        if (!userEmail | !pass) {
            alert("All fields required!")
        } else {
            data = {
                "userEmail": cInfo(userEmail, spk_client),
                "pass": cInfo(pass, spk_client)
            }

            console.log(data)

            const request = new Request(
                '.',
                {
                    body: JSON.stringify(data),
                    cache: 'no-cache',
                    credentials: 'same-origin',
                    headers: {
                        'content-type': 'application/json',
                    },
                    method: 'POST',
                    mode: 'cors',
                    redirect: 'follow',
                }
            );

            fetch(request)
                .then(response => {
                    console.log(response)
                    if (response.redirected === true) {
                        location.href = response.url;

                        return;
                    } else {
                        if (!response.ok) {
                            info = {
                                "status": response.status,
                                "body": response.json()
                            }

                            return Promise.reject(info);
                        }

                        return response.json();
                    }
                }).then(response => {
                    console.log(response);
                    alert("Login success!")

                    next = new URL(location.href).searchParams.get('next');

                    //console.log("next", next);

                    if (!next) {
                        window.location.href = "/"
                    } else if (next == "/") {
                        window.location.href = "/"
                    } else {
                        window.location.href = next
                    }
                }).catch(function (error) {
                    console.log(error);

                    error.body.then((err) => {
                        alert("Login fail! " + err.message);
                    })
                }).catch(function (error) {
                    console.log(error);
                    alert("Login fail!");
                });
        }
    }
</script>
{% endblock %}

signup.html

比較login.html可以發現，login.html並沒有填寫custom_head這個區塊，預留的區塊如果沒有需要填寫的東西，跳過他即可。

{% extends 'member/base/base.html' %}

{% block custom_head %}
<style>
    .hint {
        color: #c82525;
        font-size: small;
    }
</style>
{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href=".">
            <img src="/static/logo.png">
            <span>Alfred's Python Wiki</span>
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

        </div>
    </div>
</nav>

<div class="container">
    <h1 class="container-ele">
        Sign Up
    </h1>

    <div class="container-ele input-div">
        <span>User Name</span>
        <input type="text" id="username" placeholder="Combination of uppercase and lowercase letters and numbers">
    </div>

    <div class="container-ele input-div">
        <span>Email</span>
        <input type="text" id="email" placeholder="[email protected]">
    </div>

    <div class="container-ele input-div">
        <span>Password</span>

        <span class="hint">
            At least 7 character. Combination of uppercase and lowercase letters, symbols and numbers.
        </span>
        <input type="password" id="pass1" placeholder="Follow hint above.">
    </div>

    <div class="container-ele input-div">
        <span>Password(Again)</span>
        <input type="password" id="pass2" placeholder="Again">
    </div>

    <button class="container-ele btn btn-outline-light action-btn" onclick="signup()">Sign Up</button>

    <hr />

    <a class="container-ele btn btn-outline-light third-login-method" href="/member/google/">
        <img src="/static/member/image/googleg_standard_color_128dp.png" />
        <span>Continue With Google</span>
    </a>

    <span>or</span>

    <a class="container-ele btn btn-outline-light third-login-method" href="/member/login/">
        <span>Log In</span>
    </a>
</div>
{% endblock %}

{% block custom_body %}
<script>
    let signup = function () {
        let spk_client = document.getElementById("spk_client").value;

        let username = document.getElementById("username").value;
        let email = document.getElementById("email").value;
        let pass1 = document.getElementById("pass1").value;
        let pass2 = document.getElementById("pass2").value;

        if (!username | !email | !pass1 | !pass2) {
            alert("All fields required!");
        } else if (pass1 != pass2) {
            alert("Password not correspond!");
        } else {
            data = {
                "username": cInfo(username, spk_client),
                "email": cInfo(email, spk_client),
                "pass": cInfo(pass1, spk_client)
            }

            console.log(data)

            const request = new Request(
                '.',
                {
                    body: JSON.stringify(data),
                    cache: 'no-cache',
                    credentials: 'same-origin',
                    headers: {
                        'content-type': 'application/json',
                    },
                    method: 'POST',
                    mode: 'cors',
                    redirect: 'follow',
                }
            );

            fetch(request)
                .then(response => {
                    console.log(response)
                    if (response.redirected === true) {
                        location.href = response.url;

                        return;
                    } else {
                        if (!response.ok) {
                            info = {
                                "status": response.status,
                                "body": response.json()
                            }

                            return Promise.reject(info);
                        }

                        return response.json();
                    }
                }).then(response => {
                    console.log(response);
                    alert("Sign up success! Please login.")

                    window.location.href = "/member/login/"
                }).catch(function (error) {
                    console.log(error);

                    error.body.then((err) => {
                        alert("Sign up fail! " + err.message);
                    })
                }).catch(function (error) {
                    console.log(error);
                    alert("Sign up fail!");
                });
        }
    }
</script>
{% endblock %}

六、讓網站運行

首先，我們打開Terminal，並啟動虛擬環境：

source ~/VENV/bin/activate

切換到專案資料夾：

cd AlfredWiki

如果是第一次執行，我們需要先透過指令在MySQL建立Table，未來每當你的資料庫有新的表需要建立時都需要執行這段程式碼：

python manage.py migrate

讓網站開始運行：

python manage.py runserver

接著，我們在ubuntu中開啟terminal上的url，http://127.0.0.1:8000：

成功的話應該會直接跳轉到登入頁，跟前面提到未登入自動跳轉到登入頁效果相同，眼尖的各位應該會發現有一個Continue With Google的按鈕，可以參考<Python Django 深度教學：OAuth 2.0 手動串接Google登入認證>這篇文章。

由於目前還沒有註冊任何使用者，所以請點擊註冊按鈕前往註冊，跟登入頁一樣可以Continue With Google。在User Name上這邊限制只能有大小寫英文字母及數字，密碼也要求大小寫英文字母、數字及符號，增加安全性。

註冊完成後可嘗試登入，登入可使用Username及Email，如果登入成功會出現logout連結，點擊後可登出，並重新導向至登入頁。