[Flutter] 회원가입 폼 만들기(2)firebase 유저등록

저번 글에서 firebase 연동하고 dependencies에 cloud_firestore설치까지 마쳤었다.
하지만 파이어베이스로 어떤 작업을 하기 위해선 firebase_core 패키지도 설치해 주어야한다.
또, 유저등록, 로그인인증 기능 등을 위해 firebase_auth도 설치해주자.

세 가지 모두 설치 됐다면 이제 로그인 기능을 구현해보자!
Firebase_core에는 Firebase.initializeApp()이라는 비동기 매서드가 있다
파이어베이스를 쓰려면 늘 이 메서드를 먼저 호출해주어야한다.
이 메서드를 쓰기 위한 준비도 필요하다.

main.dart로 가서 'package:firebase_core/firebase_core.dart' 를 먼저 import 해준 뒤,
바로 아래의 void main() 내에서 runApp()메소드 이전에 WidgetsFlutterBinding.ensureInitialized() 를 호출해주자.
(WFB라고 치면 자동완성이 뜬다)
이 메소드는 플러터의 플러그인을 사용할 때 플러그인의 초기화 메소드가 비동기방식이면, runApp()실행 전에 꼭 호출해주어야 하는 메소드이다.  WidgetsFlutterBinding.ensureInitialized()는 runApp 메소드의 시작 지점에서 Flutter 엔진과 위젯의 바인딩을 미리 완료시켜 놓는다.

파이어베이스를 사용하려면 initializeApp을, 이를 위해선 ensureInitialize를 해야한다고 알아두면 되겠다.
비동기 방식이니 당연히 main 메소드를 async 방식으로 바꿔주어야한다.

void main() async{
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    runApp(MyApp());
}
결과적으로는 위와 같은 상태에서 시작하면 될 것이다.

저번 글에서 onSaved 메소드에서 userName, userEmail, userPassword에 value 값을 저장하는 것까지 했다. 이번엔 textFormField의 onChanged 메소드를 이용해 사용자 입력값을 파이어베이스로 가져갈 것이다. 

우선 package:firebase_auth/firebase_auth.dart를 import 해주고
유저 등록, 인증에 사용할 변수를 만들어주자
final _authentication = FirebaseAuth.instance;
다음으로, 전송버튼에 사용자등록을 위한 메소드를 구현해주자
현재, onTap 메소드 내에 _tryValidation()만 구현해놓은 상태이다
그 아래에
_authentication.createUserWithEmailAndPassword(
email: userEmail,
password: userPassword)
를 작성해주자 여기서, createUserWithEmailAndPassword가 Future<UserCredential> 타입인 걸 알 수 있다. 이 메소드를 우선 newUser 이라는 final 변수에 담아주자. 또한 새유저 등록이 끝나야 다음 과정으로 넘어갈 수 있으므로 onTap 메소드에 async를, newUser에는 await를 붙여주자

onTap: () async {
                              _tryValidation();
                              final newUser = await _authentication.createUserWithEmailAndPassword(
                              email: userEmail,
                              password: userPassword);
}

여기서 끝이 아니라 회원가입시 발생할 수 있는 문제들도 고려해보아야한다.
이미 있는 계정이라든지, 올바르지 않은 형식으로 작성된 폼들의 경우 말이다
이를 대비해 try~catch문을 사용하자

onPressed: () async {
                              __tryValidation();
                          try {
                            final newUser = await _authentication
                                .createUserWithEmailAndPassword(
                                    email: userEmail, password: userPassword);
                            if (newUser.user != null) {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => LoginScreen()),
                              );
                            }
                          } catch (error) {
                            print(error);
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                content: Text(
                                    '입력된 정보를 다시 확인해주세요'),
                              ),
                            );
                          }
                            }
catch구문에서는 에러 발생시 exception을 콘솔창에 띄우도록 print(e)를 주었고
유저들도 문제를 알 수 있게끔 스낵바도 구현했다
그리고, 유저 등록에 성공했을 때, 즉 newUser.user != null 일땐 로그인 화면으로 가도록 해주었다