Firebase_auth - Android 설정 (windows10/VSCode) #01

오늘 포스팅은 앱에서 소셜 로그인을 사용하기 위한 Firebase_auth를 정리한다. 실제 소셜 로그인 연동은 오늘 포스팅에서는 다루지 않느다. 오늘은 Firebase 와 Android앱의 연결을 위한 여러가지 설정과 설정의 정상여부를 간단히 테스트 한다. 아! 그리고 유튭 영상중 개남님의 영상을 참고해서 정리했다.

참고한 유튜브강의 : 개발하는남자 파이어베이스SNS#2

Index 

• Flutter 신규 프로젝트 생성
• firebase console 프로젝트 생성 
• 앱 등록 및 인증서 - SHA-1  생성 및 등록
• build.gradle Firebase SDK 추가 
• pubspec.yaml 페키지추가 firebase_auth / firebase_core 
• app.dart / home.dart 생성 및 Firebase 초기화 
• 연결설정 테스트

Flutter 신규 프로젝트 생성

1. VSCode 에서 터미널을 열고 프로젝트를 생성할 폴더에 들어간다.

2. 해당 폴더에서 "flutter create [--org appli

cationId생성 페키지 옵션] 프로젝트명 " 를 입력한다.

   case1 : flutter create test_application

   =>  applicationId="com.example.test_application" 으로 생성됨

   case2 : flutter create --org com.sudar.snslogin test_application 

   =>  applicationId="com.sudar.snslogin.test_application" 으로 생성됨

 

3. 프로젝트 생성

flutter create --org com.sudar.snslogin sample_sns_login

 

Firebase console 프로젝트 생성 

1. https://firebase.google.com/  회원가입 / 콘솔이동 

 

2. 프로젝트 추가

 

3. 프로젝트명을 입력하고 "계속" 버튼클릭

 

4. Google 애널리틱스 동의 

 

5. 계정선택 및 프로젝트 생성

 

프로젝트 생성중

프로젝트 생성준비 완료

 

앱 등록 및 인증서 - SHA-1  생성 및 등록

 

1. 프로젝트에 앱 추가하기 - 안드로이드를 선택한다.

 

2. Android 페키지 이름 입력 -app/src/build.gradle 파일을 열고 applicationId 값을 복사한다.

3. 다시 firebase 콘솔로 돌아와서 Android 패키지 명에 넣어주고 앱 닉네임은 선택사항이라서 원하는대로~!! 

 

4. windows 에서 keytool을 사용하기 위한 선행 작업 - JDK가 설치되어 있고 환경 변수도 셋팅이 되어 있어야 한다. 아래 링크를 참조하자.!  

windows keytool 기본셋팅 참조

keytool 오류: java.lang.Exception: 키 저장소 파일이 존재하지 않음 해결방법

 

 

5. 인증서 SHA-1 생성및 입력 - firebase 콘솔에서 SHA-1입력 란에 "?"에 마우스를 올리면 서명 인증서의 SHA-1 해시를 받기 위해 Keytool을 사용하는 참조할 수 있는 문구가 뜨고 해당 문구를 클릭하자! 

6. keytool 사용방법 확인하고 command에 명령어를 입력하고 SHA-1을 생선한다.   - 그대로 복사하지 말고 중간에 \는 제거하고 입력하자. 

> keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

구글 콘솔에서 안내해주는 windows용 keytool 명령어

명령어 입력

key 생성 명령어 입력

비밀번호 입력

설정한 비밀번호 입력 

 

key 생성완료

 

7. 생성한 SHA-1 입력 및 앱 등록

8. 구성파일 (google-services.json) 다운로드 및 프로젝트 폴더에 추가하기 

google-services.json 생성 및 프로젝트 추가

아래 이미지 처럼 android/app/ 하위에 넣어주면 된다.

 

build.gradle Firebase SDK 추가 

 

1. 프로젝트 수준의 build.gradle 에 Firebase SDK 추가하기 - 총 3개중 1,3번은 체크하고 없으면 넣으라고 친절하게 적혀 있다. 그리고 2번은 무조건 넣어주면 된다.

 

프로젝트 적용 

 

2. 앱 수준의 build.gradle 에 Firebase SDK 추가하기 - 자기 소스를 보고 없는 부분은 다 넣어주면 된다.

 

프로젝트 적용

프로젝트 적용

 

 

pubspec.yaml 페키지추가 firebase_auth / firebase_core

 

pub.dev에 접속

pub.dev 에서 firebase_auth / firebase_core 페키지 검색 후 버전에 맞게 추가해 준다.

 

app.dart / home.dart 생성 및 Firebase 초기화 

 

1. 프로젝트 구조 lib 아래 src 폴더 생성 2. src폴더 아래 app.dart 파일 생성

 

 app.dart 코드

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:sample_sns_login/src/pages/home.dart';
 
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Firebase.initializeApp(),
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Center(
            child: Text("Firebase load fail"),
          );
        }
 
        if (snapshot.connectionState == ConnectionState.done) {
          return Home();
        }
        return CircularProgressIndicator();
      },
    );
  }
}