이메일 작업에서 상태 전달

비밀번호 재설정이나 사용자 이메일 확인을 위한 이메일 작업을 보낼 때 연결 URL을 통해 상태를 전달할 수 있습니다. 그러면 작업이 완료된 후 사용자가 앱으로 돌아갈 수 있습니다. 또한 모바일 애플리케이션이 설치된 경우 이메일 작업 링크를 웹페이지 대신 모바일 애플리케이션에서 직접 처리할지 여부를 지정할 수도 있습니다

이 기능은 다음과 같은 시나리오에서 매우 유용합니다.

  • 현재 로그인하지 않은 사용자가 로그인이 필요한 콘텐츠에 액세스하려고 시도합니다. 하지만 사용자가 비밀번호를 잊어버려 비밀번호 재설정 흐름을 트리거합니다. 이 흐름이 완료되면 사용자는 액세스하려고 했던 앱 섹션으로 돌아가기를 기대합니다.

  • 애플리케이션에서는 인증된 계정에만 액세스를 제공합니다. 예를 들어 뉴스레터를 구독하려면 먼저 사용자의 이메일 인증이 필요합니다. 사용자는 이메일 인증 흐름을 거친 다음 앱으로 돌아가 구독을 완료할 수 있기를 기대합니다.

  • 사용자가 휴대기기에서 흐름을 시작해 인증 후 브라우저가 아닌 모바일 앱으로 돌아가기를 기대합니다.

연결 URL을 통한 상태 전달은 Firebase 인증이 제공하는 강력한 기능으로 사용자 환경을 크게 개선할 수 있습니다.

이메일 작업에서 상태/연결 URL 전달

연결 URL을 안전하게 전달하려면 Firebase 콘솔에서 이 URL의 도메인을 승인된 도메인으로 추가해야 합니다. 아직 허용 목록에 포함되어 있지 않다면 인증 섹션에서 로그인 방법 탭의 승인된 도메인 목록에 도메인을 추가하면 됩니다.

비밀번호 재설정 이메일이나 확인 메일을 보낼 때 firebase.auth.ActionCodeSettings 인스턴스를 제공해야 합니다. 이 인터페이스는 다음과 같은 매개변수를 사용합니다.

매개변수 유형 설명
url 문자열

컨텍스트에 따라 다른 의미를 가지는 링크(상태/연결 URL)를 설정합니다.

  • 웹 작업 위젯에서 링크가 처리되는 경우 continueUrl 쿼리 매개변수의 딥 링크입니다.
  • 앱에서 링크가 직접 처리되는 경우 동적 링크의 딥 링크에 있는 continueUrl 쿼리 매개변수입니다.
iOS ({bundleId: string}|undefined) iOS 번들 ID를 설정합니다. iOS 앱이 설치되어 있다면 앱에서 링크를 열려고 시도할 것입니다. iOS 앱을 Console에 등록해야 합니다.
android ({packageName: string, installApp:boolean|undefined, minimumVersion: string|undefined}|undefined) Android 패키지 이름을 설정합니다. Android 앱이 설치되어 있다면 앱에서 링크를 열려고 시도할 것입니다. installApp이 전달되면 기기에서 Android 앱이 지원되고 아직 설치되지 않은 경우 앱을 설치할지 여부를 지정합니다. 이 필드가 packageName 없이 제공되면 packageName을 필드와 함께 제공해야 한다고 설명하는 오류가 발생합니다. minimumVersion이 지정되고 설치된 앱이 이전 버전이라면 앱을 업그레이드하기 위해 Play 스토어로 이동합니다. Android 앱을 Console에 등록해야 합니다.
handleCodeInApp (boolean|undefined) 이메일 작업 링크를 모바일 앱과 웹 링크 중 어디에서 먼저 열지 지정합니다. 기본값은 false입니다. true로 설정하면 작업 코드 링크가 범용 링크 또는 Android 앱 링크로 전송되고 앱이 설치된 경우 앱에서 열립니다. false면 코드가 먼저 웹 위젯에 전송되고 앱이 설치된 경우 계속해서 앱으로 리디렉션됩니다.
dynamicLinkDomain (string|undefined) Firebase 동적 링크를 사용하여 열려는 경우 현재 링크에 사용할 동적 링크 도메인 또는 하위 도메인을 설정합니다. 프로젝트마다 여러 동적 링크 도메인을 구성할 수 있으므로 이 필드는 명시적으로 하나를 선택할 수 있는 기능을 제공합니다. 도메인을 지정하지 않으면 기본적으로 첫 번째 도메인이 사용됩니다.

다음 예시에서는 커스텀 동적 링크 도메인 example.page.link를 사용하여 모바일 앱에서 먼저 열리는 이메일 인증 링크를 Firebase 동적 링크로 보내는 방법을 보여줍니다(앱이 아직 설치되지 않은 상태이고 최소 버전이 12인 경우 앱이 설치되는 iOS 앱 com.example.ios 또는 Android 앱 com.example.android). 딥 링크에는 연결 URL 페이로드 https://www.example.com/?email=user@example.com이 포함됩니다.

var actionCodeSettings = {
  url: 'https://www.example.com/?email=' + firebase.auth().currentUser.email,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  handleCodeInApp: true,
  // When multiple custom dynamic link domains are defined, specify which
  // one to use.
  dynamicLinkDomain: "example.page.link"
};
firebase.auth().currentUser.sendEmailVerification(actionCodeSettings)
  .then(function() {
    // Verification email sent.
  })
  .catch(function(error) {
    // Error occurred. Inspect error.code.
  });

