Google I/O 2022에서 Firebase의 새로운 기능을 확인하세요. 자세히 알아보기

전화 인증

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

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

Firebase 전화 인증은 모든 국가에서 지원되지 않습니다. 자세한 내용은 FAQ 를 참조하세요.

설정

전화 인증을 시작하기 전에 다음 단계를 수행했는지 확인하십시오.

  1. Firebase 콘솔 에서 로그인 방법으로 전화를 활성화합니다.
  2. Android : Firebase 콘솔 에서 앱의 SHA-1 해시를 아직 설정하지 않은 경우 설정합니다. 앱의 SHA-1 해시를 찾는 방법에 대한 정보는 클라이언트 인증 을 참조하십시오.
  3. iOS : Xcode에서 프로젝트에 대한 푸시 알림을 활성화 하고 APN 인증 키가 Firebase 클라우드 메시징(FCM)으로 구성 되었는지 확인합니다. 이 단계에 대한 자세한 설명을 보려면 Firebase iOS 전화 인증 문서를 참조하세요.
  4. : Firebase 콘솔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. validationCompleted : Android 기기에서 SMS 코드를 자동으로 처리합니다.
  2. validationFailed : 잘못된 전화번호 또는 SMS 할당량 초과 여부와 같은 실패 이벤트를 처리합니다.
  3. codeSent : Firebase에서 기기로 코드가 전송되었을 때 처리하며, 사용자에게 코드를 입력하라는 메시지를 표시하는 데 사용됩니다.
  4. codeAutoRetrievalTimeout : 자동 SMS 코드 처리가 실패할 때의 시간 초과를 처리합니다.

확인완료

이 핸들러는 자동 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);
  },
);

확인실패

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
  },
);

코드 전송

Firebase가 기기에 SMS 코드를 보낼 때 이 핸들러는 resendToken verificationId 트리거됩니다( 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 인스턴스를 허용합니다. 기본적으로 위젯은 로그인 흐름이 트리거될 때 보이지 않는 위젯으로 렌더링됩니다. "보이지 않는" 위젯은 애플리케이션 상단에 전체 페이지 모달로 나타납니다.

그러나 사용자가 자신을 확인하기 위해 명시적으로 눌러야 하는 인라인 위젯을 표시하는 것은 가능합니다.

인라인 위젯을 추가하려면에 DOM 요소의 ID를 지정 container 의 인수 RecaptchaVerifier 의 인스턴스입니다. 요소는 존재해야하며, 그렇지 않으면 오류가 발생합니다 비어 있습니다. 어떤 경우 container 인수가 제공되지 위젯은 "보이지 않는"로 렌더링됩니다.

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

선택적으로 사용자 정의하여 sizetheme 를 변경할 수 있습니다 크기 및 테마 위의 그림과 같이 인수를.

이 같은 reCAPTCHA를이 만료 여부 reCAPTCHA를가, 사용자가 완료 또는 오류가 발생되었는지 여부 등의 이벤트, 청취하는 것도 가능합니다 :

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

테스트

중포 기지 로컬 전화 번호를 테스트하기위한 지원을 제공합니다 :

  1. 중포 기지 콘솔에서 "전화"인증 공급자를 선택하고 드롭 다운 "을 테스트하기 위해 전화 번호"를 클릭합니다.
  2. (예 : 새 전화 번호를 입력 +44 7444 555666 )와 테스트 코드 (예 : 123456 ).

중 하나에 테스트 전화 번호를 제공하는 경우 verifyPhoneNumber 또는 signInWithPhoneNumber 방법을 더 SMS 실제로 전송되지 않습니다. 대신에 직접 테스트 코드를 제공 할 수 PhoneAuthProvider 또는 함께 signInWithPhoneNumber 의 확인 결과 핸들러입니다.