[flutter] 플러터 프로바이더를 사용하여 사용자 인증 처리하기

22 Dec 2023

flutter

플러터는 다양한 애플리케이션을 빌드하고 쉽게 사용자 정의할 수 있게 해주는 강력한 프레임워크입니다. 이번 블로그에서는 플러터의 프로바이더(provider)를 사용하여 사용자 인증을 처리하는 방법에 대해 살펴보겠습니다.

프로바이더란?

플러터의 프로바이더는 애플리케이션 전반에 걸쳐 상태를 관리하고 공유하는 데 사용됩니다. 사용자 인증 처리를 위해 프로바이더를 활용하면 인증된 사용자 정보를 다른 화면에서도 쉽게 접근할 수 있습니다.

사용자 인증 처리

사용자 인증을 처리하기 위해서는 먼저 사용자 정보를 입력하는 로그인 페이지를 만들어야 합니다. 아래는 간단한 로그인 폼 위젯입니다.

import 'package:flutter/material.dart';

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: '이메일'),
          ),
          TextFormField(
            decoration: InputDecoration(labelText: '비밀번호'),
            obscureText: true,
          ),
          SizedBox(height: 20.0),
          ElevatedButton(
            onPressed: () {
              // TODO: 인증 처리 로직 작성
            },
            child: Text('로그인'),
          ),
        ],
      ),
    );
  }
}

위의 코드에서는 사용자로부터 이메일과 비밀번호를 입력받는 폼 위젯을 구현한 것을 볼 수 있습니다.

프로바이더를 사용하여 사용자 인증 정보를 관리하려면, 먼저 ChangeNotifier 클래스를 상속받은 AuthProvider 클래스를 작성해야 합니다. 해당 클래스는 사용자가 로그인한 상태인지를 추적하고 사용자 정보를 제공하는 역할을 합니다.

import 'package:flutter/foundation.dart';

class AuthProvider with ChangeNotifier {
  String? _loggedInUser;

  String? get loggedInUser => _loggedInUser;

  Future<void> login(String email, String password) async {
    // TODO: 실제 로그인 처리 로직 작성

    // 인증 성공 시 사용자 정보를 저장하고 상태를 갱신
    _loggedInUser = email;
    notifyListeners();
  }

  void logout() {
    // 사용자 로그아웃 처리
    _loggedInUser = null;
    notifyListeners();
  }
}

위의 AuthProvider 클래스는 사용자 인증 정보를 관리하고 로그인/로그아웃을 처리하는 메서드를 제공합니다.

이제 로그인 폼에서 AuthProvider를 이용하여 사용자 인증 처리를 할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'auth_provider.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var authProvider = Provider.of<AuthProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('로그인'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            LoginForm(),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () {
                authProvider.login('user@example.com', 'password');
              },
              child: Text('로그인'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 LoginPage 위젯에서 AuthProvider를 이용하여 사용자 인증 처리를 하고 있습니다.

플러터의 provider 패키지를 사용하여 간단하게 사용자 인증 처리를 구현할 수 있습니다. 사용자 인증 외에도 프로바이더를 통해 애플리케이션의 상태를 효과적으로 관리하고 공유할 수 있습니다.