더 많은
Flutter에서 Back4App의 Parse를 사용한 타사 인증 완벽 가이드

42min
소개
Facebook, Google, Apple과 같은 서드파티 인증 방법을 Flutter 앱에 통합하면 유연하고 편리한 로그인 옵션을 제공하여 사용자 경험을 크게 향상시킬 수 있습니다. Back4App에서 제공하는 Parse Server는 이러한 인증 제공자를 위한 기본 지원을 제공합니다. 이 튜토리얼에서는 Back4App의 Parse SDK를 사용하여 Flutter 앱에서 서드파티 인증을 구현하는 방법을 배웁니다.
이 튜토리얼이 끝나면 다음을 포함한 완전한 기능의 회원가입 및 로그인 기능이 있는 Flutter 앱을 갖게 됩니다:
Parse를 사용한 표준 이메일/비밀번호 인증.
서드파티 인증 방법:
Facebook
Google
Apple
전제 조건
이 튜토리얼을 따라 하려면 다음이 필요합니다:
A Back4App 계정. Back4App에서 무료 계정에 가입하세요.
A Flutter 개발 환경이 컴퓨터에 설치되어 있어야 합니다. Flutter 설정에 도움이 필요하면 이 가이드를 참조하세요.﻿
Flutter 및 Dart에 대한 기본 지식. 처음이라면 Flutter 소개를 확인하세요.
Facebook, Google, Apple에 대한 개발자 계정 (서드파티 로그인 방법 설정에 필요).
Visual Studio Code 또는 Android Studio와 같은 IDE 또는 텍스트 편집기
1단계 – Back4App 백엔드 설정하기
1.1. Back4App 프로젝트 만들기
당신의 Back4App 대시보드에 로그인하세요.
"새 앱 만들기"를 클릭하세요.
애플리케이션 이름을 입력하세요, 예: "AuthDemo", 그리고 "생성"을 클릭하세요.
프로젝트가 생성되면, 앱 설정 > 보안 및 키로 이동하세요.
당신의 애플리케이션 ID와 클라이언트 키를 적어두세요. 이 값들은 Flutter 앱에서 Parse를 초기화하는 데 필요합니다.
1.2. 인증 제공자 활성화하기
Back4App 대시보드에서 서버 설정 > 인증로 이동하세요.
사용할 인증 방법을 활성화하세요:
페이스북
구글
애플
각 제공자에 대해 특정 자격 증명(App ID, Client ID, Secret 등)을 입력해야 하며, 이는 다음 단계에서 설정됩니다.
2단계 – Flutter에서 Parse SDK 설치 및 설정하기
2.1. 새로운 Flutter 프로젝트 만들기
터미널을 열고 새로운 Flutter 프로젝트를 만드세요:
Bash
flutter create auth_demo
cd auth_demo
flutter create auth_demo
cd auth_demo
﻿
2.2. 의존성 추가
 pubspec.yaml을 열고 Parse 및 서드파티 로그인 옵션에 대한 다음 의존성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_facebook_auth: ^5.0.5
  google_sign_in: ^5.4.0
  sign_in_with_apple: ^3.3.0
﻿
 flutter pub get을 실행하여 의존성을 설치하세요.
2.3. main.dart에서 Parse 초기화
 lib/main.dart 파일에서 Parse SDK를 가져오고 main 함수에서 초기화하세요:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/auth_screen.dart'; // You'll create this file later

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parse Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AuthScreen(),
    );
  }
}
﻿
 'YOUR_APP_ID' 및 'YOUR_CLIENT_KEY'를 실제 Back4App 자격 증명으로 교체하세요.
