Firebase App 연결설정 (Android, iOS, Web)
Updated:
firebase core 패키지 설치
# in pubspec.yaml
dependencies:
flutter:
sdk: flutter
firebase_core: ^1.7.0
안드로이드 접속 설정
1.firebase 에 접속하여 프로젝트를 생성하고, 파이어베이스 콘솔에서 안드로이드 앱 추가
-
안드로이드 앱의 패키지 명을 알아야 하는데 프로젝트 폴더 내 android/app 아래
build.gradele파일 안에applicationID "com.example ...."의 ID 명복사 해놓고 앱등록 에서 Android 패키지 이름에 붙여 넣습니다. -
앱 등록 하게 되면
google-services.json파일을 다운로드 해서 android/app 폴더아래에 파일을 붙여 넣습니다. (google-services.json파일은 개인 정보의 파이어 베이스 관련 정보가 담겨 있기 때문에 github 나, 공유 폴더 등 공유가 되지 않도록 유의 해야 합니다.)2.Firebase SDK 추가에서 dependencies {
classpath 'com.google.gms.google-services:...'} 의 부분을 복사해서 프로젝트 내android/build.gradle의 안드로이드 환경 구성 파일 안에 해당내용을 붙여 넣기 합니다 (주의!! flutter android 안에는 build.gradle 파일이2개있기 때문에 코드 입력 시 다른곳에에 입력 되지 않게 주의 해야 함 )3.계속해서
apply plugin: 'com.google.gms.google-services'의 부분을build.gradle경로에 붙여 넣기 합니다.4.
main.dart파일안에runApp()실행전에 Firebase 를 초기화해서 Firestore 를 사용할 수 있도록 초기화 코드를 넣스니다.
// in main.dart
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(); // Firebase 초기화
runApp(const MyApp());
}
iOS 접속 설정
(iOS installation in flutter firebase)[https://firebase.flutter.dev/docs/installation/ios/]
1.firebase 에 접속하여 프로젝트를 생성하고, 파이어베이스 콘솔에서 iOS 앱 추가
-
iOS 패키지 명을 알아야 하는데 프로젝트 내 ios/Runner.xcworkspace 파일을 xcode 로 열고 Runner 의 general tab 에 Bundle Identifier 의
com.example....ID 명을 복사해서 앱 등록의 iOS 번들 ID 에 붙여 넣습니다. 하고 앱등록 -
GoogleService-info.plist 파일을 다운로드 받아서 프로젝트 ios 안에 복사해 넣습니다
2.firebase configuration file 설치
-
반드시 xcode 를 사용하여 프로젝트와 연결해야합니다. (
GoogleService-info.plist파일을 연결 시켜줘야 합니다) -
ios/Runner.xcworkspace파일을 xcode 로 열고, 오른쪽 버튼 클릭해서Add files to "Runner"선택한다음에GoogleService-Info.plist선택하고 반드시 Copy items if needed 를 체크 박스 를 선택해야 함
3.GoogleService-info.plist 파일의 ‘REVERSED_CLIENT_ID의 값을 복사한다. (xcode 상에서 )
-
최상위 Runner의 Target ‘Runner’에서 최하단의 Url type을 새로 추가한다.
-
금방 복사한 내용을 ‘Url Schemes’에 입력한다.
4.프로젝트에 ios 에 pod 파일이 없을 경우 pod init 해주고, 있거나생성하면 Podfile 에 들어가서 다음 코드를 복사 해줍니다
# add pods for desired Firebase products
# https://firebase.google.com/docs/ios/setup#available-pods
- 그리고 나서
pod install해주면 firebase core 가 자동으로 설치됩니다 그리고 프로젝트 실행해줘서 firebase 가 초기화되어 앱 실행이 잘되는지 확인해 줍니다
Web 접속 설정
(Firebase Web in flutter)[https://firebase.flutter.dev/docs/installation/web/]
- Add firebase SKDs 는 web/index.html 에서 CDN import 해서 만이 동작 됩니다,
<html>
...
<body>
<!-- Add this line -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<!-- ------ -->
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
- Firebase 를 초기화 하기 (firebase 에서 web app 을 생성하고 CDN 의 다음과 같이 firebaseConfig 부분을 같이 사용 한것임)
<!-- Firebase Configuration -->
<script>
var firebaseConfig = {
apiKey: "...",
authDomain: "[YOUR_PROJECT].firebaseapp.com",
databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
projectId: "[YOUR_PROJECT]",
storageBucket: "[YOUR_PROJECT].appspot.com",
messagingSenderId: "...",
appId: "1:...:web:...",
measurementId: "G-...",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
🔶 🔷 📌 🔑
Reference
Flutter cookbook - https://flutter.dev/docs/cookbook
오준석의 생존코딩 - https://book.jacobko.info/#/book/1162244372
플러터로 세계정복 - https://muhly.tistory.com/24
Leave a comment