Flutter - 이메일 로그인 초기설정 및 프로젝트 생성, email 로그인 설정

1. 프로젝트 생성 후 코딩파파의 파일을 다운 https://github.com/thecodingpapa/template_by_thecodingpapa/tree/email-login

GitHub - thecodingpapa/template_by_thecodingpapa

받은 후 프로젝트에 lib 내 파일 복사 붙여넣기, assets 폴더 붙여 넣기 한 후 package를 email_auth로 전부 변경, image를 사용 할 수 있게 pubspec.yaml 에서 assets 에 assets/ 경로 추가, provider 4.3.3 버전으로 dependencies로 추가

(하지만 이렇게 해도 에러가 뜸 현재 flutter이 2.12.0이라서 일부 null등 null safety때문에 안되는것으로 보임, 어떻게 수정해야 할지 몰라서 pubspec.yaml의 sdk에 2.12.0을 2.7.0으로 바꾼후 pub get을 해주니 정상 작동, 이 프로젝트 동안은 2.7로 진행 전체 강의 후 해당 부분들 변경해 보려함)

 

2. 그리고 firebase core 플러그인을 설치해준다. pub.dev에서 검색 후 depedencies에 입력 해 주면됨.

그리고 console.firebase.google.com 에 새로 만들어 주면 된다. 새로 생성하거나 기존의 것을 이용 하면 되고 해당 프로젝트로 들어가서 안드로이드를 먼저 작성해준다. 플러터 프로젝트에서 android - app - src -main 에 AndroidManifest.xml 을 열어서 패키지 네임을 복사해서 파이어베이스 프로젝트에 해당부분에 넣어주면 된다. 나머지 옵션은 현재 안넣어도 된다.

다음으로 넘어가면 google-services.json 파일을 다운 받으라고 나오는데 다운로드 받은 후 받은 파일을 app 폴더 안에 넣어준다. 넣어준호 파이어베이스 프로젝트에서 다음을 계속 눌러주고 콘솔로 이동까지 눌러 주면 된다.

그리고 플러터 프로젝트의 android 에 build.gradle 파일을 열어준다. (build.gradle는 android 폴더와 android - app 폴더에 2개가 있다. 주의해서 열어주면 된다.)

classpath "com.google.gms:googlw-services:4.3.3" 를 dependencies에 추가해주면 된다.

이번엔 app 폴더안에 build.gradle를 열어서 apply부분에 apply plugin: 'com.google.gms.google-services'를 추가해 주고 android에 defaultConfig 의 안에 multiDexEnabled true 를 추가해 준다. 가장 하단에 dependencies에 implementation 'com.android.support:multidex:1.0.3' 을 추가해 준다.

 

#여기서 app 폴더 안에 build.gradle파일이 빨간줄이 그려져 있고 에러가 난다. 보통 프로젝트를 생성하면 Module SDK가 지정이 안되있거나 다른게 지정되 있는 것이다. Project Structure - Modules 에 들어간 후 Dependencies에 들어간 후 적절한 선택을 해주면 된다. 현재 31 하나만 있어서 31을 택해준다. 그러나 build.gradle에 GradleException에는 빨간 색이 남아있다. API 29부터는 FileNotFoundException으로 대체됐다고 한다. 이부분을 바꿔주면 된다.

 

다음은 IOS를 해주면 되는데 윈도우를 쓰면 안해줘도 된다. 맥을 사용한다거나 아이폰으로 출시한다면 2강을 참고하면 된다.

ios를 맥에서 Xcode로 열어 준후 Runner - General에서 Bundle Identifier을 복사해서 똑같이 해주면 된다. plist 파일을 다운 받을 수 있는데 다운 받은 후 해당 파일을 Xcode에서 Runner - Runner에 add file to runner 해서 파일을 선택 한 후 destination 을 체크하고 add to target을 체크하고 넣어 주면 된다. IOS설정도 완료됨.

 

firebase core를 pub.dev에서 찾은 후 pubspec.yaml에 추가 해주면 된다.

 

3. main.dart 에 와서 firebase가 준비가 되면 앱이 실행 되도록 코드를 추가한다.

stateless widget를 추가 해 준후 Container을 futurebuilder로 변경 해준다. 그후 future 와 builder 옵션을 추가해준다.

snapshot을 이용해 firebase 상태를 확인하여 초기 화면(MyApp())을 불러오거나 에러창을 불러오거나 로딩창을 불러온다.

---

void main() {
  runApp(App());
}

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Firebase.initializeApp(),
      builder: (context, snapshot) {

        if(snapshot.hasError){ //스냅샷이 에러일때 return 창 실행
          return Container(child: Center(child: Text("Something went wrong. please try again later!"),),);
        }
        if(snapshot.connectionState == ConnectionState.done){ // 스냅샷 상태가 정상이면 밑의 MyApp 작동
          return MyApp();
        }
        return CircularProgressIndicator(); // 아무상태도 아니면 로딩페이지를 불러옴
      }
    );
  }
}

---

현재 버전에서인지 firebase쪽에 추가 되서인지 몰라도 이렇게만 하면 에러가 떠서 firebase 공식사이트를 따라했다.

classpath 'com.google.gms:google-services:4.3.10' 4.3.3에서 4.3.10으로 바꿨고 이 부분을 추가 해줬다. 그 결과 정상 작동 했다.

 

4. email 로그인 설정

pub.dev에서 firebase_auth를 depedencied에 추가해준다. 그 후 firebase 프로젝트로 가서 Authentication 에서 sign-in method 에서 이메일 로그인 관련 부분을 켜주면 된다.

auth_page의 하단의 _loginButton에서 _formkey가 입력됐을때 isRegister true일때 생성, false일때 로그인 기능을 만들어 준다.

---

if(isRegister){
            //create user
            UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(email: _emailController.text, password: _passwordController.text);
          }

---

이렇게 작성해준 후 만약 아이디가 생성이 되면 로그인을 위해서 page_notifire에 추가해 준다. stream을 통해 hook을 걸어서 해주면 된다(사실 무슨말인지 모름).

---

PageNotifier(){
    //authStateChanges가 상태가 바뀔때마다 알려줌.
    FirebaseAuth.instance.authStateChanges().listen((user) {
      if(user==null) showPage(AuthPage.pageName);
      else goToMain();
    });
  }

---

위와 같이 작성해주면 user에 대한 정보가 없으면 로그인이나 가입이 아니므로 로그인 페이지로 이동하고 아니면 메인페이지로 가는 코드이다. PageNotifier 안에 상단에 작성해 주면 된다.

my_home에서도 action에서 로그아웃버튼시 페이지만 옮겨주던 것을 로그아웃을 하는 코드로 바꿔준다.

---

appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
              icon: Icon(Icons.logout),
              onPressed: () {
                FirebaseAuth.instance.signOut();
              })
        ],
      )

---

가입을 해보면 파이어베이스 프로젝트에서 Authentication 의 user에 가보면 가입이 되어있는것을 확인 할 수 있다.

로그인 시 에러는 다음 시간에...