3단계 – 표준 인증 구현
3.1. 인증 서비스 생성
새 디렉토리를 생성합니다 services 아래에 lib 그리고 auth_service.dart. 이 서비스는 Parse를 사용하여 사용자 등록 및 로그인을 처리합니다.
Dart
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
﻿
3.2. 인증 화면 만들기
새 디렉토리를 생성합니다 screens 아래에 lib 그리고 auth_screen.dart. 이 화면은 표준 인증을 위한 UI를 제공합니다.
Dart
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
// lib/screens/auth_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final AuthService _authService = AuthService();

  void _signUp() async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('User created successfully!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed.')));
    }
  }

  void _login() async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed.')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parse Auth')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              const Text(
                'Standard Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
              ),
              TextField(
                controller: _passwordController,
                decoration: const InputDecoration(labelText: 'Password'),
                obscureText: true,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _signUp,
                child: const Text('Sign Up'),
              ),
              ElevatedButton(
                onPressed: _login,
                child: const Text('Login'),
              ),
              const Divider(),
              const SizedBox(height: 20),
              const Text(
                'Third-Party Authentication',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              // Buttons for third-party authentication will be added here
            ],
          ),
        ),
      ),
    );
  }
}
﻿
4단계 – 페이스북 인증 통합
4.1. 페이스북 개발자 계정 설정
Facebook 앱 만들기:
이동하십시오 Facebook for Developers 에 로그인하십시오.
클릭하세요 "내 앱" 그리고 "앱 만들기".
선택하십시오 "소비자" 앱 유형으로 선택하고 클릭하십시오 "다음".
다음을 입력하세요: 앱 이름 및 연락 이메일, 그런 다음 "앱 만들기"를 클릭하세요.
앱에 Facebook 로그인 추가하기:
앱 대시보드에서 다음으로 이동하십시오: "제품 추가"를 선택하고 "Facebook 로그인"을 선택하십시오.
선택하십시오 "안드로이드" 및/또는 "iOS" 귀하의 대상 플랫폼에 따라.
Facebook에서 제공하는 설정 단계를 따르세요. 앱의 Bundle Identifier가 필요합니다 iOS와 Package Name이 필요합니다 Android.
OAuth 리디렉션 URI 구성하기:
설정하십시오 OAuth 리디렉션 URI 에: https://parseapi.back4app.com/auth/facebook/callback
앱 ID 및 앱 비밀 얻기:
앱 대시보드에서, "설정" > "기본".
다음 내용을 기록하세요: 앱 ID 및 앱 비밀. 
Back4App에 앱 ID와 비밀 키 추가하기:
Back4App 대시보드에서 다음으로 이동합니다.서버 설정 > 인증. 
아래에서 Facebook, 앱 ID와 앱 비밀을 입력하세요.
4.2. 업데이트 auth_service.dart Facebook 로그인으로
다음 코드를 추가하여 Facebook 인증을 처리하세요:
Dart
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
// Add these imports at the top
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// Inside AuthService class
Map<String, dynamic> _facebookAuthData(
    String? accessToken, String? userId, DateTime? expirationDate) {
  return {
    'id': userId,
    'access_token': accessToken,
    'expiration_date': expirationDate?.toUtc().toIso8601String(),
  };
}

Future<ParseUser?> loginWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if (result.status == LoginStatus.success) {
    final AccessToken accessToken = result.accessToken!;
    var user = ParseUser(null, null, null);
    var response = await user.loginWith(
      'facebook',
      _facebookAuthData(
        accessToken.token,
        accessToken.userId,
        accessToken.expires,
      ),
    );
    if (response.success) {
      return user;
    }
  }
  return null;
}
﻿
4.3. Facebook 로그인 버튼 추가하기 auth_screen.dart
다음 버튼을 UI에 추가하세요:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithFacebook();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Facebook login failed.')));
    }
  },
  child: const Text('Login with Facebook'),
),
﻿
4.4. 플랫폼별 구성
안드로이드
다음 파일을 업데이트하세요: android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">

    <!-- Add this inside the <application> tag -->
    <meta-data android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />

    <!-- Existing configurations -->
