**Series Navigation:** - [Bài 7.1: Authentication Basics](/django-advance/authentication-drf-phan-1) - [Bài 7.2: Token Authentication Advanced](/django-advance/authentication-drf-phan-2) - [Bài 7.3: JWT Authentication](/django-advance/authentication-drf-phan-3) - **Bài 7.4 (bài này): OAuth2 & Social Auth** 👈

Mục Tiêu Bài 7.4

Sau khi hoàn thành Bài 7.4 này, bạn sẽ:

✅ Hiểu OAuth2 flow
✅ Setup django-allauth
✅ Implement social login (Google, Facebook, GitHub)
✅ Use dj-rest-auth for API endpoints
✅ Handle social authentication tokens
✅ Customize social account data
✅ Test social authentication
✅ Apply security best practices

OAuth2 Overview

What is OAuth2?

OAuth2 = Authorization framework cho phép apps truy cập user resources từ third-party services.

Use cases:

"Login with Google"
"Login with Facebook"
"Connect GitHub account"
API authorization

OAuth2 Roles

1. Resource Owner: User (owns the data)2. Client: Your application3. Authorization Server: Google/Facebook/GitHub4. Resource Server: Google/Facebook/GitHub API

OAuth2 Flow

Authorization Code Flow (most common):

1. User clicks "Login with Google"   ↓2. Redirect to Google login page   ↓3. User authorizes app   ↓4. Google redirects back with authorization code   ↓5. Your app exchanges code for access token   ↓6. Use access token to get user info   ↓7. Create/login user in your app

Diagram:

User                    Your App              Google  |                         |                    |  |--"Login with Google"--->|                    |  |                         |---Redirect-------->|  |<-------Login Page----------------------------|  |---Authorize------------>|                    |  |                         |<--Auth Code--------|  |                         |---Exchange Code--->|  |                         |<--Access Token-----|  |                         |---Get User Info--->|  |                         |<--User Data--------|  |<---JWT/Session Token----|                    |

OAuth2 Grant Types

1. Authorization Code (most secure)

For web apps with backend
Two-step: code → token

2. Implicit (deprecated)

For SPAs (not recommended)
Token in URL fragment

3. Client Credentials

For machine-to-machine
No user involved

4. Password (not recommended)

Username/password exchange
Only for trusted apps

django-allauth Setup

Installation

pip install django-allauth

Configuration

# settings.pyINSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',        # allauth    'django.contrib.sites',    'allauth',    'allauth.account',    'allauth.socialaccount',        # social providers    'allauth.socialaccount.providers.google',    'allauth.socialaccount.providers.facebook',    'allauth.socialaccount.providers.github',        # rest framework    'rest_framework',    'rest_framework.authtoken',] SITE_ID = 1 MIDDLEWARE = [    # ...    'allauth.account.middleware.AccountMiddleware',] # allauth settingsAUTHENTICATION_BACKENDS = [    'django.contrib.auth.backends.ModelBackend',    'allauth.account.auth_backends.AuthenticationBackend',] ACCOUNT_EMAIL_REQUIRED = TrueACCOUNT_USERNAME_REQUIRED = FalseACCOUNT_AUTHENTICATION_METHOD = 'email'ACCOUNT_EMAIL_VERIFICATION = 'optional' SOCIALACCOUNT_PROVIDERS = {    'google': {        'SCOPE': [            'profile',            'email',        ],        'AUTH_PARAMS': {            'access_type': 'online',        }    },    'facebook': {        'METHOD': 'oauth2',        'SCOPE': ['email', 'public_profile'],        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},        'FIELDS': [            'id',            'email',            'name',            'first_name',            'last_name',            'verified',            'locale',            'timezone',            'link',            'gender',            'updated_time',        ],        'EXCHANGE_TOKEN': True,        'VERIFIED_EMAIL': False,    },    'github': {        'SCOPE': [            'user',            'repo',            'read:org',        ],    }}

URLs

# urls.pyfrom django.urls import path, include urlpatterns = [    path('admin/', admin.site.urls),    path('accounts/', include('allauth.urls')),]

Migrate

python manage.py migrate

Google OAuth2

1. Create OAuth credentials:

Go to https://console.cloud.google.com/
Create project
Enable Google+ API
Create OAuth 2.0 Client ID
Add authorized redirect URIs:
- http://localhost:8000/accounts/google/login/callback/

2. Add to Django admin:

# In Django admin:# Sites > example.com > Domain: localhost:8000 # Social applications > Add social application:# Provider: Google# Name: Google OAuth# Client ID: <your-client-id># Secret key: <your-secret-key># Sites: Select your site

3. Test:

Visit: http://localhost:8000/accounts/google/login/

1. Create Facebook App:

Go to https://developers.facebook.com/
Create App
Add Facebook Login product
Settings > Basic:
- App ID
- App Secret
Facebook Login > Settings:
- Valid OAuth Redirect URIs:
  - http://localhost:8000/accounts/facebook/login/callback/

2. Add to Django admin:

# Social applications > Add social application:# Provider: Facebook# Name: Facebook OAuth# Client ID: <app-id># Secret key: <app-secret># Sites: Select your site

GitHub OAuth

1. Create GitHub OAuth App:

Go to https://github.com/settings/developers
New OAuth App
Application name: Your App
Homepage URL: http://localhost:8000
Authorization callback URL:
- http://localhost:8000/accounts/github/login/callback/

2. Add to Django admin:

# Social applications > Add social application:# Provider: GitHub# Name: GitHub OAuth# Client ID: <client-id># Secret key: <client-secret># Sites: Select your site

dj-rest-auth Integration

Installation

pip install dj-rest-auth[with_social]

Configuration

# settings.pyINSTALLED_APPS = [    # ...    'rest_framework',    'rest_framework.authtoken',    'dj_rest_auth',    'dj_rest_auth.registration',        # allauth    'django.contrib.sites',    'allauth',    'allauth.account',    'allauth.socialaccount',        # social providers    'allauth.socialaccount.providers.google',    'allauth.socialaccount.providers.facebook',    'allauth.socialaccount.providers.github',] REST_FRAMEWORK = {    'DEFAULT_AUTHENTICATION_CLASSES': [        'rest_framework.authentication.TokenAuthentication',    ]} # Optional: Use JWT instead of tokensREST_USE_JWT = TrueJWT_AUTH_COOKIE = 'jwt-auth'

URLs

# urls.pyfrom django.urls import path, include urlpatterns = [    path('api/auth/', include('dj_rest_auth.urls')),    path('api/auth/registration/', include('dj_rest_auth.registration.urls')),    path('api/auth/social/', include('allauth.socialaccount.urls')),]

Available endpoints:

POST /api/auth/login/                    → LoginPOST /api/auth/logout/                   → LogoutPOST /api/auth/registration/             → RegisterPOST /api/auth/password/reset/           → Reset passwordPOST /api/auth/password/reset/confirm/   → Confirm resetPOST /api/auth/password/change/          → Change passwordGET  /api/auth/user/                     → Current user # Social authGET  /api/auth/social/google/login/      → Google loginGET  /api/auth/social/facebook/login/    → Facebook loginGET  /api/auth/social/github/login/      → GitHub login

Web Flow (Django Templates)

1. User clicks "Login with Google":

<!-- login.html --><a href="{% url 'google_login' %}">    <button>Login with Google</button></a>

2. Redirects to Google:

http://localhost:8000/accounts/google/login/→ Redirects to Google OAuth page

3. User authorizes:

User logs in and grants permissions

4. Callback:

Google redirects to:http://localhost:8000/accounts/google/login/callback/?code=xxx Django creates/logs in user

API Flow (SPA/Mobile)

For SPAs and mobile apps:

1. Frontend gets authorization code:

// Frontend redirects to Googleconst googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=profile email`; window.location.href = googleAuthUrl; // Google redirects back with code// http://localhost:3000/callback?code=xxx

2. Send code to backend:

// Extract code from URLconst urlParams = new URLSearchParams(window.location.search);const code = urlParams.get('code'); // Send to backendfetch('http://localhost:8000/api/auth/google/', {    method: 'POST',    headers: {        'Content-Type': 'application/json',    },    body: JSON.stringify({        code: code,    })});

3. Backend exchanges code for token:

# views.pyfrom allauth.socialaccount.providers.google.views import GoogleOAuth2Adapterfrom dj_rest_auth.registration.views import SocialLoginView class GoogleLogin(SocialLoginView):    adapter_class = GoogleOAuth2Adapter

