Flutter JWT 인증

이 기사에서는 공급자(앱 상태)로 jwt 인증을 구현합니다.


필수 구성 요소 설치:

flutter pub add http
flutter pub add provider
flutter pub add flutter_secure_storage
flutter pub add shelf
flutter pub add shelf_router

flutter_secure_storage minSdk 버전 >= 18 필요

가짜 jwt 토큰을 얻기 위한 간단한 끝점 구현

shelf_router을 사용하여 인증 서버를 구현합니다. 실제 상황에서는 어떤 방법으로든 구현할 수 있습니다.


가짜 jwt 서버 구현:
lib/jwt_server.dart

import 'dart:convert';

import 'package:shelf_router/shelf_router.dart';
import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as io;

void main() async {
  var app = Router();

  app.post('/login', (Request request) {
    var json = jsonEncode({
      'access_token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
    });

    return Response.ok(json, headers: {
      'Access-Control-Allow-Origin': '*'
    });
  });

  await io.serve(app, 'localhost', 8080);
}

이제 jwt 인증을 테스트하기 위한 서버가 있습니다.

승인 구현

인증 모델 생성:
lib/models/auth.dart

import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class AuthModel extends ChangeNotifier {
  final storage = const FlutterSecureStorage();
  String? _token;
  bool isAuthorized = false;

  init() async {
    _token = await storage.read(key: 'token');

    isAuthorized = _token != null;

    notifyListeners();
  }

  login(String token) async {
    storage.write(key: 'token', value: token);

    _token = token;
    isAuthorized = true;

    notifyListeners();
  }

  logout() {
    _token = null;
    isAuthorized = false;
    storage.delete(key: 'token');

    notifyListeners();
  }
}

인증 모델 등록:
lib/main.dart

import 'package:flutter/material.dart';
import 'package:jwt_example/models/auth.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var authModel = AuthModel();
    authModel.init();

    return ChangeNotifierProvider(
        create: (context) => authModel,
        child: const MaterialApp(
          home: MyHomePage(),
        ));
  }
}

보기 구현은 인증에 따라 다릅니다.
lib/main.dart

...
import 'package:http/http.dart' as http;
import 'package:jwt_example/models/auth.dart';
...
class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Listen auth model changes
    var auth = context.watch<AuthModel>();

    return OutlinedButton(
      onPressed: () async {
        if (auth.isAuthorized) {
          auth.logout();
        } else {
          var url = Uri.parse('http://localhost:8080/login');
          var response = await http.post(url);
          var decodedResponse = jsonDecode(response.body) as Map;

          auth.login(decodedResponse['access_token']);
        }
      },
      child: auth.isAuthorized ? const Text("Logout") : const Text("Login"),
    );
  }
}
...

애플리케이션 실행:

dart run lib/jwt_server.dart
flutter run -d chrome

이 간단한 예는 프로젝트에서 인증 로직의 특정 구현으로 확장하기 위한 포인트가 될 수 있습니다.

유용한 링크:

Get and upgrade Dart
Creating app template
Simple app state management
JSON Web Token
Authentication with JWT in Dart(server)