본문으로 이동

플러터:인증(OAuth2)

학교의 모든 지식. SMwiki

틀:플러터 Dart:개요 플러터에 대한 지식 분류

  1. 플러터:개요
    1. 플러터:VSCode
    2. 플러터:안드로이드 스튜디오
  2. 플러터:실행
  3. 플러터:개념 잡기
    1. 플러터:화면 하나 만들기
    2. 플러터:변하는 화면(StatefulWidget)
    3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
    4. 플러터:화면 전환(Drawer)
    5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
    6. 플러터:그래프 그리기(fl chart)
    7. 플러터:데이터 저장(간단한 데이터)
    8. 플러터:인증(Firebase 인증)(미완)
    9. 플러터:인증(OAuth2)(미완)
  4. 권한 사용
    1. 플러터:마이크 입력
  5. 위젯
    1. 플러터:아이콘
    2. 플러터:레이아웃 계열 위젯
    3. 플러터:네비게이션 계열 위젯
    4. 플러터:버튼
    5. 플러터:상태관리(미완)
  6. 플러터:DB연결
    1. 플러터:Firebase(미완)
    2. 플러터:MySQL(미완)
  7. 디자인
    1. 플러터:테마
    2. 플러터:앱바
  8. 플러터:배포
  9. 플러터:참고자료
  10. 플러터:위젯
    1. 플러터:공간배치용 위젯
  11. 플러터:라이브러리
    1. 플러터:logger

[아직 미완의 문서입니다.]

[편집 | 원본 편집]
  • Firebase는 Google/Apple/GitHub 등 주요 소셜 로그인만 공식 지원함.
  • 이 문서에선 일반적인 표준 OAuth2 규격을 100% 준수(Authorization Code + PKCE)하는 경우의 로그인을 구현함.(flutter_appauth 사용)
  • Django(OAuth2 Provider)·Auth0·Keycloak 등 OAuth2 표준을 준수하는 서버라면 모두 동일한 방식으로 연동 가능함.
  • 네이버, 카카오, 디스코드 등의 인증은 OAuth2와 유사하지만 표준을 완전히 따르지 않기 때문에 직접 구현해야 하는데, 네이버, 카카오는 일반 OAuth2의 규격과 조금 다름. 아래 패키지를 이용하면 앱투앱 로그인도 간편하게 이루어짐.
  • 카카오: kakao_flutter_sdk (공식)
  • 네이버: flutter_naver_login
  • 디스코드: discord_oauth2

사전 준비

[편집 | 원본 편집]

필수 개념

[편집 | 원본 편집]
  • Authorization Code Flow with PKCE
  • Authorization Endpoint: /authorize
  • Token Endpoint: /token
  • Client ID / Redirect URI
할 일 설명 비고
pubspec.yaml에 패키지 추가
dependencies:
  flutter_appauth: ^5.0.0
Redirect URI 등록 [스킴 지정하는 법에 대해선 따로 찾아보아야 할듯.] Flutter 앱은 보통 스킴 기반 URI를 사용함.

Flutter 코드 (최소 구현 예제)

[편집 | 원본 편집]

인증 요청

[편집 | 원본 편집]
import 'package:flutter_appauth/flutter_appauth.dart';

final appAuth = FlutterAppAuth();

Future<void> login() async {
  final result = await appAuth.authorizeAndExchangeCode(
    AuthorizationTokenRequest(
      "your_client_id",
      "com.example.app:/oauth",
      serviceConfiguration: AuthorizationServiceConfiguration(
        authorizationEndpoint: "https://your-server.com/o/authorize/",
        tokenEndpoint: "https://your-server.com/o/token/",
      ),
      scopes: ['openid', 'profile', 'email'],
    ),
  );

  print("Access Token: ${result?.accessToken}");
}

토큰 갱신

[편집 | 원본 편집]
final refreshed = await appAuth.token(
  TokenRequest(
    "your_client_id",
    "com.example.app:/oauth",
    refreshToken: result.refreshToken,
    serviceConfiguration: AuthorizationServiceConfiguration(
      authorizationEndpoint: "https://your-server.com/o/authorize/",
      tokenEndpoint: "https://your-server.com/o/token/",
    ),
  ),
);

OAuth 제공자 설정

[편집 | 원본 편집]

Django OAuth2 서버 연동

[편집 | 원본 편집]

Django-OAuth-Toolkit 설정

[편집 | 원본 편집]
OAUTH2_PROVIDER = {
    "ACCESS_TOKEN_EXPIRE_SECONDS": 3600,
    "PKCE_REQUIRED": True,
}

Application 등록

[편집 | 원본 편집]
  • Client type: Public
  • Authorization grant type: Authorization code
  • Redirect URIs: com.example.app:/oauth

최소 동작 구조 요약

[편집 | 원본 편집]
  1. OAuth2 서버에서 Client 등록 (Redirect URI 포함)
  2. Flutter에서 flutter_appauth를 이용해 로그인
  3. OAuth 서버가 Authorization Code 발급
  4. Flutter가 Authorization Code → Access Token 교환
  5. 필요 시 Refresh Token으로 갱신