</manifest>
﻿
다음 파일에 페이스북 앱 ID를 추가하세요: android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
﻿
iOS
다음 파일을 업데이트하세요: Info.plist 파일:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fbYOUR_FACEBOOK_APP_ID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>AuthDemo</string>
﻿
5단계 – 구글 인증 통합
5.1. 구글 개발자 계정 설정
Google Cloud Console에서 프로젝트 만들기:
이동하여 Google Cloud Console에서 새 프로젝트를 만드세요.
OAuth 동의 화면 구성:
이동하여 API 및 서비스 > OAuth 동의 화면.
필요한 범위로 동의 화면을 설정하세요.
OAuth 클라이언트 ID 만들기:
이동하여 자격 증명 > 자격 증명 만들기 > OAuth 클라이언트 ID.
 웹 애플리케이션을 선택하세요.
 허용된 리디렉션 URI: https://parseapi.back4app.com/auth/google/callback
 클라이언트 ID와 클라이언트 비밀을 기록해 두세요.
클라이언트 ID와 비밀을 Back4App에 추가하기:
Back4App 대시보드에서 서버 설정 > 인증, Google의 클라이언트 ID와 클라이언트 비밀을 입력하세요.
5.2. auth_service.dart를 Google 로그인으로 업데이트
다음 코드를 추가하여 Google 인증을 처리하세요:
Dart
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:google_sign_in/google_sign_in.dart';

// Inside AuthService class
Map<String, dynamic> _googleAuthData(String? idToken, String? accessToken) {
  return {
    'id_token': idToken,
    'access_token': accessToken,
  };
}

Future<ParseUser?> loginWithGoogle() async {
  final GoogleSignIn googleSignIn = GoogleSignIn(
    scopes: ['email'],
  );
  final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
  if (googleUser == null) {
    return null;
  }
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'google',
    _googleAuthData(
      googleAuth.idToken,
      googleAuth.accessToken,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
5.3. Google 로그인 버튼 추가하기 auth_screen.dart
다음 버튼을 UI에 추가하세요:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithGoogle();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Google login failed.')));
    }
  },
  child: const Text('Login with Google'),
),
﻿
5.4. 플랫폼별 구성
안드로이드
다음 내용을 android/app/build.gradle 파일에 추가하세요:
Text
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
﻿
당신의 Google 클라이언트 ID를 android/app/src/main/res/values/strings.xml:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="default_web_client_id">YOUR_GOOGLE_CLIENT_ID</string>
</resources>
﻿
당신의 android/app/src/main/AndroidManifest.xml:
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.auth_demo">
    <!-- Existing configurations -->
    <application>
        <!-- Existing configurations -->
        <meta-data android:name="com.google.android.gms.client.application_id"
            android:value="@string/default_web_client_id" />
    </application>
</manifest>
﻿
iOS
역전된 클라이언트 ID를 당신의 Info.plist:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
﻿
6단계 – 애플 인증 통합
6.1. 애플 개발자 계정 설정하기
앱 등록하기:
에 로그인하십시오 Apple Developer Portal 및 앱을 등록하십시오.
애플로 로그인 활성화하기:
아래에서 식별자, 앱을 선택하고 애플로 로그인을 활성화하십시오.
서비스 ID 생성하기:
앱을 위한 서비스 ID를 생성하십시오.
 리디렉션 URI를 다음으로 설정하십시오: https://parseapi.back4app.com/auth/apple/callback
클라이언트 비밀 생성하기:
 애플로 로그인 개인 키를 생성하십시오.
이 키를 사용하여 클라이언트 비밀을 생성하십시오.
Back4App에 자격 증명 추가하기:
Back4App 대시보드에서 서버 설정 > 인증, 애플을 위한 서비스 ID 및 클라이언트 비밀을 입력하십시오.
6.2. auth_service.dart를 애플 로그인으로 업데이트하기
Apple 인증을 처리하기 위해 다음 코드를 추가하세요:
Dart
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
// Add this import at the top
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'dart:io' show Platform;

// Inside AuthService class
Map<String, dynamic> _appleAuthData(String? identityToken, String? userId) {
  return {
    'id': userId,
    'token': identityToken,
  };
}