4. Response:

{    "key": "token-here",    "user": {        "id": 1,        "email": "user@example.com",        "first_name": "John",        "last_name": "Doe"    }}

# views.pyfrom rest_framework.decorators import api_view, permission_classesfrom rest_framework.permissions import AllowAnyfrom rest_framework.response import Responsefrom rest_framework import statusfrom allauth.socialaccount.models import SocialAccountfrom allauth.socialaccount.providers.google.views import GoogleOAuth2Adapterfrom dj_rest_auth.registration.views import SocialLoginViewfrom django.contrib.auth.models import Userimport requests class GoogleLogin(SocialLoginView):    adapter_class = GoogleOAuth2Adapter @api_view(['POST'])@permission_classes([AllowAny])def google_login(request):    """    Custom Google login endpoint    Accepts: access_token from Google    """    access_token = request.data.get('access_token')        if not access_token:        return Response({'error': 'access_token required'}, status=400)        # Verify token with Google    google_response = requests.get(        'https://www.googleapis.com/oauth2/v3/userinfo',        params={'access_token': access_token}    )        if google_response.status_code != 200:        return Response({'error': 'Invalid access token'}, status=400)        google_data = google_response.json()        # Get or create user    email = google_data.get('email')        try:        user = User.objects.get(email=email)    except User.DoesNotExist:        user = User.objects.create_user(            username=email,            email=email,            first_name=google_data.get('given_name', ''),            last_name=google_data.get('family_name', ''),        )                # Create social account        SocialAccount.objects.create(            user=user,            provider='google',            uid=google_data.get('sub'),            extra_data=google_data        )        # Generate token    from rest_framework.authtoken.models import Token    token, _ = Token.objects.get_or_create(user=user)        return Response({        'token': token.key,        'user': {            'id': user.id,            'email': user.email,            'first_name': user.first_name,            'last_name': user.last_name,        }    })

# views.py@api_view(['POST'])@permission_classes([AllowAny])def facebook_login(request):    """    Facebook login with access_token    """    access_token = request.data.get('access_token')        if not access_token:        return Response({'error': 'access_token required'}, status=400)        # Verify token with Facebook    fb_response = requests.get(        'https://graph.facebook.com/me',        params={            'access_token': access_token,            'fields': 'id,email,first_name,last_name,picture'        }    )        if fb_response.status_code != 200:        return Response({'error': 'Invalid access token'}, status=400)        fb_data = fb_response.json()        # Get or create user    email = fb_data.get('email')        if not email:        return Response({'error': 'Email not provided by Facebook'}, status=400)        user, created = User.objects.get_or_create(        email=email,        defaults={            'username': email,            'first_name': fb_data.get('first_name', ''),            'last_name': fb_data.get('last_name', ''),        }    )        # Create/update social account    SocialAccount.objects.update_or_create(        user=user,        provider='facebook',        defaults={            'uid': fb_data.get('id'),            'extra_data': fb_data        }    )        # Generate token    from rest_framework.authtoken.models import Token    token, _ = Token.objects.get_or_create(user=user)        return Response({        'token': token.key,        'user': {            'id': user.id,            'email': user.email,            'first_name': user.first_name,            'last_name': user.last_name,            'picture': fb_data.get('picture', {}).get('data', {}).get('url'),        }    })

# views.py@api_view(['POST'])@permission_classes([AllowAny])def github_login(request):    """    GitHub login with access_token    """    access_token = request.data.get('access_token')        if not access_token:        return Response({'error': 'access_token required'}, status=400)        # Get user info from GitHub    headers = {'Authorization': f'token {access_token}'}        user_response = requests.get('https://api.github.com/user', headers=headers)    if user_response.status_code != 200:        return Response({'error': 'Invalid access token'}, status=400)        github_data = user_response.json()        # Get email (may require separate request)    email = github_data.get('email')    if not email:        email_response = requests.get('https://api.github.com/user/emails', headers=headers)        if email_response.status_code == 200:            emails = email_response.json()            primary_email = next((e for e in emails if e['primary']), None)            email = primary_email['email'] if primary_email else None        if not email:        return Response({'error': 'Email not provided by GitHub'}, status=400)        # Get or create user    user, created = User.objects.get_or_create(        email=email,        defaults={            'username': github_data.get('login', email),            'first_name': github_data.get('name', '').split()[0] if github_data.get('name') else '',        }    )        # Create/update social account    SocialAccount.objects.update_or_create(        user=user,        provider='github',        defaults={            'uid': str(github_data.get('id')),            'extra_data': github_data        }    )        # Generate token    from rest_framework.authtoken.models import Token    token, _ = Token.objects.get_or_create(user=user)        return Response({        'token': token.key,        'user': {            'id': user.id,            'email': user.email,            'username': user.username,            'avatar': github_data.get('avatar_url'),        }    })

