หน้านี้ได้รับการแปลโดย Cloud Translation API

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

สำคัญ: มี ปัญหาที่ทราบ ซึ่งทำให้ linkWithCredentials() ทำงานอย่างไม่ถูกต้องในบางโปรเจ็กต์ โปรดดู รายงานปัญหาสำหรับวิธีแก้ไขปัญหาชั่วคราวและสถานะของการแก้ไข

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

ก่อนเริ่มต้น

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

ลิงก์ข้อมูลเข้าสู่ระบบของผู้ให้บริการการตรวจสอบสิทธิ์แบบรวมศูนย์กับบัญชีผู้ใช้

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

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

รับออบเจ็กต์ AuthProvider ที่สอดคล้องกับผู้ให้บริการ ที่ต้องการลิงก์กับบัญชีของผู้ใช้ ตัวอย่าง

Web

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

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

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

หากต้องการลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป โปรดโทรหา linkWithPopup

Web

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

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

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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
```
auth.currentUser.linkWithRedirect(provider)
  .then(/* ... */)
  .catch(/* ... */);link-multiple-accounts.js
```
หลังจากผู้ใช้ลงชื่อเข้าใช้ ระบบจะเปลี่ยนเส้นทางผู้ใช้กลับมาที่หน้าเว็บของคุณ จากนั้นให้ทำดังนี้ คุณสามารถเรียกดูผลการลงชื่อเข้าใช้ด้วยการเรียก getRedirectResultเมื่อโหลดหน้าเว็บ:
Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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
```
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

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

// 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

ลิงก์อีเมลและรหัสผ่านกับบัญชีผู้ใช้

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

ลงชื่อเข้าใช้ผู้ใช้โดยใช้ผู้ให้บริการหรือวิธีการตรวจสอบสิทธิ์ใดก็ได้
แจ้งให้ผู้ใช้ทราบอีเมลและรหัสผ่านใหม่
สร้างออบเจ็กต์ AuthCredential ด้วยอีเมลและ รหัสผ่าน:
Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced API
```
import { EmailAuthProvider } from "firebase/auth";

const credential = EmailAuthProvider.credential(email, password);auth_make_email_credential.js
```
Web
```
var credential = firebase.auth.EmailAuthProvider.credential(email, password);link-multiple-accounts.js
```
ส่งออบเจ็กต์ AuthCredential ไปยังผู้ใช้ที่ลงชื่อเข้าใช้ เมธอด linkWithCredential:
Web

เรียนรู้ ข้อมูลเพิ่มเติมเกี่ยวกับ Web API แบบแผนผังที่สามารถสั่นไหวได้ และ การอัปเกรด จาก Namespaced 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
```
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 จะล้มเหลวหากข้อมูลเข้าสู่ระบบคือ ลิงก์กับบัญชีผู้ใช้อื่นแล้ว ในกรณีนี้ คุณต้องจัดการ ผสานบัญชีและข้อมูลที่เกี่ยวข้องตามความเหมาะสมสำหรับแอปของคุณ (ดูตัวอย่างด้านบน)

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

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

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

Web

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

Web

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