Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

FirebaseUI를 사용하여 웹 앱에 쉽게 로그인 추가

FirebaseUI 는 앱에서 사용할 드롭인 UI 흐름을 제공하는 Firebase 인증 SDK를 기반으로 구축된 라이브러리입니다. FirebaseUI는 다음과 같은 이점을 제공합니다.

  • 다중 공급자 - 이메일/비밀번호, 이메일 링크, 전화 인증, Google, Facebook, Twitter 및 GitHub 로그인을 위한 로그인 흐름.
  • 계정 연결 - ID 공급자 간에 사용자 계정을 안전하게 연결하는 흐름입니다.
  • 맞춤화 - 앱 요구 사항에 맞게 FirebaseUI의 CSS 스타일을 재정의합니다. 또한 FirebaseUI는 오픈 소스이므로 프로젝트를 분기하고 필요에 따라 정확하게 사용자 지정할 수 있습니다.
  • 원 탭 가입 및 자동 로그인 - 빠른 교차 장치 로그인을 위한 원 탭 가입 과의 자동 통합.
  • 40개 이상의 언어로 현지화된 UI 국제화.
  • 익명 사용자 업그레이드 - 로그인/가입을 통해 익명 사용자를 업그레이드하는 기능. 자세한 내용은 익명 사용자 업그레이드 섹션 을 참조하십시오.

시작하기 전에

  1. 웹 애플리케이션에 Firebase 인증을 추가 하여 v9 호환(권장) 또는 이전 SDK(위의 사이드바 참조)를 사용하고 있는지 확인합니다.

  2. 다음 옵션 중 하나를 통해 FirebaseUI를 포함합니다.

    1. CDN

      Firebase 콘솔의 초기화 스니펫 아래 페이지의 <head> 태그에 다음 스크립트와 CSS 파일을 포함합니다.

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. npm 모듈

      다음 명령을 사용하여 npm을 통해 FirebaseUI 및 해당 종속성을 설치합니다.

      $ npm install firebaseui --save

      소스 파일에 다음 모듈이 require 합니다.

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. 바워 구성 요소

      다음 명령을 사용하여 Bower를 통해 FirebaseUI 및 해당 종속성을 설치합니다.

      $ bower install firebaseui --save

      HTTP 서버가 bower_components/ 내에서 파일을 제공하는 경우 HTML에 필수 파일을 포함하십시오.

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

FirebaseUI 초기화

SDK 가져오기 후 인증 UI를 초기화합니다.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

로그인 방법 설정

Firebase를 사용하여 사용자를 로그인하려면 먼저 지원하려는 로그인 방법을 활성화하고 구성해야 합니다.

