คุณอนุญาตให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้ผู้ให้บริการ OAuth เช่น Yahoo ได้โดยผสานการเข้าสู่ระบบ OAuth ทั่วไปในแอปของคุณโดยใช้ Firebase SDK เพื่อดำเนินการขั้นตอนการลงชื่อเข้าใช้ตั้งแต่ต้นจนจบ
ก่อนจะเริ่ม
ในการลงชื่อเข้าใช้ผู้ใช้โดยใช้บัญชี Yahoo ก่อนอื่นคุณต้องเปิดใช้งาน Yahoo เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ของคุณ:
- เพิ่ม Firebase ในโครงการ JavaScript ของคุณ
- ใน คอนโซล Firebase ให้เปิดส่วนการ ตรวจสอบสิทธิ์
- บนแท็บ วิธีการลงชื่อเข้า ใช้ ให้เปิดใช้งานผู้ให้บริการ Yahoo
- เพิ่ม Client ID และ Client Secret จากคอนโซลนักพัฒนาซอฟต์แวร์ของผู้ให้บริการรายนั้นไปยังการกำหนดค่าผู้ให้บริการ:
ในการลงทะเบียนไคลเอนต์ Yahoo OAuth ให้ทำตามเอกสารสำหรับนักพัฒนา Yahoo ใน การลงทะเบียนเว็บแอปพลิเคชันกับ Yahoo
อย่าลืมเลือกการอนุญาต OpenID Connect API สองแบบ:
profile
และemail
- เมื่อลงทะเบียนแอปกับผู้ให้บริการเหล่านี้ อย่าลืมลงทะเบียนโดเมน
*.firebaseapp.com
สำหรับโครงการของคุณเป็นโดเมนเปลี่ยนเส้นทางสำหรับแอปของคุณ
- คลิก บันทึก
จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK
หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ของคุณด้วย Firebase โดยใช้บัญชี Yahoo คือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase JavaScript SDK
หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้:
สร้างอินสแตนซ์ของ OAuthProvider โดยใช้ ID ผู้ให้บริการ yahoo.com
Web version 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
Web version 8
var provider = new firebase.auth.OAuthProvider('yahoo.com');
ไม่บังคับ : ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งด้วยคำขอ OAuth
Web version 9
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Web version 8
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
สำหรับพารามิเตอร์ที่ Yahoo รองรับ โปรดดู เอกสารประกอบของ Yahoo OAuth โปรดทราบว่าคุณไม่สามารถส่งผ่านพารามิเตอร์ที่ต้องใช้ Firebase ด้วย
setCustomParameters()
พารามิเตอร์เหล่านี้ ได้แก่ client_id , redirect_uri , response_type , scope and stateไม่บังคับ : ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจาก
profile
และemail
ที่คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์ หากแอปพลิเคชันของคุณต้องการเข้าถึงข้อมูลส่วนตัวของผู้ใช้จาก Yahoo API คุณจะต้องขอสิทธิ์เข้าถึง Yahoo API ภายใต้ สิทธิ์ API ในคอนโซลนักพัฒนาซอฟต์แวร์ของ Yahoo ขอบเขต OAuth ที่ขอต้องตรงกันทุกประการกับขอบเขตที่กำหนดค่าไว้ล่วงหน้าในการอนุญาต API ของแอป ตัวอย่างเช่น หากมีการร้องขอการเข้าถึงแบบอ่าน/เขียนให้กับผู้ติดต่อของผู้ใช้และกำหนดค่าล่วงหน้าในการอนุญาต API ของแอปsdct-w
จะต้องถูกส่งผ่านแทนขอบเขต OAuth แบบอ่านอย่างเดียวsdct-r
มิฉะนั้น โฟลว์จะล้มเหลว และข้อผิดพลาดจะแสดงให้ผู้ใช้เห็นWeb version 9
// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
Web version 8
// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
หากต้องการเรียนรู้เพิ่มเติม โปรดดู เอกสารขอบเขตของ Yahoo
ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ OAuth คุณสามารถแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ด้วยบัญชี Yahoo โดยเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ แนะนำให้ใช้วิธีการเปลี่ยนเส้นทางบนอุปกรณ์มือถือ
หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทร
signInWithPopup
:Web version 9
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... // Yahoo OAuth access token and ID token can be retrieved by calling: const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web version 8
firebase.auth().signInWithPopup(provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... /** @type {firebase.auth.OAuthCredential} */ const credential = result.credential; // Yahoo OAuth access token and ID token can be retrieved by calling: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้โทร
signInWithRedirect
:firebase.auth().signInWithRedirect(provider);
หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เสร็จแล้วและกลับมาที่หน้า คุณสามารถรับผลการลงชื่อเข้าใช้ได้โดยเรียก
getRedirectResult
Web version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
เมื่อเสร็จสิ้นสำเร็จ โทเค็น OAuth ID และโทเค็นการเข้าถึงที่เชื่อมโยงกับผู้ให้บริการสามารถดึงข้อมูลจากอ็อบเจ็กต์
firebase.auth.UserCredential
ส่งคืนเมื่อใช้โทเค็นการเข้าถึง OAuth คุณสามารถเรียก Yahoo API
ตัวอย่างเช่น หากต้องการรับข้อมูลโปรไฟล์พื้นฐาน สามารถเรียก REST API ต่อไปนี้:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
โดยที่
YAHOO_USER_UID
คือ ID ของผู้ใช้ Yahoo ซึ่งสามารถดึงข้อมูลจากฟิลด์firebase.auth().currentUser.providerData[0].uid
หรือจากresult.additionalUserInfo.profile
แม้ว่าตัวอย่างข้างต้นจะเน้นที่ขั้นตอนการลงชื่อเข้าใช้ คุณยังมีความสามารถในการเชื่อมโยงผู้ให้บริการ Yahoo กับผู้ใช้ที่มีอยู่โดยใช้
linkWithPopup
/linkWithRedirect
ตัวอย่างเช่น คุณสามารถเชื่อมโยงผู้ให้บริการหลายรายกับผู้ใช้รายเดียวกันเพื่อให้ลงชื่อเข้าใช้ได้Web version 9
import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web version 8
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
รูปแบบเดียวกันนี้สามารถใช้กับ
reauthenticateWithPopup
/reauthenticateWithRedirect
ซึ่งสามารถใช้เพื่อดึงข้อมูลประจำตัวใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งต้องเข้าสู่ระบบล่าสุดWeb version 9
import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); reauthenticateWithPopup(auth.currentUser, provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Web version 8
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.reauthenticateWithPopup(provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยายของ Chrome
หากคุณกำลังสร้างแอปส่วนขยาย Chrome คุณต้องเพิ่มรหัสส่วนขยาย Chrome ของคุณ:
- เปิดโปรเจ็กต์ของคุณใน คอนโซล Firebase
- ในส่วนการ รับรองความถูกต้อง ให้เปิดหน้า วิธีการลงชื่อเข้าใช้
- เพิ่ม URI ดังต่อไปนี้ในรายการโดเมนที่ได้รับอนุญาต:
chrome-extension://CHROME_EXTENSION_ID
เฉพาะการดำเนินการป๊อปอัป ( signInWithPopup
, linkWithPopup
และ reauthenticateWithPopup
) เท่านั้นที่ใช้ได้กับส่วนขยาย Chrome เนื่องจากส่วนขยาย Chrome ไม่สามารถใช้การเปลี่ยนเส้นทาง HTTP คุณควรเรียกเมธอดเหล่านี้จากสคริปต์ของเพจพื้นหลังแทนที่จะเป็นป๊อปอัปการดำเนินการของเบราว์เซอร์ เนื่องจากป๊อปอัปการตรวจสอบสิทธิ์จะยกเลิกป๊อปอัปการดำเนินการของเบราว์เซอร์ วิธีการแบบป๊อปอัปสามารถใช้ได้ในส่วนขยายโดยใช้ Manifest V2 เท่านั้น Manifest V3 ที่ใหม่กว่าอนุญาตเฉพาะสคริปต์พื้นหลังในรูปแบบของพนักงานบริการ ซึ่งไม่สามารถดำเนินการป๊อปอัปได้เลย
ในไฟล์ Manifest ของส่วนขยาย Chrome ตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม https://apis.google.com
URL ในรายการที่อนุญาตของ content_security_policy
ขั้นตอนถัดไป
หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เป็นครั้งแรก บัญชีผู้ใช้ใหม่จะถูกสร้างขึ้นและเชื่อมโยงกับข้อมูลประจำตัว นั่นคือ ชื่อผู้ใช้และรหัสผ่าน หมายเลขโทรศัพท์ หรือข้อมูลผู้ให้บริการตรวจสอบสิทธิ์ ซึ่งผู้ใช้ลงชื่อเข้าใช้ บัญชีใหม่นี้จัดเก็บเป็นส่วนหนึ่งของโปรเจ็กต์ Firebase และใช้เพื่อระบุผู้ใช้ในทุกแอปในโปรเจ็กต์ของคุณ ไม่ว่าผู้ใช้จะลงชื่อเข้าใช้ด้วยวิธีใดก็ตาม
ในแอปของคุณ วิธีที่แนะนำในการทราบสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์บนออบเจ็กต์การ
Auth
จากนั้น คุณจะได้รับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้จากออบเจ็กต์User
ดู จัดการผู้ใช้ในฐานข้อมูล Firebase Realtime Database และ Cloud Storage Security Rules คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร
auth
และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้
คุณสามารถอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณโดยใช้ผู้ให้บริการตรวจสอบสิทธิ์หลายรายโดย เชื่อมโยงข้อมูลรับรองของผู้ให้บริการตรวจสอบสิทธิ์กับบัญชีผู้ใช้ที่มีอยู่
หากต้องการออกจากระบบผู้ใช้ โทร signOut
:
Web version 9
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web version 8
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });