Flutter의 애플 로그인(Apple Sign-In) 통합

애플 로그인(Apple Sign-In)은 사용자 개인정보 보호를 중시하는 iOS 환경에서 필수적인 인증 방법입니다. Apple 계정을 통해 앱에 로그인할 수 있는 이 기능은 특히 iOS 13 이상에서 필수적으로 제공해야 하는 중요한 기능입니다. Flutter에서 애플 로그인을 통합하는 방법을 이번 글에서 단계별로 설명하겠습니다.

1. Apple Developer 계정 설정

애플 로그인을 통합하려면 Apple Developer 계정이 필요하며, 앱 등록과 인증 키 설정 과정이 요구됩니다.

1.1 Apple Developer 계정 등록

1. Apple Developer 웹사이트에 로그인하고 Apple Developer Program에 가입합니다.
2. 앱을 생성하기 위한 Identifiers 설정에서 새 앱 ID를 만듭니다. 이 과정에서 Sign In with Apple을 활성화합니다.

1.2 Apple Sign-In 서비스 활성화

1. Certificates, Identifiers & Profiles로 이동해 Identifiers에서 앱을 선택합니다.
2. Sign In with Apple을 활성화하고 저장합니다.
3. Keys 탭에서 새로운 키를 생성하고, Sign In with Apple 기능을 활성화한 뒤, 해당 키의 Key ID와 Team ID를 저장합니다. 나중에 Firebase 인증에 필요합니다.

2. Firebase 프로젝트 설정

Firebase Authentication을 통해 Apple Sign-In을 지원하려면 Firebase 콘솔에서 Apple Sign-In 인증을 설정해야 합니다.

2.1 Firebase 프로젝트 생성 및 설정

1. Firebase 콘솔에서 새 프로젝트를 생성합니다.
2. Authentication -> Sign-in method로 이동하여 Apple을 활성화합니다.
3. Firebase Apple Sign-In 설정에서 Services ID, Key ID, Team ID를 입력합니다. 이 정보는 Apple Developer 계정에서 발급받은 것입니다.

3. Flutter 프로젝트 설정

Flutter 프로젝트에 필요한 패키지를 추가하고, Apple 로그인을 통합하는 방법을 설명합니다.

 

3.1 패키지 추가

pubspec.yaml 파일에 Firebase와 Apple 로그인 패키지를 추가합니다.

 

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_auth: ^3.3.0
  sign_in_with_apple: ^3.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

 

 

3.2 iOS 설정

iOS에서 애플 로그인을 지원하기 위해 몇 가지 설정이 필요합니다.

ios/Runner/Info.plist 파일에 다음 키를 추가합니다.

 

<key>NSAppleMusicUsageDescription</key>
<string>This app uses Apple Music for authentication.</string>
<key>NSPrivacy - AppleSignInUsageDescription</key>
<string>This app uses Apple Sign-In for authentication.</string>

 

ios/Runner/Signing & Capabilities 탭에서 Sign In with Apple 기능을 활성화합니다.

 

 

반응형

 

4. 애플 로그인 구현

이제 Flutter 코드에서 Apple Sign-In을 구현합니다.

 

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignInScreen(),
    );
  }
}

class SignInScreen extends StatefulWidget {
  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  final FirebaseAuth _auth = FirebaseAuth.instance;

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

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

    final userCredential = await _auth.signInWithCredential(oauthCredential);
    return userCredential.user;
  }

  void _signOut() async {
    await _auth.signOut();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Apple Sign-In'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                User? user = await _signInWithApple();
                if (user != null) {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => HomeScreen(user: user)),
                  );
                }
              },
              child: Text('Sign in with Apple'),
            ),
            ElevatedButton(
              onPressed: _signOut,
              child: Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final User user;

  HomeScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Signed in as: ${user.displayName ?? 'User'}'),
            Text('Email: ${user.email ?? 'No email available'}'),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 Apple 계정을 통해 로그인하고 로그아웃할 수 있도록 하는 예제입니다. sign_in_with_apple 패키지를 사용하여 애플 로그인 흐름을 처리하고, Firebase를 통해 인증을 관리합니다.

5. 테스트하기

이제 애플리케이션을 실행하여 애플 로그인을 테스트할 수 있습니다.

1. iOS 시뮬레이터 또는 실제 기기에서 flutter run 명령어를 실행합니다.
2. "Sign in with Apple" 버튼을 클릭하여 Apple 로그인 화면을 엽니다.
3. Apple ID를 사용하여 로그인합니다.
4. 로그인 후, Home 화면으로 이동하여 사용자의 이름과 이메일을 확인합니다.
5. "Sign out" 버튼을 클릭하여 로그아웃합니다.

6. 사용자 개인정보 보호

애플 로그인을 사용할 때, 애플은 사용자에게 이메일을 비공개로 할 수 있는 옵션을 제공합니다. 이는 사용자의 개인정보를 보호하기 위한 기능으로, 이메일을 대신하여 무작위로 생성된 익명 이메일 주소가 앱에 제공됩니다. 이로 인해 앱에서 사용자의 이메일 정보가 제공되지 않는 경우가 있을 수 있습니다.

결론

Flutter에서 애플 로그인을 통합하면 사용자들이 Apple ID를 사용하여 앱에 쉽게 로그인할 수 있습니다. 이는 특히 iOS 사용자들에게 친숙한 경험을 제공하며, Firebase Authentication을 통해 구현이 매우 간단합니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 Apple Sign-In 기능을 통합해보세요. Apple 로그인을 통해 사용자에게 더 나은 보안과 편리한 인증 경험을 제공할 수 있습니다.