การทำ Authentication Systems หรือระบบยืนยันตัวตน  เพื่อเป็นการยืนยันว่าผู้ใช้คนนี้เป็นใคร มีสิทธิในการเข้าใช้งานระบบหรือไม่  โดยปกติแล้วสามารถทำได้โดยยืนยันผ่าน Username และ Password ที่ User ได้ทำการลงเบียนหรือ Sign Up ไว้ก่อนหน้า 

แต่ยังมีหนึ่งในวิธีที่ได้รับความนิยมอย่างสูงในปัจจุบัน หลาย ๆ คนคงคุ้นเคยกับการ Log In ผ่านแพลตฟอร์มโซเชียลมีเดียต่าง ๆ เช่น Google, Facebook, GitHub, Twitter, etc ซึ่งทำให้ User ไม่ต้องเสียเวลากรอกข้อมูล Sign Up เพื่อเสียเวลาสมัครหรือสร้างบัญชีใหม่  แทนที่ได้โดยการคลิ๊กไม่กี่คลิ๊กก็สามารถที่จะล็อกอินหน้าเว็บได้แล้ว ซึ่งสะดวกรวดเร็วมาก ๆ และ User ก็ชื่นชอบกันด้วยครับ  และในมุมมองของ Developer นั้นก็ค่อนข้างพัฒนาได้สะดวกและรวดเร็วอย่างยิ่งและยังมีความปลอดภัยสูงเพราะ Google ได้จัดการส่วนนี้ให้เราเรียบร้อย โดยในบทความนี้จะเป็นการสอนใช้งานการล็อกอินหน้าเว็บ Django ด้วย Google กันครับ

จุดประสงค์

1. เข้าใจและอธิบายได้ว่าระบบ Authentication Systems คืออะไร
2. อธิบายได้ว่าทำไมถึงใช้ Social App ในการ Sign In เข้าใช้งาน
3. เข้าใจและสามารถใช้งาน OAuth ได้
4. สร้าง Google API และนำ ID และ SECRET_KEY ต่าง ๆ มาใช้ได้ถูกต้อง
5. ทำ Google Log In โดยใช้ django-allauth ให้กับ Django ได้สำเร็จ

Software & Tools

• Python 3+
• Django 2+
• Visual Studio Code
• django-allauth
• Google OAuth API

OAuth คืออะไร ?

อันดับแรกขออธิบายเกี่ยวกับ 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

1. Login ผ่าน Google ใน Django ทำยังไง ?

การทำ 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 

• ใช้งาน Django Sitemap สำหรับ SEO 
• Django Tips
• Django REST Framework with AJAX

2. สร้าง Django project & Virtual Environment

อย่างแรกเลยก่อนที่จะทำ 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 ก็จะเห็นหน้าตาประมาณนี้

3. ติดตั้ง django-allauth package 

อย่างที่ได้บอกไปว่า  django-allauth  นั้นเป็น package ช่วยจัดการในเรื่องของ Social Login ซึ่งมันก็รองรับหลาย Social Apps เลยนะครับไม่ว่าจะเป็น Facebook, Twitter, Google, Amazon และอื่น ๆ อีกเยอะเลยครับ สามารถเข้าไปอ่านรายละเอียดที่ Documentation หลักได้ที่นี่ django-allauth  โดยในบทความนี้ผมจะพูดในส่วนของ Google Login แค่ตัวเดียวครับอย่างแรกเลยเราก็ต้องติดตั้ง package ก่อนโดยใช้คำสั่ง

(env) pip install django-allauth

4. ตั้งค่าใน settings.py

ในไฟล์  settings.py  ที่อยู่ในโฟลเดอร์  my_site  ซึ่งเป็นโฟลเดอร์หลักของโปรเจกค์ที่เราสร้าง ต้องมีการเพิ่มโค้ดหลายส่วนเลยเพื่อที่จะรองรับตัว   django-allaute  ให้ทำงานได้และจัดการเรื่องของ Authentication ให้เรา

4.1 ติดตั้ง django-allauth ที่ Django App

โดย  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
]

4.2 Authentication Backend

ให้ทำการเพิ่ม 

•  AUTHENTICATION_BACKENDS  

เพื่อเป็นการระบุ Backend ของตัว django-allauth package เพิ่มตามด้านล่างนี้สามารถใส่ไว้ในส่วนล่างสุดของ  settings.py ได้เลยครับ

AUTHENTICATION_BACKENDS = (
 'django.contrib.auth.backends.ModelBackend',
 'allauth.account.auth_backends.AuthenticationBackend',
)

4.3 SITE_ID และ LOGIN_REDIRECT_URL

•  SITE_ID  
•  LOGIN_REDIRECT_URL  

SITE_ID = 2
LOGIN_REDIRECT_URL = '/'

4.4 Social Account Data

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        }
    }
}

5. สร้าง Templates ไว้เป็นหน้าหลักในการ Login

โดย  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>

6. ตั้งค่าที่อยู่ให้กับ URL

from django.contrib import admin
from 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

6. สร้างโปรเจกค์และตั้งค่าใน Google API Console

เมื่อกดสร้างเรียบร้อยแล้วก็จะได้  Client ID  และ  SECRET_KEY  ตามนี้เลย

7. ตั้งค่าใน Django Admin 

เมือเราสร้าง 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.1 เพิ่ม Site ลงในตาราง Sites

• เข้าไปที่ + Add ของตาราง Sites
• แล้วเพิ่ม Domain name: http://127.0.0.1:8000
• และเพิ่ม Display name: http://127.0.0.1:8000
• กด   Save 
  

7.2 เพิ่ม Social app ลงในตาราง Social applications

• เข้าไปที่ + Add ของตาราง Social applications
• เลือก Provider: Google
• Name: Google API
• Client id: (ที่เราสร้างไว้ใน Google API เอามาใส่ในนี้เลย)
• Secret key: (ที่เราสร้างไว้ใน Google API เอามาใส่ในนี้เลย)
• Sites:  http://127.0.0.1:8000 
• กด  Save       

8. ทดลอง Google 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 เข้าไปใหม่ตามนี้

Congrats !!  

บทความนี้มาแนะนำ  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