บทเรียนการพัฒนา Web Application ด้วย Python ร่วมกับ Django โดยจะเป็นการทำ Template สำหรับหน้าเข้าระบบด้วย Firebase Authentication สำหรับผู้เริ่มต้นอยากให้เว็บไซต์มีหน้าแรกสำหรับจัดการข้อมูลโดยใช้ Email และ Password
บทเรียนก่อนหน้านี้:
ตอนนี้เราจะลองไปเปิดระบบ Sign in ผ่าน Authentication ของ Firebase กันสักหน่อยให้เราไปที่
สร้าง Project หรือใช้ Project เก่าของเราก็ได้เปิดขึ้นมา
หลังจากนั้นให้ไปที่ Authentication ในแถบของ Develop ไปเปิด Sign-in Method เพื่อให้ใช้ Email/Password ในการเข้าระบบได้
คราวนี้เราก็กลับมาที่ web cms จากบทเรียนบทที่แล้วกัน ให้เราเปิด Terminal หรือ cmd ขึ้นมาหลังจากนั้นรันคำสั่งต่อไปนี้
|
1 |
$ sudo pip3 install Pyrebase |
เราจะติดตั้ง Package Pryebase มาใช้งานร่วมกับ Django ถ้าติดตั้งเสร็จแล้ว
ไป เพิ่ม Apps ใน Firebase เลือกเป็น Web จะได้ Script ชุดนี้มาทำการ คัดลอกไว้:
ทวนการสร้าง Project ใหม่ของเรากันหน่อยดีกว่า
|
1 |
$ django-admin startproject myweb |
สร้าง Project ขึ้นมาว่า myweb เข้าไปใน Sub ย่อยชื่อ myweb ที่เป็น app ของเรา ทำการ Migrate ไฟล์ manage.py ใหม่ให้กับ Project
|
1 2 |
$ cd myweb $ python3 manage.py migrate |
ออกมาที่ Root folder แล้วทำ
สร้าง Folder ชื่อ templates ขึ้นมา
|
1 |
$ mkdir templates |
ทำการ Touch ไฟล์ views.py
|
1 2 |
$ cd myweb $ touch views.py |
โครงสร้างของ folder project myweb เราจะเป็นดังนี้:
ให้สร้างไฟล์ index.html, main.html และ lignin.html ขึ้นมาใน folder ‘templates’ หลังจากนั้นเปิดหน้า views.py ขึ้นมาใส่คำสั่งต่อไปนี้:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import pyrebase from django.http import HttpResponse from django.shortcuts import render config = { 'apiKey': "AIzaSyDUFgVOBI1mGpoESnvcq6qIE8z2BzSijVE", 'authDomain': "fir-app-68c4f.firebaseapp.com", 'databaseURL': "https://fir-app-68c4f.firebaseio.com", 'projectId': "fir-app-68c4f", 'storageBucket': "fir-app-68c4f.appspot.com", 'messagingSenderId': "239247887438", 'appId': "1:239247887438:web:1ee3d672ee6f8cc466871f" } firebase = pyrebase.initialize_app(config) auth = firebase.auth() def home(request): return render(request, "index.html") def signin(request): return render(request, "signin.html") def result(request): email = request.POST.get('email') password = request.POST.get("pass") try: user = auth.sign_in_with_email_and_password(email, password) except: message = "invalid cerediantials" return render(request, "signin.html",{"msg":message}) print(user) return render(request, "main.html",{"e":email}) |
view จะมี home เป็น การแสดงผลหน้า index.html หรือหน้าแรก ซึ่งเราจะกำหนด Routing คือ “/” ส่วนหน้า Sing-in เราจะใช้ def signin() ไปเรียกแสดงผล signin.html มาแสดง render เว็บ และ result คือหน้าที่จะมี Message ต่างๆ และ template มา render เป็นทางเลือกว่าถ้า เข้าระบบถูกจะไปต่อ main.html ถ้าไม่ก็จะกลับมาที่ signin พร้อม Message ที่รับจาก Firebase
ไปทำ Routing กันหน่อยที่ urls.py
|
1 2 3 4 5 6 7 8 9 |
from django.conf.urls import url from django.contrib import admin from myweb import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^$', views.home), url(r'^signin/', views.signin), url(r'^result/', views.result), ] |
หน้า index.html, signings.html และ main.html ผมจะใช้ https://getmdl.io มาออกแบบ ไฟล์หน้า index.html ใส่ Code HTML ดังนี้:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
{% if msg %} <script> alert('{{msg}}') </script> {% endif %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>Sign-in</title> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link rel='stylesheet' href='https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'> <style> .mdl-layout { align-items: center; justify-content: center; } .mdl-layout__content { padding: 24px; flex: none; } </style> <script> window.console = window.console || function (t) { }; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div class="mdl-layout mdl-js-layout mdl-color--grey-100"> <main class="mdl-layout__content"> <div class="mdl-card mdl-shadow--6dp"> <div class="mdl-card__title mdl-color--primary mdl-color-text--white"> <h2 class="mdl-card__title-text">Firebase Authentication</h2> </div> <div class="mdl-card__actions mdl-card--border"> <h1>Welcome!</h1> <a href="signin" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Please Login</a> </div> </div> </main> </div> <script src='https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js'></script> </body> </html> |
หน้า index.html
ไฟล์หน้า signin.html ใส่ HTML ตามนี้:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
{% if msg %} <script> alert('{{msg}}') </script> {% endif %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>Sign-in</title> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link rel='stylesheet' href='https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'> <style> .mdl-layout { align-items: center; justify-content: center; } .mdl-layout__content { padding: 24px; flex: none; } </style> <script> window.console = window.console || function (t) { }; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div class="mdl-layout mdl-js-layout mdl-color--grey-100"> <main class="mdl-layout__content"> <div class="mdl-card mdl-shadow--6dp"> <div class="mdl-card__title mdl-color--primary mdl-color-text--white"> <h2 class="mdl-card__title-text">Firebase Authentication</h2> </div> <div class="mdl-card__supporting-text"> <form action="/result/" method="POST"> {% csrf_token %} <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="email" id="email" name="email" /> <label class="mdl-textfield__label" for="email">Email Address...</label> </div> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="password" id="pass" name="pass" /> <label class="mdl-textfield__label" for="pass">Password</label> </div> <div class="mdl-card__actions mdl-card--border"> <input type="submit" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" value="Sign-in"/> </div> </form> </div> </div> </main> </div> <script src='https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js'></script> </body> </html> |
หน้า main ก็เป็นหน้าแสดงตารางอะไรก็ว่าไป
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
{% if msg %} <script> alert('{{msg}}') </script> {% endif %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> <title>Sign-in</title> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <link rel='stylesheet' href='https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'> <style> .mdl-layout { align-items: center; justify-content: center; } .mdl-layout__content { padding: 24px; flex: none; } </style> <script> window.console = window.console || function (t) { }; </script> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no"> <div class="mdl-layout mdl-js-layout mdl-color--grey-100"> <main class="mdl-layout__content"> <div class="mdl-card mdl-shadow--6dp"> <div class="mdl-card__title mdl-color--primary mdl-color-text--white"> <h2 class="mdl-card__title-text"> {% csrf_token %} Welcome {{e}} </h2> </div> <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric">Material</th> <th>Quantity</th> <th>Unit price</th> </tr> </thead> <tbody> <tr> <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td> <td>25</td> <td>$2.90</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td> <td>50</td> <td>$1.25</td> </tr> <tr> <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td> <td>10</td> <td>$2.35</td> </tr> </tbody> </table> </div> </main> </div> <script src='https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js'></script> </body> </html> |
หน้า result ของ เว็บไซต์เรา
กลับไปที่ Firebase console ของ Authentication ทำการเพิ่ม Add user ใหม่เข้าไปแล้วกำหนด Email และ Password ตามใจชอบ
ใส่รหัสเข้าไปสักหน่อย
ทดสอบกลับมาที่ views.py ของว่าทำงานได้ไหมให้ run
|
1 |
$ python3 manage.py runserver 0.0.0.0:8000 |
ไปที่ http://localhost:8000/ ทดสอบในการใส่รหัสผ่าน และอีเมลผิดกันก่อน:
ลองใส่ใหม่ให้ถูกต้อง
ผลลัพธ์คือ:
มีอีเมลที่เราสมัครเข้าไปใน Firebase ปรากฏขึ้นมาแสดงผลบนส่วนของ Welcome {{e}}
ลองเอาไปทดลองทำกันดูนะครับ Python
One Comment