[플러터3.0, 파이어베이스] 파이어 베이스 폰 인증 하기

firebase에는 여러가지 기능들이 있는데 이번에는 전화번호인증(Phone Authentication) 하는 법에 대해 알아보도록 하겠습니다. 

---

참고사이트

• https://console.firebase.google.com/
• https://firebase.google.com/docs/flutter/setup
• https://firebase.google.com/docs/auth/flutter/phone-auth?hl=ko

---

필요한 패키지

• firebase_core: ^1.20.1
• firebase_auth: ^3.6.3

---

기초 작업

• 패키지를 설치한다 
• 파이어베이스에 프로젝트를 만든다. 
• 프로젝트와 파이어베이스를 연결한다. 

여기 까지의 과정은 아래 링크에 나와 있으니 참조하시기 바랍니다. 

2022.07.03 - 플러터와 파이어베이스 1탄 - 플러터 3.0 업데이트 후 파이어베이스(firebase) 연동(1)

플러터와 파이어베이스 1탄 - 플러터 3.0 업데이트 후 파이어베이스(firebase) 연동(1)

2022.06.07 - 플러터와 파이어베이스 1탄- 플러터 3.0 업데이트 후 파이어베이스(firebase) 연동(2)

플러터와 파이어베이스 1탄- 플러터 3.0 업데이트 후 파이어베이스(firebase) 연동(2)

---

파이어베이스 초기화

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Provider.debugCheckInvalidValueType = null;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final Future<FirebaseApp> initializeFireBase = Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: initializeFireBase,
        builder: (_, snapshot) {

• WidgetsFlutterBinding.ensureInitialized(); 이건 메인 함수에서 한번 실행해야되는 필수 요소입니다. 
• initializeFireBase를 만들어서 퓨쳐 빌더에 넣어주셔도 되고 아예 메인함수에 async await 형태로 넣으셔도 됩니다. 

여기까지가 파이어베이스를 사용하기 위해서 해야되는 기본 요소입니다. 

---

파이어베이스로 인증 구현 핸드폰 인증(Phone Authentication) 시작

전화번호 로그인 화면 구성

구현된 화면 

Phone Authentication에 핵심은 verifyPhoneNumber 함수

FirebaseAuth.instance.verifyPhoneNumber

이 함수에는 5가지 매개변수를 넣어야 하는데 다음과 같습니다. 

• phoneNumber: 입력받은 전화번호
• verificationCompleted: Android 기기에서 SMS 코드를 자동으로 처리합니다 → 안드로이드 인증문자 오면 자동 로그인 해주는 부분
• verificationFailed: 잘못된 전화번호 또는 SMS 할당량 초과 여부와 같은 실패 이벤트를 처리합니다
• codeSent: Firebase에서 기기로 코드가 전송되었을 때 처리하며, 사용자에게 코드를 입력하라는 메시지를 표시하는 데 사용됩니다.
• codeAutoRetrievalTimeout: 자동 SMS 코드 처리가 실패할 때의 시간 초과를 처리합니다.

verifyPhoneNumber 함수 전체 코드 (인증문자 받기 버튼을 누르면 실행되는 코드)

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  forceResendingToken: _resendToken, // 인증번호를 잘못 입력시 다시 입력하기 위한 부분
  
  phoneNumber: phoneNumber, // 입력받은 전화번호
  
  codeAutoRetrievalTimeout:
      (String verificationId) {},
      
      
  verificationCompleted:
      (PhoneAuthCredential credential) async {
    await auth.signInWithCredential(credential);
  },
  
  
  verificationFailed: (FirebaseAuthException e) {
    logger.e(e.message);
    setState(() {
      _verificationStatus = VerificationStatus.none;
    });
  },
  
  // 핵심적인 부분
  codeSent: (String verificationId,
      int? resendToken) async {
    logger.d("인증");
    _verificationId = verificationId;
    _resendToken = resendToken;
    setState(() {
      _verificationStatus =
          VerificationStatus.codeSent;
    });
  },
);

• 핵심적인 codeSent 부분은 인증이 이루어질때 PhoneAuthCredential을 만들어야 하는데 필요한 verificationId를 클래스 변수로 선언한 _verificationId에 저장하는 부분입니다. 

인증이 이루어지는 부분은 signInWithCredential(): 인증번호 확인 버튼을 누르면 실행되는 코드

PhoneAuthCredential credential = PhoneAuthProvider.credential(
    verificationId: _verificationId!, smsCode: _numberController.text);

await FirebaseAuth.instance.signInWithCredential(credential);

 signInWithCredential()에는 PhoneAuthCredential 자료형을 넣어주어야 하는데 이 자료형에는 인증코드(smsCode)와 앞선 codeSent 부분에서 저장된 verificationId 입력하여 만듭니다. 

이렇게 하여 이부분(FirebaseAuth.instance.signInWithCredential(credential)) 이 실행되면 전화번호 인증은 완료됩니다. 

 

몬가 복잡해 보이지만 자세히 보면 상당히 간편하게 폰인증 기능을 앱에 구현할수 있습니다.