การทำ Authentication Systems หรือระบบยืนยันตัวตน เพื่อเป็นการยืนยันว่าผู้ใช้คนนี้เป็นใคร มีสิทธิในการเข้าใช้งานระบบหรือไม่ โดยปกติแล้วสามารถทำได้โดยยืนยันผ่าน Username และ Password ที่ User ได้ทำการลงเบียนหรือ Sign Up ไว้ก่อนหน้า
แต่ยังมีหนึ่งในวิธีที่ได้รับความนิยมอย่างสูงในปัจจุบัน หลาย ๆ คนคงคุ้นเคยกับการ Log In ผ่านแพลตฟอร์มโซเชียลมีเดียต่าง ๆ เช่น Google, Facebook, GitHub, Twitter, etc ซึ่งทำให้ User ไม่ต้องเสียเวลากรอกข้อมูล Sign Up เพื่อเสียเวลาสมัครหรือสร้างบัญชีใหม่ แทนที่ได้โดยการคลิ๊กไม่กี่คลิ๊กก็สามารถที่จะล็อกอินหน้าเว็บได้แล้ว ซึ่งสะดวกรวดเร็วมาก ๆ และ User ก็ชื่นชอบกันด้วยครับ และในมุมมองของ Developer นั้นก็ค่อนข้างพัฒนาได้สะดวกและรวดเร็วอย่างยิ่งและยังมีความปลอดภัยสูงเพราะ Google ได้จัดการส่วนนี้ให้เราเรียบร้อย โดยในบทความนี้จะเป็นการสอนใช้งานการล็อกอินหน้าเว็บ Django ด้วย Google กันครับ
จุดประสงค์
อันดับแรกขออธิบายเกี่ยวกับ OAuth อย่างง่าย ๆ ว่านี่คือตัวช่วยที่สามารถช่วยให้ Login Applications อื่น ๆ ได้โดยใช้ Social Account เช่น Google account, Facebook account และยังสามารถให้สิทธิ์ในการเข้าถึงข้อมูลกับ Application อื่น ๆ ได้อีกด้วย เช่น เราต้องการรูปของผู้ใช้ Google Account ผู้ใช้ก็สามารถให้สิทธิ์ Application ไปขอรูปใน Google Account เราได้แล้วก็นำรูปไปใช้และยังมีข้อมูลหลาย ๆ อย่างที่ Application สามารถขอมาใช้ได้ โดยสิ่งที่ทำให้ Application สามารถยืนยันผู้ใช้ได้ว่าเป็นใครคือ Access Token ที่ได้มาเมื่อผู้ใช้ผ่านการ Authentication มาเรียบร้อยแล้วก็ใช้ Token ตัวนี้แหละครับในการระบุตัวตนแทน username และ password เพื่อความปลอดภัยของผู้ใช้ด้วยและสำหรับผู้พัฒนาก็ไม่จำเป็นต้องเขียนระบบ Authentication เองทำให้การพัฒนาเร็วขึ้นและปลอดภัยมากยิ่งขึ้นโดยตอนนี้ที่ใช้กันเป็นมาตรฐานคือ OAuth 2.0
ภาพด้านล่างคือตัวอย่างของเว็บไซต์ Medium ที่ทำให้เราสามารถลงชื่อเช้าใช้งาน (Sign in) ได้โดยไม่ต้องกรอกแบบฟอร์มข้อมูลต่าง ๆ ให้ยุ่งยากหรือเสียเวลา สามารถใช้บัญชีแอปพลิเคชันต่าง ๆ ที่มีอยู่เพื่อเข้าใช้งานได้ทันที
ตัวอย่างการ Sign in ผ่าน Social แพลตฟอร์มต่าง ๆ ก่อนใช้งาน Medium
การทำ OAuth เป็นเรื่องที่นิยมมากในปัจจุบันเพราะเราไม่ต้องกังวลเกี่ยวกับการทำ Authentication ให้กับ Social App เป็นตัวทำ Authentication ให้กับ app แถมยังสามารถเก็บข้อมูลที่จำเป็นไว้ใช้งานได้อีกด้วยเช่น ชื่อ Email รูป และ สามารระบุตัวตนของผู้ใช้โดยใช้ token ที่ Social App เป็นตัวที่จะ gen มาให้กับ app เพื่อระบุตัวตนผู้ใช้งานและเพื่อความปลอดภัยอีกด้วย ในส่วนของ Django นั้นสามารถทำ Social login ได้อย่างง่ายโดยนำ package ที่มีการพัฒนาไว้แล้วมาใช้ซึ่งมีชื่อว่า django-allauth จะเป็นตัวจัดการในการ Login และเก็บข้อมูลของ User ลงใน Database เราจะมีตาราง User อยู่ในระบบโดยที่เราไม่ต้องเขียนอะไรใหม่ แค่เรียกตัวนี้มาใช้ได้เลย และวันนี้เราจะมาทดลองทำ Social Login กันดูว่ามันจะง่ายเหมือนที่กล่าวไว้หรือไม่
บทความแนะนำสำหรับ Django
อย่างแรกเลยก่อนที่จะทำ Social Login ต้องสร้างโปรเจกต์สักก่อนโดยเริ่มจากการสร้าง Virtual environment เพื่อที่จะเอา package ที่เกี่ยวข้องต่าง ๆ มาเก็บไว้ในนี้เพื่อให้ง่ายต่อการพัฒนาและไม่ต้องกังวลเรื่องของการซ้อนทับของพวก package กันเอง มาสร้างกันเลยดีกว่าโดยใช้คำสั่ง
$ python -m pip install --user virtualenv
$ python -m venv env
โดยเราจะได้โฟลเดอร์ env ที่สร้างใหม่ขึ้นมาเพื่อที่จะใช้เป็น Virtual Environment โดยจำเป็นต้อง activate ก่อนใช้โดยใช้คำสั่งตามนี้
Linux and OS X source env/bin/activate Window .\env\Scripts\activate
หลังจาก activate เรียบร้อยแล้วก็สามารถที่จะ Install Django และสร้าง Django project ได้แล้วโดยพิมพ์คำสั่งตามนี้
(env) pip install django
(env) django-admin startproject my_site
(env) cd my_site
(env) python manage.py startapp login_page
(env) python manage.py migrate
(env) python manage.py runserver
สามารถที่จะเข้าไปดูหน้าเว็บที่เราสร้างได้โดยไปที่ http://127.0.0.1:8000 ก็จะเห็นหน้าตาประมาณนี้
อย่างที่ได้บอกไปว่า django-allauth นั้นเป็น package ช่วยจัดการในเรื่องของ Social Login ซึ่งมันก็รองรับหลาย Social Apps เลยนะครับไม่ว่าจะเป็น Facebook, Twitter, Google, Amazon และอื่น ๆ อีกเยอะเลยครับ สามารถเข้าไปอ่านรายละเอียดที่ Documentation หลักได้ที่นี่ django-allauth โดยในบทความนี้ผมจะพูดในส่วนของ Google Login แค่ตัวเดียวครับอย่างแรกเลยเราก็ต้องติดตั้ง package ก่อนโดยใช้คำสั่ง
(env) pip install django-allauth
ในไฟล์ settings.py ที่อยู่ในโฟลเดอร์ my_site ซึ่งเป็นโฟลเดอร์หลักของโปรเจกค์ที่เราสร้าง ต้องมีการเพิ่มโค้ดหลายส่วนเลยเพื่อที่จะรองรับตัว django-allaute ให้ทำงานได้และจัดการเรื่องของ Authentication ให้เรา
โดย INSTALLED_APPS เป็นที่แรกที่เราต้องแก้ไขโดยต้องเพิ่ม App ที่เราเพิ่งติดตั้งเข้าไปตามนี้
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'django.contrib.sites', # New 'login_page', # New 'allauth', # New 'allauth.account', # New 'allauth.socialaccount', # New 'allauth.socialaccount.providers.google', # New ]
ให้ทำการเพิ่ม
เพื่อเป็นการระบุ Backend ของตัว django-allauth package เพิ่มตามด้านล่างนี้สามารถใส่ไว้ในส่วนล่างสุดของ settings.py ได้เลยครับ
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
)
SITE_ID = 2 LOGIN_REDIRECT_URL = '/'
SOCIALACCOUNT_PROVIDERS = { 'google': { 'SCOPE': [ 'profile', 'email', ], 'AUTH_PARAMS': { 'access_type': 'online', } } }
โดย templates นั้นเราต้องสร้างให้อยู่ในโฟลเดอร์ login_page และโดยจะมี 2 โฟลเดอร์ 1 ไฟล์ที่เราต้องสร้างดังนี้ templates --> login_page --> index.html ถ้าเป็นรูปก็ตามนี้ครับ
{% load socialaccount %} <html> <head> <title>Login page</title> </head> <body> {% if user.is_authenticated %} <h1>Welcome, {{ user.username }} !</h1> {% else %} <h1>Login Page</h1> <button onclick="document.location='{% provider_login_url 'google' %}'"> Login with Google </button> {% endif %} </body> </html>
from django.contrib import adminfrom django.urls import path, include # New
from django.views.generic import TemplateView # New urlpatterns = [ path('admin/', admin.site.urls), path('', TemplateView.as_view(template_name="login_page/index.html")), # New path('accounts/', include('allauth.urls')), # New ]
(env) python manage.py makemigrations (env) python manage.py migrate
เมือเราสร้าง OAuth Client ID เสร็จแล้วเราต้องนำ Client ID และ SECRET_KEY ไปเพิ่มใน admin โดยตัว django-allauth ทำให้ตั้งค่าง่ายที่สุดโดยก่อนที่เราจะไปตั้งค่าใน admin ต้องมี superuser ก่อนสามารถสร้างด้วยคำสั่งนี้เลย
(env) python manage.py createsuperuser
โดยจะมีให้เรากรอก Username, Email และ Password ก็สามารถกรอกได้ตามสะดวกเลยครับในส่วนของ Email จะใส่ไม่ใส่ก็ได้ครับเมื่อสร้างเสร็จแล้วก็ run server ได้เลยเพื่อที่จะเข้าไปจัดการในหน้า admin
(env) python manage.py runserver
เข้าไปที่ http://127.0.0.1:8000/admin แล้ว Login ด้วยรหัสที่เราสร้างขึ้นมาได้เลยครับแล้วจะเจอกับหน้านี้
หลังจากทำมาทั้งสิ้น 7 ขั้นตอน ตอนนี้เว็บเราก็พร้อมสำหรับการ Login ด้วย Google Account แล้วครับ ทำการรันเซิร์ฟเวอร์แล้วไปดูผลลัพธ์กันดีกว่าครับ (ไปที่หน้าแรก http://127.0.0.1:8000/)
คลิ๊กไปที่ Login with Google ถ้าทำสำเร็จไม่ผิดพลาดอะไรก็จะขึ้นหน้าให้เลือกบัญชีแบบนี้
เมื่อเรา Login สำเร็จ ก็จะ Redirect มายังหน้านี้ซึ่งเป็นหน้าแรกที่เราเขียนไว้ แต่การแสดงผลแตกต่างเมื่อมีการ Login สำเร็จแล้ว
เท่านี้ก็สามารถที่จะ Login ด้วย Google Account ได้แล้วนะครับสำหรับ User ที่ Login เข้ามาใหม่ทางตัว django-allauth นั้นก็จะเก็บข้อมูล User ลงไว้ใน Database ของเราอยู่ในตาราง Users ถ้าทดลองเข้าหน้า Admin และไปที่ตาราง Users ก็จะเห็นข้อมูล User ที่พึ่ง Login เข้าไปใหม่ตามนี้
บทความนี้มาแนะนำ django-allauth สุดยอด Package ที่ทำให้เราสามารถทำ Google Login ได้อย่างง่ายดายไม่ต้องจัดการอะไรเยอะโดยฝั่ง Authentication ให้ Google จัดการแทน ซึ่งปลอดภัยมาก ๆ ที่สำคัญสะดวกและง่ายสุด ๆ
สำหรับบทความนี้ขอบคุณทุกคนมากนะครับที่สนใจถ้ามีอะไรติชมก็สามารถคอมเมนต์ได้เลยครับและสุดท้ายฝากติดตามผลงานอื่น ๆ ของพวกเรา Stackpython ด้วยนะครับ
Follow us on
Medium: STACKPYTHON
Youtube: STACKPYTHON
| Like | Comment | Share | >> STACKPYTHON
Reference
[ Medium ] - In 5 mins: Set up Google login to sign up users on Django | by Zoe Chew | Medium
การเริ่มต้นสร้างโปรเจค gui ด้วย python library อย่าง tkinter
March 1, 2021
การออกแบบหน้าตาโปรแกรม gui ของเราด้วย method อย่าง pack grid layout
March 1, 2021
ทดสอบสร้าง GUI ด้วย Python โดยนี่คืออีกหนึ่ง library ที่น่าสนใจครับ มีชื่อว่า easyGUI
Feb. 20, 2021
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 2,500 1,250 บาท
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 9,900 บาท
คอร์สนี้เป็นหนึ่งในคอร์สที่มาแรงที่สุดของปีนี้ในส่วนของ Python Web Development
฿ 2,500 บาท