คุณอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase ได้โดยใช้บัญชี Facebook ของตนเอง ด้วยการผสานรวมการเข้าสู่ระบบ Facebook ไว้ในแอปของคุณ คุณสามารถผสานรวมการเข้าสู่ระบบ Facebook ได้ โดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้ ขั้นตอนการเข้าสู่ระบบ Facebook ด้วยตนเองและส่งโทเค็นเพื่อการเข้าถึงที่ได้ไปยัง Firebase
ก่อนเริ่มต้น
- เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
- ใน Facebook for Developers ให้รับรหัสแอปและข้อมูลลับของแอปสำหรับแอปของคุณ
- เปิดใช้งานการเข้าสู่ระบบ Facebook:
- ในคอนโซล Firebase ให้เปิดส่วน Auth
- ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดการลงชื่อเข้าใช้ Facebook และระบุ App ID และ App Secret ที่ได้รับจาก Facebook
- จากนั้นตรวจสอบว่า URI การเปลี่ยนเส้นทาง OAuth ของคุณ (เช่น
my-app-12345.firebaseapp.com/__/auth/handler
) แสดงเป็น URI การเปลี่ยนเส้นทาง OAuth ในหน้าการตั้งค่าของแอป Facebook ใน Facebook for Developers ใน การตั้งค่าผลิตภัณฑ์ > การกำหนดค่าการเข้าสู่ระบบ Facebook
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ ด้วย Firebase โดยใช้บัญชี Facebook คือจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK (หากคุณต้องการตรวจสอบสิทธิ์ผู้ใช้ใน Node.js หรือสภาพแวดล้อมอื่นๆ ที่ไม่ใช่เบราว์เซอร์ คุณต้องจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง)
หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนต่อไปนี้ ขั้นตอน:
- สร้างอินสแตนซ์ของออบเจ็กต์ผู้ให้บริการ Facebook ดังนี้
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
var provider = new firebase.auth.FacebookAuthProvider();
- ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมที่คุณ
ต้องการส่งคำขอจากผู้ให้บริการตรวจสอบสิทธิ์ หากต้องการเพิ่มขอบเขต โปรดเรียกใช้
addScope
เช่นprovider.addScope('user_birthday');
provider.addScope('user_birthday');
- ไม่บังคับ: หากต้องการแปลขั้นตอน OAuth ของผู้ให้บริการเป็นภาษาที่ต้องการของผู้ใช้
อัปเดตภาษาโดยไม่ส่งพารามิเตอร์ OAuth ที่กำหนดเองที่เกี่ยวข้องอย่างชัดเจน
ในอินสแตนซ์การตรวจสอบสิทธิ์ก่อนเริ่มขั้นตอน OAuth เช่น
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- ไม่บังคับ: ระบุพารามิเตอร์ของผู้ให้บริการ OAuth ที่กำหนดเองเพิ่มเติม
ที่คุณต้องการส่งด้วยคำขอ OAuth หากต้องการเพิ่มพารามิเตอร์ที่กำหนดเอง ให้เรียก
setCustomParameters
ในผู้ให้บริการเริ่มต้นที่มีออบเจ็กต์ที่มีคีย์ ตามที่ระบุโดยเอกสารของผู้ให้บริการ OAuth และค่าที่เกี่ยวข้อง เช่นprovider.setCustomParameters({ 'display': 'popup' });
provider.setCustomParameters({ 'display': 'popup' });
- ตรวจสอบสิทธิ์ด้วย Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการ Facebook คุณสามารถ
แจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Facebook ด้วยการเปิด
หน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ วิธีเปลี่ยนเส้นทางคือ
ที่ต้องการบนอุปกรณ์เคลื่อนที่
- หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป โปรดโทรหา
signInWithPopup
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
นอกจากนี้ คุณจะสามารถตรวจหาและจัดการข้อผิดพลาดได้ด้วย โปรดดูรายการรหัสข้อผิดพลาดในเอกสารข้อมูลอ้างอิงการตรวจสอบสิทธิ์
- หากต้องการลงชื่อเข้าใช้โดยการเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ โปรดโทรไปที่
signInWithRedirect
ทำตามแนวทางปฏิบัติแนะนำเมื่อใช้ "signInWithRedirect"import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
เมื่อโหลดหน้าเว็บ:import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = credential.accessToken; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป โปรดโทรหา
การจัดการข้อผิดพลาดเกี่ยวกับบัญชีที่มีอยู่ แต่ไม่มีข้อมูลเข้าสู่ระบบที่ต่างกัน
หากคุณเปิดใช้การตั้งค่า 1 บัญชีต่ออีเมลในคอนโซล Firebase
เมื่อผู้ใช้พยายามลงชื่อเข้าใช้ระบบของผู้ให้บริการ (เช่น Facebook) ด้วยอีเมลที่ใช้
อยู่กับผู้ให้บริการ Firebase รายอื่น (เช่น Google)
auth/account-exists-with-different-credential
พร้อมกับ
ออบเจ็กต์ AuthCredential
(โทเค็นเพื่อการเข้าถึง Facebook) วิธีลงชื่อเข้าใช้
ผู้ให้บริการที่ต้องการนั้น ผู้ใช้ต้องลงชื่อเข้าใช้กับผู้ให้บริการที่มีอยู่ (Google) ก่อน จากนั้นจึงลิงก์กับ
AuthCredential
เดิม (โทเค็นเพื่อการเข้าถึง Facebook)
โหมดป๊อปอัป
หากใช้ signInWithPopup
คุณสามารถจัดการ
ข้อผิดพลาด auth/account-exists-with-different-credential
รายการพร้อมด้วยโค้ดต่อไปนี้
ตัวอย่าง:
import { getAuth, linkWithCredential, signInWithPopup, FacebookAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Facebook. let result = await signInWithPopup(getAuth(), new FacebookAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Facebook credential. let pendingCred = error.credential; // Step 3: Save the pending credential in temporary storage, // Step 4: Let the user know that they already have an account // but with a different provider, and let them choose another // sign-in method. } } // ... try { // Step 5: Sign the user in using their chosen method. let result = await signInWithPopup(getAuth(), userSelectedProvider); // Step 6: Link to the Facebook credential. // TODO: implement `retrievePendingCred` for your app. let pendingCred = retrievePendingCred(); if (pendingCred !== null) { // As you have access to the pending credential, you can directly call the // link method. let user = await linkWithCredential(result.user, pendingCred); } // Step 7: Continue to app. } catch (error) { // ... }
โหมดเปลี่ยนเส้นทาง
ข้อผิดพลาดนี้ได้รับการจัดการในลักษณะที่คล้ายกันในโหมดเปลี่ยนเส้นทาง โดยมีความแตกต่างที่ระบบรอดำเนินการ ต้องแคชข้อมูลเข้าสู่ระบบระหว่างการเปลี่ยนเส้นทางหน้าเว็บ (เช่น การใช้พื้นที่เก็บข้อมูลเซสชัน)
ขั้นสูง: จัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง
คุณยังตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Facebook ได้ด้วย โดยจัดการ ขั้นตอนการลงชื่อเข้าใช้ด้วย JavaScript SDK สำหรับการเข้าสู่ระบบของ Facebook
- ผสานรวมการเข้าสู่ระบบผ่าน Facebook ไว้ในแอปของคุณโดยทำตาม
เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์
อย่าลืมกำหนดค่าการเข้าสู่ระบบ Facebook ด้วยรหัสแอป Facebook ดังนี้
<script src="//connect.facebook.net/en_US/sdk.js"></script> <script> FB.init({ /********************************************************************** * TODO(Developer): Change the value below with your Facebook app ID. * **********************************************************************/ appId: '<YOUR_FACEBOOK_APP_ID>', status: true, xfbml: true, version: 'v2.6', }); </script>
-
นอกจากนี้ เรายังตั้งค่า Listener ในสถานะการตรวจสอบสิทธิ์ของ Facebook ด้วย:
FB.Event.subscribe('auth.authResponseChange', checkLoginState);
-
หลังจากผสานรวมการเข้าสู่ระบบ Facebook แล้ว ให้เพิ่มปุ่มเข้าสู่ระบบ Facebook ในหน้าเว็บ โดยทำดังนี้
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" size="large" ></fb:login-button>
- ใน Callback สถานะการตรวจสอบสิทธิ์ของ Facebook ให้แลกเปลี่ยนโทเค็นการตรวจสอบสิทธิ์จากการตอบกลับการตรวจสอบสิทธิ์ของ Facebook สำหรับข้อมูลเข้าสู่ระบบ Firebase และ Firebase สำหรับลงชื่อเข้าใช้
import { getAuth, onAuthStateChanged, signInWithCredential, signOut, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); function checkLoginState(response) { if (response.authResponse) { // User is signed-in Facebook. const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => { unsubscribe(); // Check if we are already signed-in Firebase with the correct user. if (!isUserEqual(response.authResponse, firebaseUser)) { // Build Firebase credential with the Facebook auth token. const credential = FacebookAuthProvider.credential( response.authResponse.accessToken); // Sign in with the credential from the Facebook user. signInWithCredential(auth, credential) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... }); } else { // User is already signed-in Firebase with the correct user. } }); } else { // User is signed-out of Facebook. signOut(auth); } }
function checkLoginState(response) { if (response.authResponse) { // User is signed-in Facebook. var unsubscribe = firebase.auth().onAuthStateChanged((firebaseUser) => { unsubscribe(); // Check if we are already signed-in Firebase with the correct user. if (!isUserEqual(response.authResponse, firebaseUser)) { // Build Firebase credential with the Facebook auth token. var credential = firebase.auth.FacebookAuthProvider.credential( response.authResponse.accessToken); // Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); } else { // User is already signed-in Firebase with the correct user. } }); } else { // User is signed-out of Facebook. firebase.auth().signOut(); } }
- นอกจากนี้ คุณควรตรวจสอบว่าผู้ใช้ Facebook ยังไม่ได้ลงชื่อเข้าใช้ Firebase เพื่อหลีกเลี่ยงการตรวจสอบสิทธิ์ซ้ำที่ไม่จำเป็น โดยทำดังนี้
import { FacebookAuthProvider } from "firebase/auth"; function isUserEqual(facebookAuthResponse, firebaseUser) { if (firebaseUser) { const providerData = firebaseUser.providerData; for (let i = 0; i < providerData.length; i++) { if (providerData[i].providerId === FacebookAuthProvider.PROVIDER_ID && providerData[i].uid === facebookAuthResponse.userID) { // We don't need to re-auth the Firebase connection. return true; } } } return false; }
function isUserEqual(facebookAuthResponse, firebaseUser) { if (firebaseUser) { var providerData = firebaseUser.providerData; for (var i = 0; i < providerData.length; i++) { if (providerData[i].providerId === firebase.auth.FacebookAuthProvider.PROVIDER_ID && providerData[i].uid === facebookAuthResponse.userID) { // We don't need to re-auth the Firebase connection. return true; } } } return false; }
ขั้นสูง: ตรวจสอบสิทธิ์ด้วย Firebase ใน Node.js
วิธีตรวจสอบสิทธิ์ด้วย Firebase ในแอปพลิเคชัน Node.js
- ลงชื่อเข้าใช้ของผู้ใช้ด้วยบัญชี Facebook และรับ Facebook ของผู้ใช้ โทเค็นเพื่อการเข้าถึง เช่น ลงชื่อเข้าใช้ให้ผู้ใช้ในเบราว์เซอร์ตามที่อธิบายไว้ใน จัดการการลงชื่อเข้าใช้ โฟลว์ด้วยตนเอง แต่ส่งโทเค็นเพื่อการเข้าถึงไปยัง Node.js แทนการใช้ในแอปไคลเอ็นต์
- หลังจากที่คุณได้รับโทเค็นเพื่อการเข้าถึง Facebook ของผู้ใช้แล้ว ให้ใช้โทเค็นนี้เพื่อสร้าง
ออบเจ็กต์ข้อมูลเข้าสู่ระบบ จากนั้นลงชื่อเข้าใช้ผู้ใช้ด้วยข้อมูลเข้าสู่ระบบ:
import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth"; // Sign in with the credential from the Facebook user. const auth = getAuth(); signInWithCredential(auth, credential) .then((result) => { // Signed in const credential = FacebookAuthProvider.credentialFromResult(result); }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
// Sign in with the credential from the Facebook user. firebase.auth().signInWithCredential(credential) .then((result) => { // Signed in var credential = result.credential; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยาย Chrome
หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คำแนะนำเกี่ยวกับเอกสารนอกหน้าจอ
การปรับแต่งโดเมนเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ Facebook
ในการสร้างโปรเจ็กต์ Firebase จะจัดสรรโดเมนย่อยที่ไม่ซ้ำกันสำหรับโปรเจ็กต์ของคุณ ดังนี้
https://my-app-12345.firebaseapp.com
ซึ่งจะใช้เป็นกลไกการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ OAuth ด้วย โดเมนดังกล่าวจะต้องเป็น อนุญาตสำหรับผู้ให้บริการ OAuth ที่รองรับทั้งหมด แต่วิธีนี้หมายความว่าผู้ใช้อาจเห็นว่า ขณะลงชื่อเข้าใช้ Facebook ก่อนที่จะเปลี่ยนเส้นทางกลับไปที่แอปพลิเคชัน: ไปที่ https://my-app-12345.firebaseapp.com
คุณตั้งค่าโดเมนที่กำหนดเองด้วย Firebase Hosting เพื่อหลีกเลี่ยงการแสดงโดเมนย่อยได้
- ทำตามขั้นตอนที่ 1 ถึง 3 ใน ตั้งค่าโดเมนสำหรับ Hosting เมื่อคุณยืนยัน ความเป็นเจ้าของโดเมนของคุณ Hosting จะจัดสรรใบรับรอง SSL สำหรับโดเมนที่กำหนดเอง
- เพิ่มโดเมนที่กำหนดเองในรายการโดเมนที่ได้รับอนุญาตใน
คอนโซล Firebase:
auth.custom.domain.com
- ใน Developer Console ของ Facebook หรือหน้าการตั้งค่า OAuth ให้เพิ่ม URL ของหน้าเปลี่ยนเส้นทางไว้ในรายการที่อนุญาตพิเศษ
ซึ่งสามารถเข้าถึงได้ในโดเมนที่กำหนดเอง:
https://auth.custom.domain.com/__/auth/handler
- เมื่อคุณเริ่มต้นไลบรารี JavaScript ให้ระบุโดเมนที่กำหนดเองด้วย
ช่อง
authDomain
:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
ขั้นตอนถัดไป
หลังจากผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรก ระบบจะสร้างบัญชีผู้ใช้ใหม่ และ ซึ่งก็คือชื่อผู้ใช้และรหัสผ่าน โทรศัพท์ หมายเลข หรือข้อมูลของผู้ให้บริการตรวจสอบสิทธิ์ ซึ่งก็คือผู้ใช้ที่ลงชื่อเข้าใช้ ใหม่นี้ จัดเก็บเป็นส่วนหนึ่งของโปรเจ็กต์ Firebase และสามารถใช้เพื่อระบุ ผู้ใช้สำหรับทุกแอปในโปรเจ็กต์ของคุณ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใดก็ตาม
-
ทางที่แนะนำในแอปเพื่อให้ทราบสถานะการตรวจสอบสิทธิ์ของผู้ใช้ ตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์
Auth
จากนั้นคุณจะสามารถดู ข้อมูลโปรไฟล์พื้นฐานจากออบเจ็กต์User
โปรดดู จัดการผู้ใช้ ในFirebase Realtime DatabaseและCloud Storage กฎความปลอดภัย คุณสามารถทำสิ่งต่อไปนี้ รับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร
auth
และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้
คุณอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปโดยใช้การตรวจสอบสิทธิ์หลายรายการได้ โดยลิงก์ข้อมูลเข้าสู่ระบบของผู้ให้บริการการตรวจสอบสิทธิ์กับ บัญชีผู้ใช้ที่มีอยู่เดิม
หากต้องการนำผู้ใช้ออกจากระบบ โปรดโทร
signOut
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });