Flutter와 Firebase로 Android iOS 둘 다 만들기 20 회원가입 적용하기

회원가입 페이지를 만들고 이메일로 회원가입을 해봅니다.

개요

단순 회원가입은 로그인 만큼 쉽습니다.

메써드만 바꿔주면 그만이기 때문입니다.

하지만 아무나 회원가입 시킬 경우 가입봇의 희생양이 될 수 있습니다.

회원가입 폼을 검사하고 이메일 유효성 체크 까지 할 수 있도록 만들어 보겠습니다.

파이어베이스 세팅

먼저 이메일 인증을 사용하려면 로그인 방법을 추가해야합니다.

회원가입 폼 추가

지난번 로그인에서 패스워드와 이름 넣는 정도만 추가했습니다.

화면 디자인에 대한 설명은 지난 번에 설명했으므로 생략합니다.

이메일 로그인 버튼

signup.dart

SignInButtonBuilder(
  text: 'Sign up with Email',
  icon: Icons.email,
  backgroundColor: Colors.blueGrey[700],
  onPressed: () async {
    if (!_formKey.currentState.validate()) return;
    if (passwordInputController.text != confirmPasswordInputController.text) {
      toastError(_scaffoldKey, PlatformException(code: 'signup', message: 'Please check your password again.'));
      return;
    }
    try {
      setState(() => _loading = true);
      final r = await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: emailInputController.text, 
        password: passwordInputController.text
      );
      final userInfo = new UserUpdateInfo();
      userInfo.photoUrl = 'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x.png';
      userInfo.displayName = firstNameInputController.text + ' ' + lastNameInputController.text;
      await r.user.updateProfile(userInfo);
      await r.user.reload();
      await r.user.sendEmailVerification();
      Navigator.pushNamedAndRemoveUntil(context, '/auth', (route) => false);
    } catch (e) {
      toastError(_scaffoldKey, e);
      print(e);
    } finally {
      if (mounted) setState(() => _loading = false);
    }      
  },
),

파이어베이스 로그인을 하기 전에 전처리 검사인 폼검사와 패스워드 확인검사를 합니다.

파이어베이스 로그인(createUserWithEmailAndPassword)을 하고 나면 유저 정보를 얻을 수 있습니다.

이 때 updateProfile을 통해 displayName, photoUrl등을 변경해줍니다.(초기값 null)

가입 당시 해주지 않으면 다른 화면에서 null 검사등이 매우 귀찮아 지기 때문입니다. 예제에는 의미 없는 링크를 넣어봤습니다.

이메일 검증(sendEmailVerification())을 통해 해당 이메일 가입자에게 메일이 전송됩니다.

모든 페이지를 지우고 인증페이지로 갑니다.

인증 화면

이메일 검사

auth.dart

streamOpen() {
  _subscriptionAuth = FirebaseAuth.instance.onAuthStateChanged.listen((fu) {
    if (fu == null) { 
      Navigator.pushReplacementNamed(context, '/signin');
      return;
    }    
    setState(() => _firebaseUser = fu);
    if (!fu.isEmailVerified) {
      setState(() => _message = 'Email is not authenticated.');
      return; 
    }
    Navigator.pushReplacementNamed(context, '/home');
  });
}

로그인은 되어 있으나 이메일이 유효하지 않으면 메세지만 바꿔주고 다른 페이지로 이동시키지 않습니다.

이메일 인증 확인 화면

이메일이 확인되지 않았을 때 화면입니다.

이메일 확인

이메일을 확인하고 나면 위와 같은 페이지가 열립니다.

이메일 확인 버튼

auth.dart

Widget _buildReloadButton() {
  return RaisedButton(
    child: Text('Email Confirmed'),
    onPressed: () async {
      final u = await FirebaseAuth.instance.currentUser();
      await u.reload();
      if (!u.isEmailVerified) {          
        toastError(_scaffoldKey, 'Email is not authenticated. please try again');          
        return;
      }
      Navigator.pushReplacementNamed(context, '/home');
    },
  );
}

현재 사용자 정보를 가져와서 갱신합니다.

이메일 확인이 되었다면 메인페이지로 이동합니다.

이메일 확인을 했다고 onAuthStateChanged 들어 오지 않기 때문에 이렇게 수동으로 뭔가 해줘야합니다. 타이머를 돌려서 체크하는 방법이 좋을 것 같은데 원리만 알려드리기 위해 간단히 꾸며봅니다.

소스

지난번 설명드렸던 부분은 모두 패스했고 모양을 내다보니 양이 많아서 아래 소스를 참고하시기 바랍니다.

https://github.com/fkkmemi/ff2

영상