Future<ParseUser?> loginWithApple() async {
  if (!Platform.isIOS) {
    // Sign in with Apple is only available on iOS
    return null;
  }
  final credential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
  );
  var user = ParseUser(null, null, null);
  var response = await user.loginWith(
    'apple',
    _appleAuthData(
      credential.identityToken,
      credential.userIdentifier,
    ),
  );
  if (response.success) {
    return user;
  }
  return null;
}
﻿
6.3. Apple 로그인 버튼을 추가하세요 auth_screen.dart
다음 버튼을 UI에 추가하세요:
Dart
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
ElevatedButton(
  onPressed: () async {
    var user = await _authService.loginWithApple();
    if (user != null) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login successful!')));
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Apple login failed.')));
    }
  },
  child: const Text('Login with Apple'),
),
﻿
6.4. 플랫폼별 구성
iOS 전용
Xcode에서 프로젝트를 열고 Signing & Capabilities로 이동하세요.
"+ Capability"를 클릭하고 "Sign in with Apple"을 추가하세요.
당신의 Bundle Identifier가 Apple Developer Portal에 등록된 것과 일치하는지 확인하세요.
7단계 – 애플리케이션 테스트
모든 인증 방법을 설정했으므로, 앱을 실행하고 각 로그인 옵션을 테스트할 수 있습니다.
7.1. 앱 실행
Bash
flutter run
flutter run
﻿
iOS의 경우, 애플으로 로그인 테스트를 위해 실제 기기에서 앱을 실행해야 합니다.
Android의 경우, 에뮬레이터나 물리적 장치를 사용할 수 있습니다.
7.2. 표준 인증 테스트
사용자 이름, 이메일 및 비밀번호를 입력하세요.
새 사용자를 만들기 위해 "가입하기"를 탭하세요.
생성된 자격 증명으로 로그인하기 위해 "로그인"을 탭하세요.
7.3. 페이스북 로그인 테스트
탭 "Facebook으로 로그인".
Facebook 로그인 화면이 나타납니다.
Facebook 자격 증명으로 로그인합니다.
7.4. Google 로그인 테스트
탭 "Google로 로그인".
Google 로그인 화면이 나타납니다.
Google 계정으로 로그인합니다.
7.5. Apple 로그인 테스트 (iOS 전용)
탭 "Apple로 로그인".
Apple 로그인 프롬프트가 나타납니다.
Apple ID를 사용하여 인증합니다.
결론
이 튜토리얼에서는 표준 이메일/비밀번호 인증을 성공적으로 구현하고 Parse SDK를 사용하여 Flutter 앱에 Facebook, Google 및 Apple과 같은 타사 인증 방법을 통합했습니다. 이 설정은 여러 편리한 로그인 옵션을 제공하여 사용자 경험을 향상시킵니다.
다음 단계
사용자 프로필: 사용자가 자신의 정보를 업데이트할 수 있도록 앱을 확장합니다.
로그아웃 기능: 각 인증 방법에 대한 로그아웃 기능을 구현합니다.
데이터 보안: Parse ACL 및 역할을 사용하여 역할 기반 액세스 제어를 구현하여 데이터를 보호합니다.
오류 처리: 사용자에게 더 자세한 피드백을 제공하기 위해 오류 처리를 개선합니다.
UI 개선: 앱의 브랜딩에 맞게 UI를 사용자 정의하고 사용자 경험을 개선합니다.
추가 리소스
﻿Back4App 문서﻿
﻿Parse Flutter SDK 가이드﻿
﻿Flutter 공식 문서﻿
﻿Facebook 개발자﻿
﻿Google Identity Platform﻿
﻿Apple로 로그인 문서﻿
행복한 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter에서 fl_chart 및 Back4App으로 데이터 시각화하는 방법
Flutter에서 HomeWidget 및 Back4App으로 홈 화면 위젯 만들기 방법