Flutter - 로그인시 에러, 이메일 인증 확인, 템플릿 변경, login

1. creat user 를 할 시에 여러가지 에러 상황이 발생할 수 있다.

그때를 대비해서 try catch 문을 이용한다.

catch 도 그냥 catch가 아닌 catch 앞에 on FirebaseAuthException으로 해준다.

---

  /// Tries to create a new user account with the given email address and
  /// password.
  ///
  /// A [FirebaseAuthException] maybe thrown with the following error code:
  /// - **email-already-in-use**:
  ///  - Thrown if there already exists an account with the given email address.
  /// - **invalid-email**:
  ///  - Thrown if the email address is not valid.
  /// - **operation-not-allowed**:
  ///  - Thrown if email/password accounts are not enabled. Enable
  ///    email/password accounts in the Firebase Console, under the Auth tab.
  /// - **weak-password**:
  ///  - Thrown if the password is not strong enough.

---

에러 발생 상황을 참조하여 e.code를 이용하여 코드를 짜준다.

---

		    try {
              UserCredential userCredential = await FirebaseAuth.instance
                  .createUserWithEmailAndPassword(
                  email: _emailController.text,
                  password: _passwordController.text
              );
            } on FirebaseAuthException catch(e){ //모든에러가 아니라 FirebaseAuthException 만 받아올꺼라 catch 앞에 써줌
              if(e.code == 'email-already-in-use'){
                //snakbar는 scaffold 안에서 보여줘야 하므로 _AuthWidgetState에 만들어준다.
                SnackBar snackBar = SnackBar(content: Text('해당 이메일은 이미 사용중 입니다.'));
                _scaffoldKey.currentState.showSnackBar(snackBar); //이방식으로 불러오는것은 2.0에서 추천하지 않음 https://www.kindacode.com/article/flutter-snackbar/ 참고 해서 바꿀것
              }else if(e.code == 'invalid-email'){
                SnackBar snackBar = SnackBar(content: Text('유효하지 않은 이메일 입니다..'));
                _scaffoldKey.currentState.showSnackBar(snackBar);
              }else if(e.code == 'operation-not-allowed'){
                SnackBar snackBar = SnackBar(content: Text('허용되지 않은 이메일 입니다..'));
                _scaffoldKey.currentState.showSnackBar(snackBar);
              }else if(e.code == 'weak-password'){
                SnackBar snackBar = SnackBar(content: Text('암호의 보안수준이 약합니다..'));
                _scaffoldKey.currentState.showSnackBar(snackBar);
              }
            }

---

가입 부분을 위와 같이 바꿔주면 된다.

 

2. 이메일 인증 확인

이메일이 존재하는지 확인해 줘야 한다. 페이지를 추가로 만들어줘야 하는데 https://github.com/thecodingpapa/template_by_thecodingpapa/blob/email_verification/lib/pages/check_your_email.dart 주소에서 그대로 복사해서 pages에 만들어 주면 된다.

main.dart에 체크페이지로 넘어갈 부분을 작성해준다. AuthPage로 가는 if문 아래에 작성해준다.

---

if (pageNotifier.curPage == CheckYourEmail.pageName) CheckYourEmail()

---

또한 PageNotifier 에서 main으로 가는게 아닌 check 페이지로 갈 수 있도록 변경 해준다.

---

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

---

위와 같이 변경해서 이메일을 확인했으면 메인으로 그렇지 않으면 체크하는 페이지로 넘어가게 해준다.

check_your_email 페이지에서 이메일 확인 메일을 보내면 스낵바를 사용하기 위한 scaffoldState를 만들어 준다.

---

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

---

그리고 하단의 Scaffold에 옵션 key: _scaffoldKey,를 추가해서 key를 사용할 수 있게 해준다.

그리고 _sendVerification()에 이메일을 보내는 메소드와 스낵바를 추가해 준다.

