SMS 인증

Flutter 앱에서 SMS를 사용하여 인증 기능을 구현하는 방법을 안내합니다. SMS 인증은 사용자가 휴대폰 번호로 인증 코드를 받아 인증하는 간단하면서도 효과적인 방법입니다.

SMS 인증 과정

SMS 인증은 주로 다음 세 가지 단계로 구성됩니다.

1. 휴대폰 번호 입력: 사용자는 앱에서 휴대폰 번호를 입력합니다. 이 번호로 인증 코드를 받게 됩니다.

2. 인증 코드 전송: 입력한 휴대폰 번호로 인증 코드가 전송됩니다.

3. 인증 코드 확인: 사용자는 받은 인증 코드를 입력하여 인증을 완료합니다.

1. 휴대폰 번호 입력

사용자는 앱 내에서 휴대폰 번호를 입력합니다. 입력한 번호로 인증 코드를 받게 됩니다.

TextFormField(
              key: keys[0],
              focusNode: focusNodes[0],
              inputFormatters: [
                FilteringTextInputFormatter.digitsOnly,
                maskFormatter,
              ],
              keyboardType: TextInputType.number,
              onChanged: (text) => setState(() {
                text = maskFormatter.unmaskText(text);
              }),
            );

• 휴대폰 번호 입력 필드: 사용자는 휴대폰 번호를 입력할 수 있는 필드를 사용합니다. 이 필드는 번호의 형식을 지켜야 하며, 휴대폰 번호를 마스킹하는 등의 기능을 구현할 수 있습니다.

• "인증번호 전송" 버튼: 사용자가 번호를 입력한 후에는 인증 코드를 받을 수 있도록 "인증번호 전송" 버튼을 누릅니다.

2. 인증 코드 전송

휴대폰 번호를 입력한 후, 입력한 번호로 인증 코드가 전송됩니다.

Future<void> _receiveAuthNumber() async {
    FirebaseAuth.instance.setLanguageCode("ko");

    await FirebaseAuth.instance.verifyPhoneNumber(
      timeout: const Duration(minutes: 2),
      codeAutoRetrievalTimeout: (String verificationId) {},
      phoneNumber:
          "+8210${keys[0].currentState!.value.toString().replaceAll(RegExp(r'[^0-9]'), "").substring(3)}",
      verificationCompleted: (phoneAuthCredential) async {
        print('전송 성공: ${phoneAuthCredential.token}');
      },
      verificationFailed: (verificationFailed) async {
        print('전송 실패: ${keys[0].currentState!.value.toString()}');
      },
      codeSent: (verificationId, resendingToken) async {
        flutterToast.info(
          message: "${keys[0].currentState!.value.toString()}로 인증코드를 발송하였습니다.",
        );
        setState(() {
          isTimerRunning = true;
          isPhoneAuthSuccessed = false;
        });
      this.verificationId = verificationId;
      },
    );
  }

• 인증번호 전송 버튼 클릭: 이 버튼을 클릭하면 입력한 휴대폰 번호로 인증 코드가 전송됩니다. 사용자에게 전송 완료 메시지가 표시됩니다.

3. 인증 코드 확인

사용자가 인증 코드를 받은 후, 해당 코드를 입력하여 인증을 완료합니다.

Future<void> _signInWithPhoneAuthCredential(
      PhoneAuthCredential phoneAuthCredential) async {
    try {
      final authCredential =
          await FirebaseAuth.instance.signInWithCredential(phoneAuthCredential);
      if (authCredential.user != null) {
        await FirebaseAuth.instance.currentUser?.delete();
        FirebaseAuth.instance.signOut();
      }
      flutterToast.info(
        message: "인증확인",
      );
      print('인증 성공');
      setState(() {
        isTimerRunning = false;
        isPhoneAuthSuccessed = true;
      });
    } on FirebaseAuthException catch (error) {
      print(error);
    }
  }

• 인증 코드 입력 필드: 사용자는 받은 인증 코드를 입력할 수 있는 필드를 사용합니다.

• "인증확인" 버튼: 사용자가 인증 코드를 입력한 후, "인증확인" 버튼을 누르면 입력한 코드가 검증되고 인증이 완료됩니다.

SMS 인증은 사용자가 앱을 빠르게 인증하고 보안을 유지하는 간편한 방법입니다. Flutter를 사용하여 SMS 인증을 구현하면 사용자 경험을 개선하고 보안을 강화할 수 있습니다.