Firebase는 모바일 및 웹 애플리케이션의 백엔드 서비스를 제공하는 플랫폼입니다. Firebase는 사용하기 쉽고 강력한 기능을 제공하여 앱 개발을 더욱 쉽고 빠르게 만들 수 있습니다.
플러터웹에서 Firebase를 연동하면 데이터베이스, 인증, 스토리지 및 알림 기능을 사용할 수 있습니다. 이번 글에서는 플러터웹에서 Firebase를 연동하는 방법에 대해 살펴보겠습니다.
Firebase 프로젝트 생성하기
Firebase를 통합하려면 먼저 Firebase 콘솔에서 새 프로젝트를 만들어야 합니다. 프로젝트를 만들려면 Firebase 콘솔에 로그인하고, "새 프로젝트 만들기"를 클릭합니다.
Firebase 웹 앱 만들기
Firebase 프로젝트를 만들면, 앱에 대한 구성 파일을 가져올 수 있습니다. Firebase 콘솔에서 "웹 앱 추가"를 클릭하고, 앱 이름을 입력한 후, "앱 등록"을 클릭합니다. 그러면 Firebase 설정 파일이 다운로드됩니다.
Firebase 설정 파일에는 프로젝트와 앱에 대한 정보가 포함되어 있습니다. 이 파일은 나중에 Flutter 프로젝트에서 사용할 것입니다.
플러터웹에서 Firebase 연동하기
Firebase 설정 파일을 다운로드한 후, 플러터웹 프로젝트에 Firebase를 연동해야 합니다.
- Firebase for Web 패키지 추가하기
dependencies:
firebase_core_web: ^2.1.0
firebase_storage: ^11.0.10
firebase_storage_web: ^3.3.19
cloud_firestore: ^4.3.1
cloud_firestore_web: ^3.2.1
firebase_auth: ^4.2.5
firebase_auth_web: ^5.2.4
firebase_core: ^2.4.1- Flutter web/index.html 파일 수정하기
<body>
<!-- skip -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-storage.js"></script>
</body>- Firebase 초기화하기
Firebase를 초기화하려면, main() 함수에서 Firebase.initializeApp() 메서드를 호출합니다. Firebase 에서 다운로드한 파일의 값을 확인해서 입력해 주세요.
import 'package:firebase/firebaseCore.dart'
void main() async {
await Firebase.initializeApp(
options: FirebaseOptions(
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
projectId: '<your-project-id>',
storageBucket: '<your-storage-bucket>',
messagingSenderId: '<your-messaging-sender-id>',
appId: '<your-app-id>',
)
);
runApp(MyApp());
}- apikey가 표시되지 않는 다면 Firebase 에서 Auth에 대한 부분을 활성화 한 후 다시 확인해 보세요.
이제 Firebase가 플러터웹 프로젝트와 연동되었습니다.
f