---

      onPressed: () async {
        FirebaseAuth.instance.currentUser.sendEmailVerification();//이메일확인을 보내는 기능
        SnackBar snackBar = SnackBar(
            content: Text("해당 이메일 안에 링크로 이메일 확인을 부탁드립니다.")
        );
        _scaffoldKey.currentState.showSnackBar(snackBar);
      }

---

또한 이메일 인증을 못할 때를 대비하여 signout 기능도 만들어 준다.

---

  Widget _signout() {
    return FlatButton(
      onPressed: () async {
        FirebaseAuth.instance.signOut();
      },
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      padding: EdgeInsets.all(16),
      color: Colors.white54,
      textColor: Colors.black87,
      child: Text(
        "User other account. Sign out!",
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
      ),
    );
  }

---

버튼이 있는 부분에 _signout()도 추가해주면 버튼이 나오는 것을 확인 할 수 있다.

그 후 이메일 확인을 했나 확인하는 기능도 추가하면 된다. page_notifier에 메소드를 추가한다.

---

  void refresh(){
    FirebaseAuth.instance.currentUser.reload(); //이걸 써줘야 현재 상태를 갱신해줌
    User user = FirebaseAuth.instance.currentUser; //이것만 쓰면 캐시에 담긴 현재 유저 상태라 false로 불러옴 firebase와 연동이 안되어 있음.
  }

---

여기서 메소드내에 2번째 줄만 작성시 false를 불러온다. firebase에 연동이 되어 있지않아 앱 내의 캐시에서 읽어 오므로 false 상태이다. 그러므로 1번째 줄의 reload를 이용하여 sync하여 현재 상태를 새로 불러와 준다.

상단의 PageNotifier의 if문도 refresh() 안에 하단으로 넣어주면 된다.

여기서 추가해 줄 수 있다면 다이나믹링크를 이용해서 메일로 온 확인링크를 누를 시 앱으로 다시 오게 만들 수 도 있다.

 

3. 이메일 템플릿 변경

firebase 프로젝트 안에서 Authentication에서 Templates에서 이메일 인증, 암호 변경등을 변경 할 수 있다. 자신의 도메인을 쓴다면 도메인으로 변경 할 수도 있다. 이부분은 다른 영상이나 블로그를 참조하면 좋을 듯 하다.

 

4. 로그인 구현

auth_page의 loginButton에 로그인 기능을 만들어줘야한다.

가입과 마찬가지로 try catch로 구현해주고 signInWithEmailAndPassword 를 확인하여 어떤 에러가 있는지 if문을 통해 보여주면 된다.

---

    	try {
              await FirebaseAuth.instance.signInWithEmailAndPassword(
                  email: _emailController.text,
                  password: _passwordController.text
              );
            }on FirebaseAuthException catch(e){
              if(e.code == 'user-disabled'){
                //snakbar는 scaffold 안에서 보여줘야 하므로 _AuthWidgetState에 만들어준다.
                SnackBar snackBar = SnackBar(content: Text('user-disabled'));
                _scaffoldKey.currentState.showSnackBar(snackBar); //이방식으로 불러오는것은 2.0에서 추천하지 않음 https://www.kindacode.com/article/flutter-snackbar/ 참고 해서 바꿀것
              }else if(e.code == 'invalid-email'){
                SnackBar snackBar = SnackBar(content: Text('유효하지 않은 이메일 입니다.'));
                _scaffoldKey.currentState.showSnackBar(snackBar);
              }else if(e.code == 'user-not-found'){
                SnackBar snackBar = SnackBar(content: Text('user-not-found'));
                _scaffoldKey.currentState.showSnackBar(snackBar);
              }else if(e.code == 'wrong-password'){
                SnackBar snackBar = SnackBar(content: Text('wrong-password'));
                _scaffoldKey.currentState.showSnackBar(snackBar);
              }
            }

---

위와 같이 작성해주면 정상 작동 함을 알 수 있다.