FirebaseUI 는 앱에서 사용할 드롭인 UI 흐름을 제공하는 Firebase 인증 SDK를 기반으로 구축된 라이브러리입니다. FirebaseUI는 다음과 같은 이점을 제공합니다.
- 다중 공급자 - 이메일/비밀번호, 이메일 링크, 전화 인증, Google, Facebook, Twitter 및 GitHub 로그인을 위한 로그인 흐름.
- 계정 연결 - ID 공급자 간에 사용자 계정을 안전하게 연결하는 흐름입니다.
- 맞춤화 - 앱 요구 사항에 맞게 FirebaseUI의 CSS 스타일을 재정의합니다. 또한 FirebaseUI는 오픈 소스이므로 프로젝트를 분기하고 필요에 따라 정확하게 사용자 지정할 수 있습니다.
- 원 탭 가입 및 자동 로그인 - 빠른 교차 장치 로그인을 위한 원 탭 가입 과의 자동 통합.
- 40개 이상의 언어로 현지화된 UI 국제화.
- 익명 사용자 업그레이드 - 로그인/가입을 통해 익명 사용자를 업그레이드하는 기능. 자세한 내용은 익명 사용자 업그레이드 섹션 을 참조하십시오.
시작하기 전에
웹 애플리케이션에 Firebase 인증을 추가 하여 v9 호환(권장) 또는 이전 SDK(위의 사이드바 참조)를 사용하고 있는지 확인합니다.
다음 옵션 중 하나를 통해 FirebaseUI를 포함합니다.
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" />
npm 모듈
다음 명령을 사용하여 npm을 통해 FirebaseUI 및 해당 종속성을 설치합니다.
$ npm install firebaseui --save
소스 파일에 다음 모듈이
require
합니다.var firebase = require('firebase'); var firebaseui = require('firebaseui');
바워 구성 요소
다음 명령을 사용하여 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를 사용하여 사용자를 로그인하려면 먼저 지원하려는 로그인 방법을 활성화하고 구성해야 합니다.
이메일 주소 및 비밀번호
Firebase 콘솔 에서 인증 섹션을 열고 이메일 및 비밀번호 인증을 활성화합니다.
FirebaseUI
signInOptions
목록에 이메일 제공업체 ID를 추가합니다.ui.start('#firebaseui-auth-container', { signInOptions: [ firebase.auth.EmailAuthProvider.PROVIDER_ID ], // Other config options... });
선택 사항 : 사용자가 표시 이름을 입력하도록
EmailAuthProvider
를 구성할 수 있습니다(기본값은true
).ui.start('#firebaseui-auth-container', { signInOptions: [ { provider: firebase.auth.EmailAuthProvider.PROVIDER_ID, requireDisplayName: false } ] });
이메일 링크 인증
Firebase 콘솔 에서 인증 섹션을 엽니다. 로그인 방법 탭에서 이메일/비밀번호 공급자를 활성화합니다. 이메일 링크 로그인을 사용하려면 이메일/비밀번호 로그인이 활성화되어 있어야 합니다.
같은 섹션에서 이메일 링크(비밀번호 없는 로그인) 로그인 방법을 활성화하고 저장 을 클릭합니다.
이메일 링크
signInMethod
와 함께 FirebaseUIsignInOptions
목록에 이메일 공급자 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... });
로그인 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); }
선택 사항 : 이메일 링크 로그인을 위한
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)
Firebase 콘솔 에서 인증 섹션을 열고 지정된 OAuth 공급자 로그인을 활성화합니다. 해당 OAuth 클라이언트 ID 및 암호도 지정되었는지 확인하십시오.
또한 인증 섹션에서 로그인 페이지가 렌더링될 도메인이 인증된 도메인 목록에도 추가되었는지 확인합니다.
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... });
선택 사항 : 사용자 지정 범위 또는 공급자당 사용자 지정 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. ] });
전화 번호
Firebase 콘솔 에서 인증 섹션을 열고 전화번호 로그인을 활성화합니다.
로그인 페이지가 렌더링될 도메인도 인증된 도메인 목록에 추가되었는지 확인하십시오.
FirebaseUI
signInOptions
목록에 전화번호 제공업체 ID를 추가합니다.ui.start('#firebaseui-auth-container', { signInOptions: [ firebase.auth.PhoneAuthProvider.PROVIDER_ID ], // Other config options... });
선택 사항 : 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 문제 추적기 를 사용하세요.