전화 인증

전화 인증을 사용하면 사용자가 전화를 인증자로 사용하여 Firebase에 로그인할 수 있습니다. 제공된 전화번호를 사용하여 고유 코드가 포함된 SMS 메시지가 사용자에게 전송됩니다. 코드가 승인되면 사용자가 Firebase에 로그인할 수 있습니다.

Google은 Firebase를 포함하되 이에 국한되지 않는 Google 서비스 전반에서 스팸 및 악용 사례를 방지하기 위해 최종 사용자가 인증용으로 제공하는 전화번호를 전송하고 저장합니다. 개발자는 Firebase 인증 전화번호 로그인 서비스를 사용하기 전에 최종 사용자로부터 적절한 동의를 얻어야 합니다.

Firebase 전화 인증은 일부 국가에서만 지원됩니다. 자세한 내용은 FAQ를 참조하세요.

설정

전화 인증을 시작하기 전에 다음 단계를 따르세요.

1. Firebase Console에서 전화를 로그인 방법으로 사용 설정합니다.
2. Android: Firebase Console에서 앱의 SHA-1 해시를 아직 설정하지 않았다면 지금 설정합니다. 앱의 SHA-1 해시를 찾는 방법은 클라이언트 인증을 참조하세요.
3. iOS: Xcode에서 프로젝트에 푸시 알림을 사용 설정하고 APN 인증 키가 Firebase 클라우드 메시징(FCM)으로 구성되었는지 확인합니다. 또한 원격 알림에 백그라운드 모드를 사용 설정해야 합니다. 이 단계에 대한 자세한 설명은 Firebase iOS 전화 인증 문서를 참조하세요.
4. 웹: Firebase Console의 OAuth 리디렉션 도메인에서 애플리케이션 도메인을 추가했는지 확인합니다.

참고: 전화번호 로그인은 실제 기기와 웹에서만 사용할 수 있습니다. 기기 에뮬레이터에서 인증 흐름을 테스트하려면 테스트를 참조하세요.

사용

Flutter용 Firebase 인증 SDK는 전화번호로 사용자를 로그인 처리하는 두 가지 방법을 제공합니다. 네이티브(예: Android 및 iOS) 플랫폼은 전화번호 검증에 서로 다른 기능을 제공하므로 각 플랫폼에 독점적으로 사용할 수 있는 두 가지 방법이 있습니다.

• 네이티브 플랫폼: verifyPhoneNumber.
• 웹 플랫폼: signInWithPhoneNumber.

네이티브: verifyPhoneNumber

네이티브 플랫폼에서는 사용자의 전화번호가 먼저 인증된 후 사용자가 로그인하거나 계정을 PhoneAuthCredential에 연결할 수 있습니다.

먼저 사용자에게 전화번호를 요청해야 합니다. 전화번호가 제공되면 verifyPhoneNumber() 메서드를 호출합니다.

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

처리해야 하는 콜백은 4개가 있으며, 각각 애플리케이션 UI 업데이트 방법이 다릅니다.

1. verificationCompleted: Android 기기의 SMS 코드 자동 처리.
2. verificationFailed: 잘못된 전화번호나 SMS 할당량 초과 여부 등의 실패 이벤트를 처리합니다.
3. codeSent: Firebase에서 기기로 코드가 전송된 경우를 처리하며 사용자에게 코드를 입력하라는 메시지를 표시하는 데 사용됩니다.
4. codeAutoRetrievalTimeout: 자동 SMS 코드 처리에 실패한 경우 시간 초과를 처리합니다.

verificationCompleted

이 핸들러는 자동 SMS 코드 확인을 지원하는 Android 기기에서만 호출됩니다.

SMS 코드가 기기로 전송되면 Android는 사용자가 코드를 직접 입력하지 않아도 SMS 코드를 자동으로 인증합니다. 이 이벤트가 발생하면 PhoneAuthCredential이 자동으로 제공되고 사용자의 전화번호로 로그인하거나 연결하는 데 사용될 수 있습니다.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

verificationFailed

Firebase에서 잘못된 전화번호 등에 대한 오류를 반환하거나 프로젝트의 SMS 할당량이 초과된 경우 FirebaseAuthException이 이 핸들러로 전송됩니다. 이 경우 오류 코드에 따라 사용자에게 문제가 발생했다는 메시지를 표시합니다.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

codeSent

Firebase가 기기에 SMS 코드를 전송하면 이 핸들러가 verificationId 및 resendToken으로 트리거됩니다(resendToken은 Android 기기에서만 지원되며 iOS 기기는 항상 null 값을 반환합니다).

