FirebaseUI เป็นไลบรารีที่สร้างขึ้นจาก Firebase Authentication SDK ที่ให้โฟลว์ UI แบบดรอปอินสำหรับใช้ในแอปของคุณ FirebaseUI ให้ประโยชน์ดังต่อไปนี้:
- ผู้ให้บริการหลายราย - ขั้นตอนการลงชื่อเข้าใช้อีเมล/รหัสผ่าน ลิงก์อีเมล การตรวจสอบสิทธิ์ทางโทรศัพท์ การลงชื่อเข้าใช้ Google, Facebook, Twitter และ GitHub
- การเชื่อมโยงบัญชี - ขั้นตอนในการเชื่อมโยงบัญชีผู้ใช้ระหว่างผู้ให้บริการข้อมูลประจำตัวอย่างปลอดภัย
- การปรับแต่ง - แทนที่สไตล์ CSS ของ FirebaseUI เพื่อให้ตรงกับข้อกำหนดของแอปของคุณ นอกจากนี้ เนื่องจาก FirebaseUI เป็นโอเพ่นซอร์ส คุณจึงสามารถแยกโปรเจ็กต์และปรับแต่งให้ตรงตามความต้องการของคุณได้
- การลงทะเบียนด้วยการแตะเพียงครั้งเดียวและการลงชื่อเข้าใช้อัตโนมัติ - บูรณาการอัตโนมัติกับ การลงทะเบียนด้วยการแตะเพียงครั้งเดียว เพื่อการลงชื่อเข้าใช้ข้ามอุปกรณ์ที่รวดเร็ว
- UI ที่แปลแล้ว - การทำให้เป็นสากลมากกว่า 40 ภาษา
- การอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ - ความสามารถในการอัปเกรดผู้ใช้ที่ไม่ระบุชื่อผ่านการลงชื่อเข้าใช้/สมัครสมาชิก สำหรับข้อมูลเพิ่มเติม โปรดไปที่ ส่วนการอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ
ก่อนที่คุณจะเริ่ม
เพิ่มการตรวจสอบสิทธิ์ Firebase ให้กับเว็บแอปพลิเคชันของคุณ ตรวจสอบให้แน่ใจว่าคุณใช้ SDK ที่รองรับ v9 (แนะนำ) หรือเก่ากว่า (ดูแถบด้านข้างด้านบน)
รวม FirebaseUI ผ่านหนึ่งในตัวเลือกต่อไปนี้:
ซีดีเอ็น
รวมสคริปต์และไฟล์ 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 และการขึ้นต่อกันผ่าน npm โดยใช้คำสั่งต่อไปนี้:
$ npm install firebaseui --save
require
โมดูลต่อไปนี้ภายในไฟล์ต้นฉบับของคุณ:var firebase = require('firebase'); var firebaseui = require('firebaseui');
ส่วนประกอบโบเวอร์
ติดตั้ง FirebaseUI และการขึ้นต่อกันผ่าน 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 แล้ว ให้เริ่มต้น Auth UI
// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ตั้งค่าวิธีการลงชื่อเข้าใช้
ก่อนที่คุณจะสามารถใช้ Firebase เพื่อลงชื่อเข้าใช้ผู้ใช้ได้ คุณต้องเปิดใช้งานและกำหนดค่าวิธีการลงชื่อเข้าใช้ที่คุณต้องการรองรับ
ที่อยู่อีเมลและรหัสผ่าน
ใน คอนโซล Firebase ให้เปิดส่วน การตรวจสอบสิทธิ์ และเปิดใช้งานการตรวจสอบสิทธิ์อีเมลและรหัสผ่าน
เพิ่ม ID ผู้ให้บริการอีเมลลงในรายการ 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 ให้เปิดส่วน การตรวจสอบสิทธิ์ บนแท็บ วิธีการลงชื่อเข้า ใช้ ให้เปิดใช้งานผู้ให้บริการ อีเมล/รหัสผ่าน โปรดทราบว่าต้องเปิดใช้งานการลงชื่อเข้าใช้อีเมล/รหัสผ่านเพื่อใช้การลงชื่อเข้าใช้ลิงก์อีเมล
ในส่วนเดียวกัน ให้เปิดใช้งานวิธีลงชื่อเข้า ใช้ลิงก์อีเมล (ลงชื่อเข้าใช้โดยไม่ใช้รหัสผ่าน) แล้วคลิก บันทึก
เพิ่ม ID ผู้ให้บริการอีเมลลงในรายการ 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
สำหรับการลงชื่อเข้าใช้ลิงก์อีเมลสามารถกำหนดค่าเพื่ออนุญาตหรือบล็อกผู้ใช้จากการลงชื่อเข้าใช้ข้ามอุปกรณ์ได้สามารถกำหนดตัวเลือกเรียกกลับ
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 และข้อมูลลับที่เกี่ยวข้องด้วย
นอกจากนี้ในส่วน การรับรองความถูกต้อง ตรวจ สอบให้แน่ใจว่าโดเมนที่จะแสดงผลหน้าลงชื่อเข้าใช้ของคุณถูกเพิ่มเข้าไปในรายการโดเมนที่ได้รับอนุญาตด้วย
เพิ่มรหัสผู้ให้บริการ 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 ให้เปิดส่วน การตรวจสอบสิทธิ์ และเปิดใช้งานการลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์
ตรวจสอบให้แน่ใจว่าโดเมนที่จะแสดงผลหน้าลงชื่อเข้าใช้ของคุณนั้นถูกเพิ่มลงในรายการโดเมนที่ได้รับอนุญาตด้วย
เพิ่ม ID ผู้ให้บริการหมายเลขโทรศัพท์ลงในรายการ 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 ที่จะแสดงผลวิดเจ็ตการลงชื่อเข้าใช้ FirebaseUI
<!-- 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 Auth:
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
กำลังอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ
เปิดใช้งานการอัพเกรดผู้ใช้ที่ไม่ระบุชื่อ
เมื่อผู้ใช้ที่ไม่ระบุชื่อลงชื่อเข้าใช้หรือลงทะเบียนด้วยบัญชีถาวร คุณต้องการให้แน่ใจว่าผู้ใช้สามารถดำเนินการต่อในสิ่งที่พวกเขาทำอยู่ก่อนที่จะสมัคร ในการดำเนินการดังกล่าว เพียงตั้งค่า autoUpgradeAnonymousUsers
ให้ true
เมื่อคุณกำหนดค่า UI การลงชื่อเข้าใช้ (ตัวเลือกนี้จะถูกปิดใช้งานตามค่าเริ่มต้น)
การจัดการข้อขัดแย้งในการผสานการอัปเกรดผู้ใช้ที่ไม่ระบุชื่อ
มีหลายกรณีที่ผู้ใช้ซึ่งเริ่มลงชื่อเข้าใช้โดยไม่ระบุชื่อ พยายามอัปเกรดเป็นผู้ใช้ Firebase ที่มีอยู่ เนื่องจากผู้ใช้ที่มีอยู่ไม่สามารถเชื่อมโยงกับผู้ใช้ที่มีอยู่รายอื่น FirebaseUI จะทริกเกอร์การเรียกกลับ signInFailure
พร้อมรหัสข้อผิดพลาด firebaseui/anonymous-upgrade-merge-conflict
เมื่อเกิดเหตุการณ์ข้างต้น อ็อบเจ็กต์ข้อผิดพลาดจะมีข้อมูลรับรองถาวรด้วย การลงชื่อเข้าใช้ด้วยข้อมูลรับรองถาวรควรถูกทริกเกอร์ในการเรียกกลับเพื่อลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ ก่อนที่จะสามารถลงชื่อเข้าใช้ให้เสร็จสมบูรณ์ผ่าน 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