32 7 React Native & Django 인증 심화 6 모바일 환경에서 소셜 로그인 및 인증 처리 | ✅ 편저: 코담 운영자

📱 React Native & Django 인증 심화 6_ 모바일 환경에서 소셜 로그인 및 인증 처리

이번 포스트에서는 React Native 앱에서 Django 백엔드와 연동하여 Google, Facebook, Kakao 소셜 로그인 및 JWT 인증을 구현하는 방법을 다룹니다.

---

📌 개요

모바일 환경에서는 웹과 달리 OAuth2 리다이렉트 처리와 토큰 관리를 React Native에서 직접 구현해야 합니다. 이를 위해 `` 라이브러리를 사용하여 OAuth2 인증 플로우를 처리하고, Django REST API와 연동해 안전하게 사용자 인증을 관리합니다.

---

📦 17️⃣ React Native 프로젝트 설정

1️⃣ 필수 라이브러리 설치

npm install react-native-app-auth axios

iOS의 경우 CocoaPods 설치:

cd ios && pod install && cd ..

---

🔑 18️⃣ OAuth2 설정 (React Native)

📁 authConfig.js

export const authConfig = {
  issuer: 'https://accounts.google.com',
  clientId: 'GOOGLE_CLIENT_ID',
  redirectUrl: 'com.yourapp:/oauthredirect',
  scopes: ['openid', 'profile', 'email'],
  serviceConfiguration: {
    authorizationEndpoint: 'https://accounts.google.com/o/oauth2/v2/auth',
    tokenEndpoint: 'https://oauth2.googleapis.com/token',
    revocationEndpoint: 'https://oauth2.googleapis.com/revoke',
  },
};

⚠️ redirectUrl은 앱의 딥링크 스킴을 사용합니다. AndroidManifest 및 Info.plist에서 등록 필요.

---

📁 SocialLogin.js

import React from 'react';
import { Button, Alert } from 'react-native';
import { authorize } from 'react-native-app-auth';
import axios from 'axios';
import { authConfig } from './authConfig';

const SocialLogin = () => {
  const handleLogin = async () => {
    try {
      const result = await authorize(authConfig);
      // Access Token을 Django 백엔드로 전송
      const response = await axios.post('http://localhost:8000/auth/social/google/', {
        access_token: result.accessToken,
      });
      if (response.status === 200) {
        Alert.alert('로그인 성공', JSON.stringify(response.data));
      }
    } catch (error) {
      console.error(error);
      Alert.alert('로그인 실패', error.message);
    }
  };

  return (
    <Button title="Google로 로그인" onPress={handleLogin} />
  );
};

export default SocialLogin;

---

🌐 19️⃣ Django 백엔드 처리

Django에서는 dj-rest-auth의 소셜 로그인 엔드포인트 사용:

urls.py

urlpatterns += [
    path('auth/social/google/', include('allauth.socialaccount.urls')),
]

프론트엔드에서 전달한 access_token으로 사용자 인증 처리.

---

🛡️ 보안 고려사항

• 딥링크 보안: Redirect URL 스킴에 의한 공격을 방지하기 위해 안전한 스킴 사용.
• HTTPS 적용: 모바일 API 통신도 반드시 HTTPS 사용.
• Refresh Token 관리: 모바일 앱에 저장할 때 SecureStorage 또는 Keychain 사용 권장.

---

✅ 마무리

이번 포스트에서는 React Native 앱에서 Google 소셜 로그인을 구현하고 Django 백엔드와 연동해 사용자 인증을 처리하는 방법을 다뤘습니다. Facebook, Kakao 로그인도 동일한 방식으로 확장할 수 있습니다.

다음 포스트에서는 Push Notification과 인증 상태 유지를 결합하여 모바일 UX를 개선하는 방법을 다룹니다.