FirebaseUI คือไลบรารีที่สร้างต่อยอดมาจาก SDK การตรวจสอบสิทธิ์ Firebase ที่มีโฟลว์ UI แบบดรอปอินสำหรับใช้ในแอป FirebaseUI มีประโยชน์ดังนี้
- ผู้ให้บริการหลายราย - ขั้นตอนการลงชื่อเข้าใช้อีเมล/รหัสผ่าน, ลิงก์อีเมล, การตรวจสอบสิทธิ์ทางโทรศัพท์, Google, Facebook, Twitter และ GitHub
- การลิงก์บัญชี - ขั้นตอนในการลิงก์บัญชีผู้ใช้ข้ามผู้ให้บริการข้อมูลประจำตัวอย่างปลอดภัย
- การปรับแต่ง - ลบล้างรูปแบบ CSS ของ FirebaseUI เพื่อให้ตรงกับข้อกำหนดของแอป นอกจากนี้ เนื่องจาก FirebaseUI เป็นโอเพนซอร์ส คุณจึงแยกโปรเจ็กต์และปรับแต่งโปรเจ็กต์ให้ตรงกับความต้องการได้
- การลงชื่อสมัครใช้ด้วยการแตะเพียงครั้งเดียวและการลงชื่อเข้าใช้โดยอัตโนมัติ - การผสานรวมอัตโนมัติกับ การลงชื่อสมัครใช้ด้วยการแตะเพียงครั้งเดียว เพื่อการลงชื่อเข้าใช้ข้ามอุปกรณ์อย่างรวดเร็ว
- Localized UI - การปรับให้เป็นสากลกว่า 40 ภาษา
- การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ - ความสามารถในการอัปเกรดผู้ใช้ที่ไม่ระบุชื่อผ่านการลงชื่อเข้าใช้/ลงชื่อสมัครใช้ ดูข้อมูลเพิ่มเติมได้ที่ส่วนการอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ
ก่อนเริ่มต้น
เพิ่มการตรวจสอบสิทธิ์ Firebase ลงในเว็บแอปพลิเคชัน โดยใช้การทำงานร่วมกับ v9 (แนะนำ) หรือ SDK รุ่นเก่า (ดูแถบด้านข้างด้านบน)
รวม FirebaseUI ผ่านตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
CDN
ใส่สคริปต์และไฟล์ CSS ต่อไปนี้ไว้ในแท็ก <head> ของหน้าเว็บ ใต้ข้อมูลโค้ดการเริ่มต้นจากคอนโซล Firebase
<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
ติดตั้ง FirebaseUI และทรัพยากร Dependency ผ่าน npm โดยใช้คำสั่งต่อไปนี้
$ npm install firebaseui --save
require
โมดูลต่อไปนี้ภายในไฟล์ต้นฉบับของคุณ:var firebase = require('firebase'); var firebaseui = require('firebaseui');
ส่วนประกอบเครื่องตัดหญ้า
ติดตั้ง FirebaseUI และทรัพยากร Dependency ผ่าน Bower โดยใช้คำสั่งต่อไปนี้
$ bower install firebaseui --save
รวมไฟล์ที่จำเป็นใน HTML หากเซิร์ฟเวอร์ HTTP แสดงไฟล์ภายใน
bower_components/
<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
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 ให้เปิดส่วนการตรวจสอบสิทธิ์ ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการอีเมล/รหัสผ่าน โปรดทราบว่าต้องเปิดใช้การลงชื่อเข้าใช้ด้วยอีเมล/รหัสผ่านเพื่อใช้การลงชื่อเข้าใช้ลิงก์อีเมล
ในส่วนเดียวกันนี้ ให้เปิดใช้วิธีการลงชื่อเข้าใช้ลิงก์อีเมล (ลงชื่อเข้าใช้แบบไม่ต้องใช้รหัสผ่าน) แล้วคลิกบันทึก
เพิ่มรหัสผู้ให้บริการอีเมลลงในรายการ FirebaseUI
signInOptions
พร้อมกับลิงก์อีเมลsignInMethod
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
สำหรับการลงชื่อเข้าใช้ลิงก์อีเมลสามารถกำหนดค่าเพื่ออนุญาตหรือบล็อกผู้ใช้ไม่ให้ลงชื่อเข้าใช้ข้ามอุปกรณ์ได้คุณกำหนด Callback
emailLinkSignIn
ที่ไม่บังคับให้ส่งการกำหนดค่าfirebase.auth.ActionCodeSettings
ที่จะใช้เมื่อส่งลิงก์ได้ ซึ่งจะช่วยให้คุณระบุวิธีจัดการลิงก์ ลิงก์แบบไดนามิกที่กำหนดเอง สถานะเพิ่มเติมใน Deep Link ฯลฯ หากไม่มีการระบุไว้ ระบบจะใช้ URL ปัจจุบันและระบบจะทริกเกอร์ขั้นตอนสำหรับเว็บเท่านั้นการลงชื่อเข้าใช้ลิงก์อีเมลใน FirebaseUI-web ใช้ได้กับ FirebaseUI-Android และ FirebaseUI-iOS ซึ่งผู้ใช้ 1 รายที่เริ่มต้นขั้นตอนจาก 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 และข้อมูลลับที่เกี่ยวข้องด้วย
นอกจากนี้ในส่วนการตรวจสอบสิทธิ์ ให้ตรวจสอบว่าเพิ่มโดเมนที่จะแสดงผลหน้าลงชื่อเข้าใช้ของคุณลงในรายการโดเมนที่ได้รับอนุญาตแล้ว
เพิ่มรหัสผู้ให้บริการ OAuth ลงในรายการ FirebaseUI
signInOptions
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
ui.start('#firebaseui-auth-container', { signInOptions: [ firebase.auth.PhoneAuthProvider.PROVIDER_ID ], // Other config options... });
ไม่บังคับ: กำหนดค่า PhoneAuthProvider ได้ด้วยพารามิเตอร์ reCAPTCHA ที่กำหนดเอง ไม่ว่า reCAPTCHA จะแสดงหรือไม่แสดงก็ได้ (ค่าเริ่มต้นคือปกติ) โปรดดูรายละเอียดเพิ่มเติมในเอกสาร 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 ให้เริ่มต้นอินสแตนซ์ FirebaseUI ด้วยการส่งผ่านอินสแตนซ์ Auth
พื้นฐาน
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
กำหนดองค์ประกอบ HTML ที่จะแสดงวิดเจ็ตการลงชื่อเข้าใช้ Firebase UI
<!-- 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>
ระบุการกำหนดค่า Firebase UI (ผู้ให้บริการที่รองรับและการกำหนดค่า UI ที่กำหนดเอง รวมถึง Callback ที่ประสบความสำเร็จ ฯลฯ)
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);
การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ
การเปิดใช้การอัปเกรดผู้ใช้แบบไม่ระบุตัวตน
เมื่อผู้ใช้ที่ไม่ระบุชื่อลงชื่อเข้าใช้หรือลงชื่อสมัครใช้ด้วยบัญชีถาวร คุณอาจจะต้องการทำให้แน่ใจว่าผู้ใช้สามารถทำสิ่งที่ทำอยู่ต่อได้ก่อนลงชื่อสมัครใช้
เพียงตั้งค่า autoUpgradeAnonymousUsers
เป็น true
เมื่อกำหนดค่า UI สำหรับลงชื่อเข้าใช้ (ตัวเลือกนี้จะปิดใช้อยู่โดยค่าเริ่มต้น)
การจัดการความขัดแย้งในการรวมการอัปเกรดผู้ใช้ที่ไม่ระบุตัวตน
มีบางกรณีที่ผู้ใช้ที่ลงชื่อเข้าใช้แบบไม่ระบุตัวตนในตอนแรกพยายามอัปเกรดเป็นผู้ใช้ Firebase ที่มีอยู่ เนื่องจากผู้ใช้ที่มีอยู่ลิงก์กับผู้ใช้ที่มีอยู่แล้วรายอื่นไม่ได้ FirebaseUI จะทริกเกอร์ Callback signInFailure
ที่มีรหัสข้อผิดพลาด firebaseui/anonymous-upgrade-merge-conflict
เมื่อเหตุการณ์ข้างต้นเกิดขึ้น
ออบเจ็กต์ข้อผิดพลาดจะมีข้อมูลเข้าสู่ระบบถาวรด้วย ควรมีการทริกเกอร์การลงชื่อเข้าใช้ด้วยข้อมูลเข้าสู่ระบบแบบถาวรใน Callback เพื่อลงชื่อเข้าใช้ให้เสร็จสิ้น
ก่อนที่จะลงชื่อเข้าใช้ผ่าน 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);
}
}
});
ขั้นตอนถัดไป
- ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้และปรับแต่ง Firebase UI ได้ที่ README
- หากพบปัญหาใน FirebaseUI และต้องการรายงานปัญหา ให้ใช้เครื่องมือติดตามปัญหา GitHub