seong

1. Flutter Web 프로젝트 Firebase + Google OAuth 연결하기 1단계 본문

Flutter/Flutter

1. Flutter Web 프로젝트 Firebase + Google OAuth 연결하기 1단계

hyeonseong 2023. 7. 19. 15:56

1. FireBase 에서 프로젝트 생성 이후 Console에서 "</>" 웹 표시 클릭 

2. 앱 닉네임 작성 및, SDK 발급받기 

위에서 앱 닉네임을 입력 후 "앱 등록" 을 누르면 SDK를 발급 받는다.

아래 정보는 나중에 필요하므로 캡처해두거나 가지고 있기.

3. vsCode에서 터미널을 켜고 "npm install firebase"을 입력

4. 프로젝트의 "web -> index.html"에 들어가서 SDK 정보를 추가해준다.

이때 위치는 <body>의 가장 아래 부분에 추가해준다.

(기존의 script에 추가가 아닌 새로운 script를 추가하는것이다. 헷갈리지 말기)

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.0.0/firebase-analytics.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "SDK 발급 정보",
    authDomain: "SDK 발급 정보",
    projectId: "SDK 발급 정보",
    storageBucket: "SDK 발급 정보",
    messagingSenderId: "SDK 발급 정보",
    appId: "SDK 발급 정보",
    measurementId: "SDK 발급 정보"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>

5.pubspec.yaml에 연결에 필요한 종속성 모두 추가 

6. 프로젝트의 main 메서드에 Firebase 초기화 코드 작성

 

'Flutter > Flutter' 카테고리의 다른 글

3. Flutter Web 프로젝트 Firebase + Google OAuth 연결하기 3단계  (0) 2023.07.20
2. Flutter Web 프로젝트 Firebase + Google OAuth 연결하기 2단계  (0) 2023.07.19
Flutter: "RenderFlex children have non-zero flex but incoming height constraints are unbounded" 에러  (0) 2023.07.05
Flutter ReorderableListView 위젯  (0) 2023.07.05
Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports 충돌 해결  (0) 2023.07.01
'Flutter/Flutter' Related Articles more