เชื่อมโยงผู้ให้บริการตรวจสอบสิทธิ์หลายรายกับบัญชีโดยใช้ JavaScript

คุณสามารถอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปของคุณโดยใช้ผู้ให้บริการตรวจสอบสิทธิ์หลายรายโดยเชื่อมโยงข้อมูลประจำตัวของผู้ให้บริการตรวจสอบสิทธิ์กับบัญชีผู้ใช้ที่มีอยู่ สามารถระบุผู้ใช้ได้ด้วย ID ผู้ใช้ Firebase เดียวกัน โดยไม่คำนึงถึงผู้ให้บริการการตรวจสอบสิทธิ์ที่ใช้ลงชื่อเข้าใช้ ตัวอย่างเช่น ผู้ใช้ที่ลงชื่อเข้าใช้ด้วยรหัสผ่านสามารถเชื่อมโยงบัญชี Google และลงชื่อเข้าใช้ด้วยวิธีใดวิธีหนึ่งในอนาคต หรือผู้ใช้ที่ไม่ระบุชื่อสามารถเชื่อมโยงบัญชี Facebook จากนั้นเข้าสู่ระบบด้วย Facebook ในภายหลังเพื่อใช้แอพของคุณต่อไป

ก่อนที่คุณจะเริ่มต้น

เพิ่มการรองรับผู้ให้บริการตรวจสอบสิทธิ์ตั้งแต่ 2 รายขึ้นไป (อาจรวมถึงการตรวจสอบสิทธิ์แบบไม่ระบุตัวตน) ให้กับแอปของคุณ

เชื่อมโยงข้อมูลรับรองผู้ให้บริการรับรองความถูกต้องแบบรวมศูนย์กับบัญชีผู้ใช้

ในการเชื่อมโยงข้อมูลรับรองจากผู้ให้บริการตรวจสอบสิทธิ์ เช่น Google หรือ Facebook กับบัญชีผู้ใช้ที่มีอยู่:

1. ลงชื่อเข้าใช้ผู้ใช้โดยใช้ผู้ให้บริการหรือวิธีการรับรองความถูกต้องใดๆ
2. รับวัตถุ AuthProvider ที่สอดคล้องกับผู้ให้บริการที่คุณต้องการเชื่อมโยงกับบัญชีของผู้ใช้ ตัวอย่าง:

   Web modular API

   import { GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider, GithubAuthProvider } from "firebase/auth";
   
   const googleProvider = new GoogleAuthProvider();
   const facebookProvider = new FacebookAuthProvider();
   const twitterProvider = new TwitterAuthProvider();
   const githubProvider = new GithubAuthProvider();
   auth_get_providers.js

   Web namespaced API

   var googleProvider = new firebase.auth.GoogleAuthProvider();
   var facebookProvider = new firebase.auth.FacebookAuthProvider();
   var twitterProvider = new firebase.auth.TwitterAuthProvider();
   var githubProvider = new firebase.auth.GithubAuthProvider();
   link-multiple-accounts.js