트리거된 후에는 사용자에게 올바른 SMS 코드를 입력하라는 메시지를 표시하도록 애플리케이션 UI를 업데이트하는 것이 좋습니다. SMS 코드가 입력되면 인증 ID와 SMS 코드를 결합하여 새 PhoneAuthCredential을 만들 수 있습니다.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

기본적으로 Firebase는 최근에 전송된 경우 새 SMS 메시지를 다시 전송하지 않습니다. 하지만 forceResendingToken 인수에 대한 재전송 토큰으로 verifyPhoneNumber 메서드를 다시 호출하여 이 동작을 재정의할 수 있습니다. 성공하면 SMS 메시지가 다시 전송됩니다.

codeAutoRetrievalTimeout

자동 SMS 코드 확인을 지원하는 Android 기기에서는 기기가 특정 기간 내에 SMS 메시지를 자동으로 확인하지 않으면 이 핸들러가 호출됩니다. 이 기간이 지나면 기기에서 더 이상 수신 메시지를 확인하려고 시도하지 않습니다.

기본적으로 기기는 30초 동안 대기하지만 timeout 인수로 이를 맞춤설정할 수 있습니다.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

웹: signInWithPhoneNumber

웹 플랫폼에서 사용자는 제공된 전화번호로 전송된 SMS 코드를 입력하는 방식으로 휴대전화에 액세스할 수 있는지 확인하여 로그인할 수 있습니다. 보안 및 스팸 방지를 강화하기 위해 사용자는 Google reCAPTCHA 위젯을 완료하여 실제 사람임을 증명해야 합니다. 확인이 완료되면 SMS 코드가 전송됩니다.

Flutter용 Firebase 인증 SDK는 기본적으로 reCAPTCHA 위젯을 관리하지만, 필요한 경우 표시 및 구성 방법을 제어할 수 있습니다. 시작하려면 전화번호로 signInWithPhoneNumber 메서드를 호출합니다.

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

메서드를 호출하면 먼저 reCAPTCHA 위젯이 표시됩니다. 사용자는 SMS 코드가 전송되기 전에 테스트를 완료해야 합니다. 완료되면 확인된 ConfirmationResult 응답의 confirm 메서드에 SMS 코드를 제공하여 사용자를 로그인 처리할 수 있습니다.

UserCredential userCredential = await confirmationResult.confirm('123456');

다른 로그인 흐름과 마찬가지로, 성공적으로 로그인하면 애플리케이션 전체에서 구독한 인증 상태 리스너가 트리거됩니다.

reCAPTCHA 구성

reCAPTCHA 위젯은 웹 애플리케이션에 보안을 제공하는 완전 관리형 흐름입니다.

signInWithPhoneNumber의 두 번째 인수는 위젯을 관리하는 데 사용할 수 있는 선택적 RecaptchaVerifier 인스턴스를 허용합니다. 기본적으로 로그인 흐름이 트리거되면 위젯이 보이지 않는 위젯으로 렌더링됩니다. '보이지 않는' 위젯은 애플리케이션 상단에 전체 페이지 모달로 표시됩니다.

그러나 사용자가 명시적으로 눌러서 직접 확인해야 하는 인라인 위젯이 표시될 수는 있습니다.

인라인 위젯을 추가하려면 RecaptchaVerifier 인스턴스의 container 인수에 DOM 요소 ID를 지정합니다. 이 요소는 반드시 있어야 하며 비어 있으면 오류가 발생합니다. container 인수가 제공되지 않으면 위젯이 '보이지 않는' 것으로 렌더링됩니다.

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

원하는 경우 위와 같이 size 및 theme 인수를 맞춤설정하여 크기와 테마를 변경할 수 있습니다.

또한 사용자가 reCAPTCHA를 완료했는지, reCAPTCHA가 만료되었는지, 오류가 발생했는지와 같은 이벤트를 수신 대기할 수 있습니다.

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

테스트

Firebase는 로컬 테스트 전화번호를 지원합니다.

1. Firebase Console에서 '전화' 인증 제공업체를 선택하고 '테스트용 전화번호' 드롭다운을 클릭합니다.
2. 새로운 전화번호(예: +44 7444 555666)와 테스트 코드(예: 123456)를 입력합니다.

verifyPhoneNumber 또는 signInWithPhoneNumber 메서드에 테스트 전화번호를 제공하면 실제로 SMS가 전송되지 않습니다. 대신, PhoneAuthProvider에 직접 또는 signInWithPhoneNumber의 확인 결과 핸들러를 사용하여 테스트 코드를 제공할 수 있습니다.