이메일 주소 및 비밀번호

  1. Firebase 콘솔 에서 인증 섹션을 열고 이메일 및 비밀번호 인증을 활성화합니다.

  2. FirebaseUI signInOptions 목록에 이메일 제공업체 ID를 추가합니다.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. 선택 사항 : 사용자가 표시 이름을 입력하도록 EmailAuthProvider 를 구성할 수 있습니다(기본값은 true ).

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. Firebase 콘솔 에서 인증 섹션을 엽니다. 로그인 방법 탭에서 이메일/비밀번호 공급자를 활성화합니다. 이메일 링크 로그인을 사용하려면 이메일/비밀번호 로그인이 활성화되어 있어야 합니다.

  2. 같은 섹션에서 이메일 링크(비밀번호 없는 로그인) 로그인 방법을 활성화하고 저장 을 클릭합니다.

  3. 이메일 링크 signInMethod 와 함께 FirebaseUI signInOptions 목록에 이메일 공급자 ID를 추가합니다.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  4. 로그인 UI를 조건부로 렌더링할 때(단일 페이지 앱과 ui.isPendingRedirect() 를 사용하여 URL이 이메일 링크가 있는 로그인에 해당하고 로그인을 완료하기 위해 UI를 렌더링해야 하는지 감지합니다.

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  5. 선택 사항 : 이메일 링크 로그인을 위한 EmailAuthProvider 는 사용자가 기기 간 로그인을 완료하는 것을 허용하거나 차단하도록 구성할 수 있습니다.

    선택적 emailLinkSignIn 콜백을 정의하여 링크를 보낼 때 사용할 firebase.auth.ActionCodeSettings 구성을 반환할 수 있습니다. 이는 링크 처리 방법, 사용자 지정 동적 링크, 딥 링크의 추가 상태 등을 지정하는 기능을 제공합니다. 제공하지 않으면 현재 URL이 사용되며 웹 전용 흐름이 트리거됩니다.

    FirebaseUI-web의 이메일 링크 로그인은 FirebaseUI-Android 및 FirebaseUI-iOS 와 호환되며 FirebaseUI-Android에서 흐름을 시작하는 한 사용자가 링크를 열고 FirebaseUI-web으로 로그인을 완료할 수 있습니다. 반대 흐름도 마찬가지입니다.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

OAuth 공급자(Google, Facebook, Twitter 및 GitHub)

  1. Firebase 콘솔 에서 인증 섹션을 열고 지정된 OAuth 공급자 로그인을 활성화합니다. 해당 OAuth 클라이언트 ID 및 암호도 지정되었는지 확인하십시오.

  2. 또한 인증 섹션에서 로그인 페이지가 렌더링될 도메인이 인증된 도메인 목록에도 추가되었는지 확인합니다.

  3. FirebaseUI signInOptions 목록에 OAuth 공급자 ID를 추가합니다.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. 선택 사항 : 사용자 지정 범위 또는 공급자당 사용자 지정 OAuth 매개 변수를 지정하려면 공급자 값 대신 개체를 전달할 수 있습니다.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

전화 번호

  1. Firebase 콘솔 에서 인증 섹션을 열고 전화번호 로그인을 활성화합니다.

  2. 로그인 페이지가 렌더링될 도메인도 인증된 도메인 목록에 추가되었는지 확인하십시오.

  3. FirebaseUI signInOptions 목록에 전화번호 제공업체 ID를 추가합니다.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. 선택 사항 : PhoneAuthProvider는 reCAPTCHA가 표시되는지 여부에 관계없이 사용자 정의 reCAPTCHA 매개변수로 구성할 수 있습니다(기본값은 normal). 자세한 내용은 reCAPTCHA API 문서 를 참조하세요.

    전화번호 입력에서 선택할 기본 국가도 설정할 수 있습니다. 전체 코드 목록은 지원되는 국가 코드 목록을 참조하십시오. 지정하지 않으면 전화번호 입력은 기본적으로 미국(+1)으로 설정됩니다.

    현재 지원되는 옵션은 다음과 같습니다.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

로그인

FirebaseUI 로그인 흐름을 시작하려면 기본 Auth 인스턴스를 전달하여 FirebaseUI 인스턴스를 초기화합니다.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

FirebaseUI 로그인 위젯이 렌더링될 HTML 요소를 정의합니다.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

FirebaseUI 구성(제공자 지원 및 UI 사용자 정의 및 성공 콜백 등)을 지정합니다.

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

마지막으로 FirebaseUI 인증 인터페이스를 렌더링합니다.

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

익명 사용자 업그레이드

익명 사용자 업그레이드 활성화

익명의 사용자가 영구 계정으로 로그인하거나 가입할 때 사용자가 가입하기 전에 하던 작업을 계속할 수 있는지 확인하려고 합니다. 이렇게 하려면 로그인 UI를 구성할 때 autoUpgradeAnonymousUsers 를 true 로 설정하기만 하면 됩니다(이 옵션은 기본적으로 비활성화되어 있음).

익명의 사용자 업그레이드 병합 충돌 처리

처음에 익명으로 로그인한 사용자가 기존 Firebase 사용자로 업그레이드를 시도하는 경우가 있습니다. 기존 사용자는 다른 기존 사용자와 연결할 수 없으므로 위의 경우 FirebaseUI는 오류 코드 firebaseui firebaseui/anonymous-upgrade-merge-conflict 와 함께 signInFailure 콜백을 트리거합니다. 오류 개체에는 영구 자격 증명도 포함됩니다. 영구 자격 증명을 사용한 로그인은 로그인을 완료하기 위해 콜백에서 트리거되어야 합니다. auth.signInWithCredential(error.credential) 을 통해 로그인을 완료하려면 익명 사용자의 데이터를 저장하고 익명 사용자를 삭제해야 합니다. 그런 다음 로그인 완료 후 데이터를 다시 익명이 아닌 사용자에게 복사합니다. 아래 예는 이 흐름이 어떻게 작동하는지 보여줍니다.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

다음 단계

  • FirebaseUI 사용 및 맞춤설정에 대한 자세한 내용은 README 를 참조하세요.
  • FirebaseUI에서 문제를 발견하고 보고하려면 GitHub 문제 추적기 를 사용하세요.