Frontend Integration

React Example

// GoogleLogin.jsimport React from 'react';import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google'; function GoogleLoginButton() {    const handleSuccess = async (credentialResponse) => {        // Send ID token to backend        const response = await fetch('http://localhost:8000/api/auth/google/', {            method: 'POST',            headers: {                'Content-Type': 'application/json',            },            body: JSON.stringify({                access_token: credentialResponse.credential            })        });                const data = await response.json();                // Save token        localStorage.setItem('token', data.token);                // Redirect to dashboard        window.location.href = '/dashboard';    };        return (        <GoogleOAuthProvider clientId="YOUR_CLIENT_ID">            <GoogleLogin                onSuccess={handleSuccess}                onError={() => console.log('Login Failed')}            />        </GoogleOAuthProvider>    );}

Vue.js Example

<!-- GoogleLogin.vue --><template>  <div>    <button @click="loginWithGoogle">Login with Google</button>  </div></template> <script>export default {  methods: {    loginWithGoogle() {      const clientId = 'YOUR_CLIENT_ID';      const redirectUri = 'http://localhost:8080/callback';      const scope = 'profile email';            const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}`;            window.location.href = authUrl;    },        async handleCallback() {      // In callback component      const urlParams = new URLSearchParams(window.location.search);      const code = urlParams.get('code');            const response = await fetch('http://localhost:8000/api/auth/google/', {        method: 'POST',        headers: {          'Content-Type': 'application/json',        },        body: JSON.stringify({ code })      });            const data = await response.json();      localStorage.setItem('token', data.token);    }  }}</script>

Custom User Data

# signals.pyfrom django.dispatch import receiverfrom allauth.socialaccount.signals import pre_social_loginfrom allauth.socialaccount.models import SocialAccount @receiver(pre_social_login)def populate_user_profile(sender, request, sociallogin, **kwargs):    """    Populate user profile with social data    """    user = sociallogin.user        if sociallogin.account.provider == 'google':        data = sociallogin.account.extra_data        user.first_name = data.get('given_name', '')        user.last_name = data.get('family_name', '')                # Custom profile fields        if hasattr(user, 'profile'):            user.profile.avatar_url = data.get('picture', '')            user.profile.save()        elif sociallogin.account.provider == 'facebook':        data = sociallogin.account.extra_data        user.first_name = data.get('first_name', '')        user.last_name = data.get('last_name', '')                if hasattr(user, 'profile'):            picture = data.get('picture', {}).get('data', {})            user.profile.avatar_url = picture.get('url', '')            user.profile.save()        user.save()

# views.py@api_view(['POST'])@permission_classes([IsAuthenticated])def link_social_account(request):    """    Link social account to existing user    """    provider = request.data.get('provider')    access_token = request.data.get('access_token')        # Verify token and get social data    # ... (similar to login endpoints)        # Link to current user    SocialAccount.objects.update_or_create(        user=request.user,        provider=provider,        defaults={            'uid': social_uid,            'extra_data': social_data        }    )        return Response({'message': f'{provider} account linked successfully'}) @api_view(['POST'])@permission_classes([IsAuthenticated])def unlink_social_account(request):    """    Unlink social account from user    """    provider = request.data.get('provider')        try:        social_account = SocialAccount.objects.get(user=request.user, provider=provider)        social_account.delete()        return Response({'message': f'{provider} account unlinked'})    except SocialAccount.DoesNotExist:        return Response({'error': 'Social account not found'}, status=404)

# tests.pyfrom rest_framework.test import APITestCasefrom django.contrib.auth.models import Userfrom allauth.socialaccount.models import SocialAccount, SocialAppfrom django.contrib.sites.models import Site class SocialAuthTest(APITestCase):    def setUp(self):        # Create site        self.site = Site.objects.get_current()                # Create social app        self.google_app = SocialApp.objects.create(            provider='google',            name='Google',            client_id='test-client-id',            secret='test-secret'        )        self.google_app.sites.add(self.site)        def test_google_login_creates_user(self):        """Test Google login creates new user"""        response = self.client.post('/api/auth/google/', {            'access_token': 'mock-token'        })                # Mock Google API response        # ... (use mock library)                self.assertEqual(response.status_code, 200)        self.assertIn('token', response.data)        def test_link_social_account(self):        """Test linking social account to existing user"""        user = User.objects.create_user('testuser', 'test@test.com', 'password')        self.client.force_authenticate(user=user)                response = self.client.post('/api/auth/link-social/', {            'provider': 'google',            'access_token': 'mock-token'        })                self.assertEqual(response.status_code, 200)        self.assertTrue(            SocialAccount.objects.filter(user=user, provider='google').exists()        )

Security Best Practices

1. Validate Redirect URIs

# settings.pyALLOWED_REDIRECT_URIS = [    'http://localhost:3000',    'https://myapp.com',] # views.pydef validate_redirect_uri(uri):    from django.conf import settings    return uri in settings.ALLOWED_REDIRECT_URIS

2. Use State Parameter

# Prevent CSRF in OAuth flowimport secrets def initiate_oauth():    state = secrets.token_urlsafe(32)    request.session['oauth_state'] = state        return redirect(f'https://provider.com/oauth?state={state}') def oauth_callback(request):    state = request.GET.get('state')    if state != request.session.get('oauth_state'):        return Response({'error': 'Invalid state'}, status=400)

3. Verify Email

# settings.pyACCOUNT_EMAIL_VERIFICATION = 'mandatory'ACCOUNT_EMAIL_REQUIRED = True

4. Rate Limiting

# throttling.pyfrom rest_framework.throttling import AnonRateThrottle class SocialAuthRateThrottle(AnonRateThrottle):    rate = '10/hour' # views.pyfrom rest_framework.decorators import throttle_classes @api_view(['POST'])@throttle_classes([SocialAuthRateThrottle])def google_login(request):    # ...

5. Secure Token Storage

// Frontend: Store tokens securely// Use httpOnly cookies or secure localStorage // With httpOnly cookies (backend sets cookie)// More secure, not accessible from JavaScript // Or use secure localStorage with encryptionimport CryptoJS from 'crypto-js'; function saveToken(token) {    const encrypted = CryptoJS.AES.encrypt(token, 'secret-key').toString();    localStorage.setItem('token', encrypted);}

Tóm Tắt Bài 7.4

Trong Bài 7.4 này, bạn đã học:

✅ OAuth2 Basics:

OAuth2 flow và roles
Authorization Code flow
Grant types

✅ django-allauth:

Installation và setup
Social provider configuration
Google, Facebook, GitHub setup

✅ dj-rest-auth:

API endpoints for auth
Social authentication integration
Token-based responses

✅ Custom Endpoints:

Custom Google/Facebook/GitHub login
Token verification
User creation/login

✅ Frontend Integration:

React example
Vue.js example
Token handling

✅ Advanced Features:

Custom user data population
Link/unlink social accounts
Multiple providers per user

✅ Security:

Redirect URI validation
State parameter
Email verification
Rate limiting
Secure token storage

Bài Tập Thực Hành

Bài 1: Multi-Provider Authentication

Xây dựng complete authentication system với:

Email/password registration
Google login
Facebook login
GitHub login
Account linking/unlinking
Profile management

Implement social authentication với JWT thay vì tokens:

JWT generation after social login
Custom JWT claims from social data
Refresh token flow
Token blacklisting

Bài 3: Mobile App Integration

Xây dựng API cho mobile app với:

Social auth endpoints
Token refresh
Device management
Push notification integration

Navigation:

← Bài 7.3: JWT Authentication
Bài 7.4: OAuth2 & Social Auth (current)
Bài 8: Permissions & Authorization →

#facebook-login

Authentication in DRF - Phần 4 - OAuth2 & Social Auth