3. แจ้งให้ผู้ใช้ลงชื่อเข้าใช้กับผู้ให้บริการที่คุณต้องการเชื่อมโยง คุณสามารถแจ้งให้ผู้ใช้ลงชื่อเข้าใช้ได้โดยเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการ แนะนำให้ใช้วิธีการเปลี่ยนเส้นทางบนอุปกรณ์มือถือ
   • หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป ให้โทรหา linkWithPopup :

     Web modular API

     import { getAuth, linkWithPopup, GoogleAuthProvider } from "firebase/auth";
     const provider = new GoogleAuthProvider();
     
     const auth = getAuth();
     linkWithPopup(auth.currentUser, provider).then((result) => {
       // Accounts successfully linked.
       const credential = GoogleAuthProvider.credentialFromResult(result);
       const user = result.user;
       // ...
     }).catch((error) => {
       // Handle Errors here.
       // ...
     });
     auth_link_with_popup.js

     Web namespaced API

     auth.currentUser.linkWithPopup(provider).then((result) => {
       // Accounts successfully linked.
       var credential = result.credential;
       var user = result.user;
       // ...
     }).catch((error) => {
       // Handle Errors here.
       // ...
     });
     link-multiple-accounts.js

   • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการ ให้โทรไปที่ linkWithRedirect : ปฏิบัติตาม แนวทางปฏิบัติที่ดีที่สุด เมื่อใช้ `linkWithRedirect`

     Web modular API

     import { getAuth, linkWithRedirect, GoogleAuthProvider } from "firebase/auth";
     const provider = new GoogleAuthProvider();
     
     const auth = getAuth();
     linkWithRedirect(auth.currentUser, provider)
       .then(/* ... */)
       .catch(/* ... */);
     auth_link_with_redirect.js

     Web namespaced API

     auth.currentUser.linkWithRedirect(provider)
       .then(/* ... */)
       .catch(/* ... */);
     link-multiple-accounts.js

     หลังจากที่ผู้ใช้ลงชื่อเข้าใช้แล้ว พวกเขาจะถูกเปลี่ยนเส้นทางกลับไปยังเพจของคุณ จากนั้น คุณสามารถเรียกผลการลงชื่อเข้าใช้โดยเรียก getRedirectResult เมื่อเพจของคุณโหลด:

     Web modular API

     import { getRedirectResult } from "firebase/auth";
     getRedirectResult(auth).then((result) => {
       const credential = GoogleAuthProvider.credentialFromResult(result);
       if (credential) {
         // Accounts successfully linked.
         const user = result.user;
         // ...
       }
     }).catch((error) => {
       // Handle Errors here.
       // ...
     });
     auth_get_redirect_result.js

     Web namespaced API

     auth.getRedirectResult().then((result) => {
       if (result.credential) {
         // Accounts successfully linked.
         var credential = result.credential;
         var user = result.user;
         // ...
       }
     }).catch((error) => {
       // Handle Errors here.
       // ...
     });
     link-multiple-accounts.js

   หากผู้ใช้ลงชื่อเข้าใช้สำเร็จ บัญชีของผู้ใช้กับผู้ให้บริการจะเชื่อมโยงกับบัญชีของผู้ใช้ในโครงการ Firebase ของคุณ

   การเชื่อมโยงบัญชีจะล้มเหลวหากข้อมูลรับรองเชื่อมโยงกับบัญชีผู้ใช้อื่นแล้ว ในสถานการณ์นี้ คุณต้องจัดการการรวมบัญชีและข้อมูลที่เกี่ยวข้องตามความเหมาะสมสำหรับแอปของคุณ:

   Web modular API

   import { getAuth, signInWithCredential, linkWithCredential, OAuthProvider } from "firebase/auth";
   
   // The implementation of how you store your user data depends on your application
   const repo = new MyUserDataRepo();
   
   // Get reference to the currently signed-in user
   const auth = getAuth();
   const prevUser = auth.currentUser;
   
   // Get the data which you will want to merge. This should be done now
   // while the app is still signed in as this user.
   const prevUserData = repo.get(prevUser);
   
   // Delete the user's data now, we will restore it if the merge fails
   repo.delete(prevUser);
   
   // Sign in user with the account you want to link to
   signInWithCredential(auth, newCredential).then((result) => {
     console.log("Sign In Success", result);
     const currentUser = result.user;
     const currentUserData = repo.get(currentUser);
   
     // Merge prevUser and currentUser data stored in Firebase.
     // Note: How you handle this is specific to your application
     const mergedData = repo.merge(prevUserData, currentUserData);
   
     const credential = OAuthProvider.credentialFromResult(result);
     return linkWithCredential(prevUser, credential)
       .then((linkResult) => {
         // Sign in with the newly linked credential
         const linkCredential = OAuthProvider.credentialFromResult(linkResult);
         return signInWithCredential(auth, linkCredential);
       })
       .then((signInResult) => {
         // Save the merged data to the new user
         repo.set(signInResult.user, mergedData);
       });
   }).catch((error) => {
     // If there are errors we want to undo the data merge/deletion
     console.log("Sign In Error", error);
     repo.set(prevUser, prevUserData);
   });
   auth_merge_accounts.js

   Web namespaced API

   // The implementation of how you store your user data depends on your application
   var repo = new MyUserDataRepo();
   
   // Get reference to the currently signed-in user
   var prevUser = auth.currentUser;
   
   // Get the data which you will want to merge. This should be done now
   // while the app is still signed in as this user.
   var prevUserData = repo.get(prevUser);
   
   // Delete the user's data now, we will restore it if the merge fails
   repo.delete(prevUser);
   
   // Sign in user with the account you want to link to
   auth.signInWithCredential(newCredential).then((result) => {
     console.log("Sign In Success", result);
     var currentUser = result.user;
     var currentUserData = repo.get(currentUser);
   
     // Merge prevUser and currentUser data stored in Firebase.
     // Note: How you handle this is specific to your application
     var mergedData = repo.merge(prevUserData, currentUserData);
   
     return prevUser.linkWithCredential(result.credential)
       .then((linkResult) => {
         // Sign in with the newly linked credential
         return auth.signInWithCredential(linkResult.credential);
       })
       .then((signInResult) => {
         // Save the merged data to the new user
         repo.set(signInResult.user, mergedData);
       });
   }).catch((error) => {
     // If there are errors we want to undo the data merge/deletion
     console.log("Sign In Error", error);
     repo.set(prevUser, prevUserData);
   });
   link-multiple-accounts.js

