คุณสามารถอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Twitter ของผู้ใช้ได้ ด้วยการผสานรวมการตรวจสอบสิทธิ์ Twitter ลงในแอปของคุณ คุณสามารถผสานรวม Twitter โดยใช้ Firebase SDK เพื่อดำเนินขั้นตอนการลงชื่อเข้าใช้ หรือดำเนินขั้นตอน OAuth ของ Twitter ด้วยตนเองและส่งผลลัพธ์ โทเค็นเพื่อการเข้าถึงและข้อมูลลับไปยัง Firebase
ก่อนเริ่มต้น
- เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript
- ในคอนโซล Firebase ให้เปิดส่วน Auth
- ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการ Twitter
- เพิ่มคีย์ API และรหัสลับ API จาก Play Console ของผู้ให้บริการรายนั้นลงใน
การกำหนดค่าผู้ให้บริการ:
- ลงทะเบียนแอป เป็นแอปพลิเคชันสำหรับนักพัฒนาซอฟต์แวร์ใน Twitter และรับคีย์ API OAuth ของแอป และ API Secret
- ตรวจสอบว่า URL การเปลี่ยนเส้นทาง OAuth ของ Firebase (เช่น
my-app-12345.firebaseapp.com/__/auth/handler
) มีการตั้งค่าเป็น URL เรียกกลับเรื่องการให้สิทธิ์ในหน้าการตั้งค่าของแอปบนหน้า การกำหนดค่าของแอป Twitter
- คลิกบันทึก
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ ด้วย Firebase โดยใช้บัญชี Twitter คือจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK (หากคุณต้องการตรวจสอบสิทธิ์ผู้ใช้ใน Node.js หรือสภาพแวดล้อมอื่นๆ ที่ไม่ใช่เบราว์เซอร์ คุณต้องจัดการขั้นตอนการลงชื่อเข้าใช้ด้วยตนเอง)
หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนต่อไปนี้ ขั้นตอน:
- สร้างอินสแตนซ์ของออบเจ็กต์ผู้ให้บริการ Twitter ดังนี้
import { TwitterAuthProvider } from "firebase/auth"; const provider = new TwitterAuthProvider();
var provider = new firebase.auth.TwitterAuthProvider();
- ไม่บังคับ: หากต้องการแปลขั้นตอน 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({ 'lang': 'es' });
provider.setCustomParameters({ 'lang': 'es' });
- ตรวจสอบสิทธิ์ด้วย Firebase โดยใช้ออบเจ็กต์ผู้ให้บริการ Twitter คุณสามารถ
แจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Twitter โดยเปิด
หน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ วิธีเปลี่ยนเส้นทางคือ
ที่ต้องการบนอุปกรณ์เคลื่อนที่
- หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป โปรดโทรหา
signInWithPopup
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. const credential = TwitterAuthProvider.credentialFromResult(result); const token = credential.accessToken; const secret = credential.secret; // The signed-in user info. 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; // The AuthCredential type that was used. const credential = TwitterAuthProvider.credentialFromError(error); // ... });
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. var token = credential.accessToken; var secret = credential.secret; // 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; // ... });
นอกจากนี้ คุณจะสามารถตรวจหาและจัดการข้อผิดพลาดได้ด้วย โปรดดูรายการรหัสข้อผิดพลาดในเอกสารข้อมูลอ้างอิงการตรวจสอบสิทธิ์
- หากต้องการลงชื่อเข้าใช้โดยการเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ โปรดโทรไปที่
signInWithRedirect
ทำตามแนวทางปฏิบัติแนะนำเมื่อใช้ "signInWithRedirect"import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
เมื่อโหลดหน้าเว็บ:import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. const credential = TwitterAuthProvider.credentialFromResult(result); const token = credential.accessToken; const secret = credential.secret; // ... // The signed-in user info. 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; // The AuthCredential type that was used. const credential = TwitterAuthProvider.credentialFromError(error); // ... });
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a the Twitter OAuth 1.0 Access Token and Secret. // You can use these server side with your app's credentials to access the Twitter API. var token = credential.accessToken; var secret = credential.secret; // ... } // 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
เมื่อผู้ใช้พยายามลงชื่อเข้าใช้ระบบของผู้ให้บริการ (เช่น Twitter) ด้วยอีเมลที่ใช้
อยู่กับผู้ให้บริการ Firebase รายอื่น (เช่น Google)
auth/account-exists-with-different-credential
พร้อมกับ
ออบเจ็กต์ AuthCredential
(โทเค็น oauth ของ Twitter และข้อมูลลับ) วิธีลงชื่อเข้าใช้
ผู้ให้บริการที่ต้องการนั้น ผู้ใช้ต้องลงชื่อเข้าใช้กับผู้ให้บริการที่มีอยู่ (Google) ก่อน จากนั้นจึงลิงก์กับ
AuthCredential
เดิม (โทเค็นและข้อมูลลับ oauth ของ Twitter)
โหมดป๊อปอัป
หากใช้ signInWithPopup
คุณสามารถจัดการ
ข้อผิดพลาด auth/account-exists-with-different-credential
รายการพร้อมด้วยโค้ดต่อไปนี้
ตัวอย่าง:
import { getAuth, linkWithCredential, signInWithPopup, TwitterAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Twitter. let result = await signInWithPopup(getAuth(), new TwitterAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Twitter 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 Twitter 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 โดยใช้บัญชี Twitter โดยจัดการ ขั้นตอนการลงชื่อเข้าใช้โดยการเรียกใช้ปลายทาง OAuth ของ Twitter:
- ผสานรวมการตรวจสอบสิทธิ์ Twitter ในแอปของคุณโดยทำตาม เอกสารสำหรับนักพัฒนาซอฟต์แวร์ เมื่อสิ้นสุดขั้นตอนการลงชื่อเข้าใช้ Twitter จะได้รับโทเค็นเพื่อการเข้าถึง OAuth และข้อมูลลับของ OAuth
- หากต้องการลงชื่อเข้าใช้แอปพลิเคชัน Node.js ให้ส่งสิทธิ์การเข้าถึง OAuth และข้อมูลลับของ OAuth ไปยังแอปพลิเคชัน Node.js
- หลังจากที่ผู้ใช้ลงชื่อเข้าใช้ด้วย Twitter สำเร็จแล้ว ให้แลกเปลี่ยนสิทธิ์การเข้าถึง OAuth
โทเค็นและข้อมูลลับของ OAuth สำหรับข้อมูลรับรอง Firebase
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
- ตรวจสอบสิทธิ์ด้วย Firebase โดยใช้ข้อมูลเข้าสู่ระบบ Firebase ดังนี้
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 โปรดดู คำแนะนำเกี่ยวกับเอกสารนอกหน้าจอ
การกำหนดค่าโดเมนการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ Twitter
ในการสร้างโปรเจ็กต์ Firebase จะจัดสรรโดเมนย่อยที่ไม่ซ้ำกันสำหรับโปรเจ็กต์ของคุณ ดังนี้
https://my-app-12345.firebaseapp.com
ซึ่งจะใช้เป็นกลไกการเปลี่ยนเส้นทางสำหรับการลงชื่อเข้าใช้ OAuth ด้วย โดเมนดังกล่าวจะต้องเป็น อนุญาตสำหรับผู้ให้บริการ OAuth ที่รองรับทั้งหมด แต่วิธีนี้หมายความว่าผู้ใช้อาจเห็นว่า ขณะลงชื่อเข้าใช้ Twitter ก่อนเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชัน: ไปที่ https://my-app-12345.firebaseapp.com
คุณตั้งค่าโดเมนที่กำหนดเองด้วย Firebase Hosting เพื่อหลีกเลี่ยงการแสดงโดเมนย่อยได้
- ทำตามขั้นตอนที่ 1 ถึง 3 ใน ตั้งค่าโดเมนสำหรับ Hosting เมื่อคุณยืนยัน ความเป็นเจ้าของโดเมนของคุณ Hosting จะจัดสรรใบรับรอง SSL สำหรับโดเมนที่กำหนดเอง
- เพิ่มโดเมนที่กำหนดเองในรายการโดเมนที่ได้รับอนุญาตใน
คอนโซล Firebase:
auth.custom.domain.com
- ใน Developer Console ของ Twitter หรือหน้าการตั้งค่า 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. });