플러터에서 Apple 로그인을 이용하여 유저 정보를 관리하는 방법

 

1. 소개

Flutter로 애플 로그인(Apple Sign-In)을 구현하여 사용자 정보를 관리하는 방법을 소개합니다. Apple 로그인은 iOS 13 이상에서 사용할 수 있으며, 사용자 프라이버시를 중시하는 애플의 정책에 따라 사용자의 개인 정보 보호가 철저하게 관리됩니다.

이 튜토리얼에서는 다음과 같은 내용을 다룹니다:

• Apple 로그인 구현
• 사용자 정보를 Firebase Firestore에 저장 및 관리

2. Apple Sign-In 설정

2.1 Apple Developer 설정

먼저 Apple Developer 계정에서 Apple Sign-In을 설정해야 합니다.

1. Apple Developer 계정에 로그인합니다.
2. 앱 ID를 생성하거나 기존 앱 ID를 선택한 후, "Sign in with Apple"을 활성화합니다.
3. "Service ID"를 생성하고 Apple Sign-In을 연결합니다.

2.2 Firebase 설정

Firebase 프로젝트를 설정하고, Firebase Auth와 Firestore를 사용하여 사용자 정보를 저장하고 관리합니다.

1. Firebase 프로젝트 생성 후, Firebase Authentication에서 Apple 로그인 기능을 활성화합니다.
2. iOS 프로젝트에 GoogleService-Info.plist 파일을 추가합니다.
3. Podfile에 Firebase 및 Apple Sign-In 관련 라이브러리를 추가합니다.

# Podfile
platform :ios, '11.0'
use_frameworks!

target 'Runner' do
  pod 'Firebase/Auth'
  pod 'Firebase/Firestore'
end

3. 프로젝트 설정

3.1 플러그인 설치

프로젝트에서 필요한 플러그인을 설치합니다.

dependencies:
  firebase_core: latest_version
  firebase_auth: latest_version
  cloud_firestore: latest_version
  sign_in_with_apple: latest_version

3.2 iOS 설정

ios/Runner/Info.plist 파일을 열어 다음을 추가합니다.

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    </array>
  </dict>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

또한, ios/Runner/Entitlements.plist 파일에 Apple Sign-In 권한을 추가합니다.

<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

4. Apple 로그인 구현

4.1 Firebase 인증 서비스 설정

먼저, Apple 로그인 인증을 처리할 서비스를 작성합니다.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class AuthService {
  final FirebaseAuth _auth = FirebaseAuth.instance;
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;

  Future<User?> signInWithApple() async {
    try {
      final appleCredential = await SignInWithApple.getAppleIDCredential(
        scopes: [
          AppleIDAuthorizationScopes.email,
          AppleIDAuthorizationScopes.fullName,
        ],
      );

      final oauthCredential = OAuthProvider("apple.com").credential(
        idToken: appleCredential.identityToken,
        accessToken: appleCredential.authorizationCode,
      );

      final authResult = await _auth.signInWithCredential(oauthCredential);
      final firebaseUser = authResult.user;

      if (firebaseUser != null) {
        final userRef = _firestore.collection('users').doc(firebaseUser.uid);
        final userData = {
          'uid': firebaseUser.uid,
          'email': firebaseUser.email,
          'displayName': firebaseUser.displayName ?? '',
          'createdAt': FieldValue.serverTimestamp(),
        };

        await userRef.set(userData, SetOptions(merge: true));
        return firebaseUser;
      }
    } catch (e) {
      print("Error during Apple Sign-In: $e");
      return null;
    }
    return null;
  }

  Future<void> signOut() async {
    await _auth.signOut();
  }
}

4.2 로그인 UI 구현

로그인 버튼을 제공하는 간단한 UI를 구현합니다.

import 'package:flutter/material.dart';
import 'package:your_project_name/services/auth_service.dart';
import 'package:your_project_name/screens/user_profile_screen.dart';

class LoginScreen extends StatelessWidget {
  final AuthService _authService = AuthService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Apple Sign-In'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            User? user = await _authService.signInWithApple();
            if (user != null) {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => UserProfileScreen(user: user),
                ),
              );
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Failed to sign in with Apple')),
              );
            }
          },
          child: Text('Sign in with Apple'),
        ),
      ),
    );
  }
}

4.3 유저 프로필 화면

로그인 후 유저 정보를 보여주는 프로필 화면을 구현합니다.

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

class UserProfileScreen extends StatelessWidget {
  final User user;

  UserProfileScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${user.displayName ?? "User"}\'s Profile'),
        actions: [
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await FirebaseAuth.instance.signOut();
              Navigator.of(context).popUntil((route) => route.isFirst);
            },
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Email: ${user.email}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 10),
            Text(
              'User ID: ${user.uid}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}

5. 맺음말

이제 Apple 로그인 기능을 사용해 사용자의 정보를 Firebase Firestore에 저장하고, 관리할 수 있게 되었습니다.

이 방법은 사용자의 개인정보 보호를 중요하게 생각하는 애플의 정책에 부합하며, 사용자의 Apple 계정 정보를 통해 보다 안전하고 간편한 로그인 경험을 제공합니다.

확장 포인트

1. 다른 소셜 로그인 추가: Google, Facebook과 같은 다른 소셜 로그인을 추가하여 로그인 옵션을 다양화할 수 있습니다.
2. 사용자 정보 업데이트: 사용자가 프로필 정보를 직접 업데이트할 수 있는 기능을 추가할 수 있습니다.
3. 보안 강화: Firestore 보안 규칙을 설정하여 사용자가 본인의 정보만 접근할 수 있도록 보호합니다.
4. 다크 모드 지원: 애플 로그인 UI를 다크 모드에 맞게 디자인할 수 있습니다.

Apple 로그인과 Firebase를 사용한 유저 관리 시스템을 구현함으로써, 안전하고 편리한 사용자 인증을 제공할 수 있습니다.

공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