[042] 플러터 (Flutter) 배우기 - Firebase Auth 연동2 (휴대폰 문자 인증)

안녕하세요~ totally 개발자입니다.

 

Firebase Authentication

 

저번 시간에 이어서 오늘은 Firebase Authentication(인증) 전화번호를 활용해서 문자 메시지 숫자코드를 받아 인증하는 방법에 대해서 알아보도록 하겠습니다.

 

Step 1: 파이어베이스에 접속하여 Authentication -> Sign-in method -> 새 제공업체 추가 버튼을 눌러줍니다.

 

 

 

Step 2: 다음처럼 추가해주시고 테스트용 전화번호 있는 경우에는 예시용 인증코드로 사용할 코드와 전화번호 넣어주셔서 저장해주시면 됩니다.

 

 

 

Step 3: ios simulator 환경에서 SMS 코드 수신을 위해 Xcode를 열어줍니다. (맥북 사용자 기준) ios 경로로 들어가셔서 Runner.xcodeproj 파일을 열어주시면 됩니다. 그리고 TARGETS에 있는 Runner -> Info -> URL Types (0)을 열어줍니다.

 

 

 

Step 4: + 버튼을 눌러줍니다.

 

 

 

Step 5: ios -> Runner -> GoogleService-Info.plist 파일을 열어주고 8번째에 있는 Reversed_client_id를 복사합니다.

 

 

 

Step 6: 여기 URL Schemes에 붙여주시기만 하면 됩니다.

 

 

 

Step 7: LoginPhone.dart 파일을 생성하여 코드를 작성합니다.

 

먼저 필요한 변수들을 선언해줍니다.

 

다음처럼 위젯을 배치합니다 _codeSent (SMS 코드가 보내졌는지 여부에 따라 위젯들을 다르게 보여줍니다.

 

smsCodeInput 위젯을 다음처럼 만들어줍니다.

 

 

submit 버튼을 눌렀을 때 즉 SMS 전송 버튼을 누르면 다음처럼 작동될 수 있도록 만들어줍니다. 113~116번째를 통해 코드가 전송되었다면 setState를 통해 _codeSent를 true로 업데이트해줍니다.

 

마지막으로 verifyButton 위젯 부분을 다음처럼 구성하여 144~146번째에 성공적으로 진행되면 메인 페이지로 이동하게 만들어줍니다.

 

 

Step 8: 테스트를 진행해봅니다.

 

 

휴대폰 번호를 +82로 시작하여 +8210 형태로 입력해줍니다 (물론 추후에는 이것을 +82를 기본값으로 추가해주면 됩니다. 실제 본인 휴대폰 번호로 하시면 됩니다.

 

이런 창이 나오면서 아래처럼 문자가 오면 입력해줍니다.

 

 

 

이렇게 Verify 눌러주시면 

 

최종적으로 이렇게 로그인이 된 것을 알 수 있습니다.

 

또한 파이어베이스 Authentication 들어가면 사용자가 +8210 이렇게 제대로 추가된 것을 확인해볼 수 있습니다.

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/cunfOEb7tOM