Catch up on everthing we announced at this year's Firebase Summit. Learn more

קישור ספקי אימות מרובים לחשבון באמצעות JavaScript

תוכל לאפשר למשתמשים להיכנס לאפליקציה שלך באמצעות ספקי אימות מרובים על ידי קישור אישורי ספק אישור לחשבון משתמש קיים. משתמשים ניתנים לזיהוי על ידי אותו מזהה משתמש של Firebase ללא קשר לספק האימות בו השתמשו כדי להיכנס. לדוגמה, משתמש שנכנס באמצעות סיסמה יכול לקשר חשבון Google ולהיכנס עם כל אחת מהשיטות בעתיד. לחלופין, משתמש אנונימי יכול לקשר חשבון פייסבוק ולאחר מכן להיכנס עם פייסבוק כדי להמשיך להשתמש באפליקציה שלך.

לפני שאתה מתחיל

הוסף לאפליקציה שלך תמיכה בשני ספקי אימות (או כולל אימות אנונימי).

כדי לקשר אישורי ספק של אישור כגון Google או פייסבוק לחשבון משתמש קיים:

  1. היכנס למשתמש באמצעות כל ספק או שיטת אימות.
  2. קבל את AuthProvider האובייקט מתאים הספק שאתה רוצה קישור של חשבון המשתמש. דוגמאות:

    גרסת אינטרנט 9

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

    גרסת אינטרנט 8

    var googleProvider = new firebase.auth.GoogleAuthProvider();
    var facebookProvider = new firebase.auth.FacebookAuthProvider();
    var twitterProvider = new firebase.auth.TwitterAuthProvider();
    var githubProvider = new firebase.auth.GithubAuthProvider();
  3. בקש מהמשתמש להיכנס עם הספק שאליו ברצונך לקשר. תוכל לבקש מהמשתמשים שלך להיכנס באמצעות פתיחת חלון מוקפץ או הפניה לדף הכניסה של הספק. שיטת הפניה מועדפת במכשירים ניידים.
    • כדי להיכנס עם חלון מוקפץ, שיחת linkWithPopup :

      גרסת אינטרנט 9

      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.
        // ...
      });

      גרסת אינטרנט 8

      auth.currentUser.linkWithPopup(provider).then((result) => {
        // Accounts successfully linked.
        var credential = result.credential;
        var user = result.user;
        // ...
      }).catch((error) => {
        // Handle Errors here.
        // ...
      });
    • כדי להיכנס ידי הפנייה אל דף הכניסה של ספק, שיחת linkWithRedirect :

      גרסת אינטרנט 9

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

      גרסת אינטרנט 8

      auth.currentUser.linkWithRedirect(provider)
        .then(/* ... */)
        .catch(/* ... */);
      לאחר שהמשתמש נכנס, הם מופנים חזרה לדף שלך. לאחר מכן, תוכל לאחזר את הכניסה תוצאה על ידי התקשרות getRedirectResult כאשר הדף נטען שלך:

      גרסת אינטרנט 9

      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.
        // ...
      });

      גרסת אינטרנט 8

      auth.getRedirectResult().then((result) => {
        if (result.credential) {
          // Accounts successfully linked.
          var credential = result.credential;
          var user = result.user;
          // ...
        }
      }).catch((error) => {
        // Handle Errors here.
        // ...
      });
    אם המשתמש מחובר בהצלחה, חשבון המשתמש אצל הספק מקושר לחשבון המשתמש בפרויקט Firebase שלך.

    קישור החשבון ייכשל אם האישורים כבר מקושרים לחשבון משתמש אחר. במצב זה, עליך לטפל במיזוג החשבונות והנתונים המשויכים בהתאם לאפליקציה שלך:

    גרסת אינטרנט 9

    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);
    });

    גרסת אינטרנט 8

    // 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);
    });

כדי להוסיף כתובת דוא"ל וסיסמאות לחשבון משתמש קיים:

  1. היכנס למשתמש באמצעות כל ספק או שיטת אימות.
  2. בקש מהמשתמש כתובת דוא"ל וסיסמה חדשה.
  3. צור AuthCredential האובייקט באמצעות כתובת הדוא"ל והסיסמה:

    גרסת אינטרנט 9

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

    גרסת אינטרנט 8

    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
  4. תעביר את AuthCredential האובייקט אל שנכנסו לחשבון המשתמש linkWithCredential השיטה:

    גרסת אינטרנט 9

    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);
      });

    גרסת אינטרנט 8

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

    קריאת linkWithCredential תיכשל אם את האישורים כבר מקושרים לחשבון משתמש אחר. במצב זה, עליך לטפל במיזוג החשבונות והנתונים המשויכים בהתאם לאפליקציה שלך (ראה דוגמה למעלה).

תוכל לבטל את הקישור של ספק אישור מחשבון, כך שהמשתמש לא יוכל להיכנס עוד עם ספק זה.

לביטול קישור ספק auth מחשבון משתמש, לעבור ספק מזהה את unlink השיטה. אתה יכול לקבל את תעודות הזהות ספקית של ספקי auth קשורה משתמש מ- providerData רכוש.

גרסת אינטרנט 9

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

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

גרסת אינטרנט 8

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