Firebase 인증은 모바일 애플리케이션에서 열릴 링크를 보낼 때 Firebase 동적 링크를 사용합니다. 이 기능을 사용하려면 Firebase Console에서 동적 링크를 구성해야 합니다.

  1. Firebase 동적 링크를 사용 설정합니다.

    1. Firebase Console에서 Dynamic Links 섹션을 엽니다.
    2. Dynamic Links 약관에 아직 동의하지 않았으며 Dynamic Links 도메인도 만들지 않았다면 지금 동의하고 만듭니다.

      Dynamic Links 도메인을 이미 만들었다면 기록해 둡니다. Dynamic Links 도메인의 형식은 일반적으로 다음 예와 같습니다.

      example.page.link

      수신 링크를 가로채도록 Apple 또는 Android 앱을 구성할 때 이 값이 필요합니다.

  2. Android 애플리케이션을 구성합니다.

    1. Android 애플리케이션에서 이 링크를 처리하려면 Firebase 콘솔 프로젝트 설정에서 Android 패키지 이름을 지정해야 합니다. 또한 애플리케이션 인증서의 SHA-1 및 SHA-256을 제공해야 합니다.
    2. 또한 AndroidManifest.xml 파일의 딥 링크에 대한 인텐트 필터도 구성해야 합니다.
    3. 자세한 내용은 Android 동적 링크 수신 안내를 참조하세요.
  3. iOS 애플리케이션을 구성합니다.

    1. iOS 애플리케이션에서 이 링크를 처리하려면 Firebase Console 프로젝트 설정에서 iOS 번들 ID를 지정해야 합니다. App Store ID와 Apple Developer Team ID도 지정해야 합니다.
    2. 또한 애플리케이션 기능에서 FDL 범용 링크 도메인을 연결된 도메인으로 구성해야 합니다.
    3. iOS 버전 8 이하에 애플리케이션을 배포하려면 iOS 번들 ID를 수신 URL의 맞춤 스키마로 설정해야 합니다.
    4. 자세한 내용은 iOS 동적 링크 수신 안내를 참조하세요.

웹 애플리케이션에서 이메일 작업 처리

모바일 애플리케이션을 사용할 수 있는 경우 먼저 웹 애플리케이션의 작업 코드 링크를 처리하고 정상적으로 완료된 후 다른 웹페이지 또는 모바일 애플리케이션으로 리디렉션할지 여부를 지정할 수 있습니다. firebase.auth.ActionCodeSettings 객체에서 handleCodeInAppfalse로 설정하면 됩니다. iOS 번들 ID 또는 Android 패키지 이름은 필수 항목이 아니지만 제공할 경우 이메일 작업 코드 완료 시 사용자가 지정된 앱으로 다시 리디렉션될 수 있습니다.

여기에 사용된 웹 URL은 이메일 작업 템플릿 섹션에서 구성된 URL입니다. 모든 프로젝트에 기본 URL이 프로비저닝됩니다. 이메일 작업 핸들러 맞춤설정 방법에 대한 자세한 내용은 이메일 핸들러 맞춤설정을 참조하세요.

이 경우 continueUrl 쿼리 매개변수의 링크는 페이로드가 ActionCodeSettings 객체에 지정된 URL인 FDL 링크가 됩니다. 추가 종속 항목 없이 앱의 수신 링크를 가로채 처리할 수 있지만 FDL 클라이언트 라이브러리를 사용해 딥 링크를 파싱하는 것이 좋습니다.

이메일 인증과 같은 이메일 작업을 처리할 때는 oobCode 쿼리 매개변수의 작업 코드를 딥 링크에서 파싱한 다음 applyActionCode를 통해 변경사항이 적용되도록 합니다(즉, 이메일 인증).

모바일 애플리케이션에서 이메일 작업 처리

모바일 애플리케이션이 설치된 경우 먼저 모바일 애플리케이션의 작업 코드 링크를 처리할지 여부를 지정할 수 있습니다. Android 애플리케이션을 사용하면 android.installApp을 통해 기기가 앱을 지원하고 아직 설치되지 않은 경우 앱을 설치하도록 지정할 수 있습니다. 모바일 애플리케이션을 지원하지 않는 기기에서 링크를 클릭하면 대신 웹페이지에서 링크가 열립니다. firebase.auth.ActionCodeSettings 객체에서 handleCodeInApptrue로 설정하면 됩니다. 모바일 애플리케이션 Android 패키지 이름 또는 iOS 번들 ID도 지정해야 합니다.

사용할 수 있는 모바일 앱이 없을 때 여기에 사용된 대체 웹 URL은 이메일 작업 템플릿 섹션에서 구성된 URL입니다. 모든 프로젝트에 기본 URL이 프로비저닝됩니다. 이메일 작업 핸들러 맞춤설정 방법에 대한 자세한 내용은 이메일 핸들러 맞춤설정을 참조하세요.

이 경우 사용자에게 전송되는 모바일 앱 링크는 페이로드가 Console에서 쿼리 매개변수 oobCode, mode, apiKey, continueUrl을 사용해 구성된 작업 코드 URL인 FDL 링크입니다. continueUrl은 ActionCodeSettings 객체에 지정된 원래의 URL입니다. 추가 종속 항목 없이 앱의 수신 링크를 가로채 처리할 수 있지만 FDL 클라이언트 라이브러리를 사용해 딥 링크를 파싱하는 것이 좋습니다. 이메일 핸들러 맞춤설정 섹션에 설명된 웹 흐름에서 처리하는 방식과 유사한 방법으로 모바일 애플리케이션에서 작업 코드를 직접 적용할 수 있습니다.

이메일 인증과 같은 이메일 작업을 처리할 때는 oobCode 쿼리 매개변수의 작업 코드를 딥 링크에서 파싱한 다음 applyActionCode를 통해 변경사항이 적용되도록 합니다(즉, 이메일 인증).