เชื่อมโยงที่อยู่อีเมลและรหัสผ่านเข้ากับบัญชีผู้ใช้

ในการเพิ่มที่อยู่อีเมลและรหัสผ่านให้กับบัญชีผู้ใช้ที่มีอยู่:

1. ลงชื่อเข้าใช้ผู้ใช้โดยใช้ผู้ให้บริการหรือวิธีการรับรองความถูกต้องใดๆ
2. แจ้งให้ผู้ใช้ป้อนที่อยู่อีเมลและรหัสผ่านใหม่
3. สร้างวัตถุ AuthCredential ด้วยที่อยู่อีเมลและรหัสผ่าน:

   Web modular API

   import { EmailAuthProvider } from "firebase/auth";
   
   const credential = EmailAuthProvider.credential(email, password);
   auth_make_email_credential.js

   Web namespaced API

   var credential = firebase.auth.EmailAuthProvider.credential(email, password);
   link-multiple-accounts.js

4. ส่งวัตถุ AuthCredential ไปยังเมธอด linkWithCredential ของผู้ใช้ที่ลงชื่อเข้าใช้:

   Web modular API

   import { getAuth, linkWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   linkWithCredential(auth.currentUser, credential)
     .then((usercred) => {
       const user = usercred.user;
       console.log("Account linking success", user);
     }).catch((error) => {
       console.log("Account linking error", error);
     });
   auth_simple_link.js

   Web namespaced API

   auth.currentUser.linkWithCredential(credential)
     .then((usercred) => {
       var user = usercred.user;
       console.log("Account linking success", user);
     }).catch((error) => {
       console.log("Account linking error", error);
     });
   link-multiple-accounts.js

   การเรียกไปที่ linkWithCredential จะล้มเหลวหากข้อมูลรับรองเชื่อมโยงกับบัญชีผู้ใช้อื่นแล้ว ในสถานการณ์นี้ คุณต้องจัดการการรวมบัญชีและข้อมูลที่เกี่ยวข้องตามความเหมาะสมสำหรับแอปของคุณ (ดูตัวอย่างด้านบน)

ยกเลิกการเชื่อมโยงผู้ให้บริการรับรองความถูกต้องจากบัญชีผู้ใช้

คุณสามารถยกเลิกการเชื่อมโยงผู้ให้บริการรับรองความถูกต้องจากบัญชี เพื่อให้ผู้ใช้ไม่สามารถลงชื่อเข้าใช้กับผู้ให้บริการรายนั้นได้อีก

หากต้องการยกเลิกการเชื่อมโยงผู้ให้บริการรับรองความถูกต้องจากบัญชีผู้ใช้ ให้ส่ง ID ผู้ให้บริการไปยังวิธี unlink คุณสามารถรับ ID ผู้ให้บริการของผู้ให้บริการรับรองความถูกต้องที่เชื่อมโยงกับผู้ใช้ได้จากคุณสมบัติ providerData

import { getAuth, unlink } from "firebase/auth";

const auth = getAuth();
unlink(auth.currentUser, providerId).then(() => {
  // Auth provider unlinked from account
  // ...
}).catch((error) => {
  // An error happened
  // ...
});
auth_unlink_provider.js

user.unlink(providerId).then(() => {
  // Auth provider unlinked from account
  // ...
}).catch((error) => {
  // An error happened
  // ...
});
link-multiple-accounts.js