Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

אימות באמצעות Apple עם JavaScript

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

אתה יכול לאפשר למשתמשים שלך לבצע אימות עם Firebase באמצעות Apple ID שלהם על ידי שימוש ב-Firebase SDK כדי לבצע את זרימת הכניסה מקצה לקצה OAuth 2.0.

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

כדי להיכנס למשתמשים באמצעות Apple, תחילה הגדר את ה- Sign In with Apple באתר המפתחים של Apple, ולאחר מכן הפעל את Apple כספק כניסה לפרויקט Firebase שלך.

הצטרף לתוכנית המפתחים של אפל

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

הגדר כניסה עם אפל

באתר Apple Developer , בצע את הפעולות הבאות:

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

    https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler

    אתה יכול לקבל את מזהה הפרויקט שלך ב- Firebase בדף ההגדרות של מסוף Firebase .

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

  2. צור כניסה עם מפתח פרטי של Apple . תזדקק למפתח הפרטי ומזהה המפתח החדש שלך בסעיף הבא.
  3. אם אתה משתמש באחת מהתכונות של Firebase Authentication ששולחות אימיילים למשתמשים, כולל כניסה לקישור אימייל, אימות כתובת דוא"ל, ביטול שינוי חשבון ואחרות, הגדר את שירות ממסר הדוא"ל הפרטי של Apple noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (או דומיין תבנית הדוא"ל המותאם אישית שלך) כך שאפל תוכל להעביר הודעות דוא"ל שנשלחות על ידי אימות Firebase לכתובות דוא"ל אנונימיות של Apple.

אפשר את Apple כספק כניסה

  1. הוסף את Firebase לפרויקט שלך .
  2. במסוף Firebase , פתח את הקטע Auth . בכרטיסייה שיטת כניסה , הפעל את ספק Apple . ציין את מזהה השירות שיצרת בסעיף הקודם. כמו כן, בסעיף תצורת זרימת קוד OAuth , ציין את מזהה צוות Apple שלך ​​ואת המפתח הפרטי ומזהה המפתח שיצרת בסעיף הקודם.

עמוד בדרישות הנתונים האנונימיים של Apple

כניסה עם אפל נותנת למשתמשים אפשרות להפוך את הנתונים שלהם לאנונימיים, כולל כתובת הדוא"ל שלהם, בעת הכניסה. למשתמשים שבוחרים באפשרות זו יש כתובות דוא"ל עם הדומיין privaterelay.appleid.com . כאשר אתה משתמש בכניסה עם Apple באפליקציה שלך, עליך לציית לכל מדיניות מפתחים או תנאים רלוונטיים של Apple לגבי מזהי Apple אנונימיים אלה.

זה כולל קבלת כל הסכמת משתמש נדרשת לפני שאתה משייך מידע אישי מזהה ישיר עם מזהה Apple אנונימי. בעת שימוש באימות Firebase, זה עשוי לכלול את הפעולות הבאות:

  • קשר כתובת אימייל למזהה Apple אנונימי או להיפך.
  • קשר מספר טלפון למזהה Apple אנונימי או להיפך
  • קשר אישור חברתי לא אנונימי (פייסבוק, גוגל וכו') למזהה Apple אנונימי או להיפך.

הרשימה לעיל אינה ממצה. עיין בהסכם הרישיון של Apple Developer Program בסעיף החברות בחשבון המפתח שלך כדי לוודא שהאפליקציה שלך עומדת בדרישות של Apple.

טפל בזרימת הכניסה עם Firebase SDK

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

כדי לטפל בזרימת הכניסה עם Firebase JavaScript SDK, בצע את השלבים הבאים:

  1. צור מופע של OAuthProvider באמצעות מזהה הספק המתאים apple.com .

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('apple.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('apple.com');
  2. אופציונלי: ציין היקפי OAuth 2.0 נוספים מעבר לברירת המחדל שברצונך לבקש מספק האימות.

    Web version 9

    provider.addScope('email');
    provider.addScope('name');

    Web version 8

    provider.addScope('email');
    provider.addScope('name');

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

  3. אופציונלי: אם ברצונך להציג את מסך הכניסה של אפל בשפה שאינה אנגלית, הגדר את פרמטר locale . ראה את ה- Sign In with Apple Docs עבור המקומות הנתמכים.

    Web version 9

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });

    Web version 8

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });
  4. בצע אימות עם Firebase באמצעות אובייקט ספק OAuth. אתה יכול לבקש מהמשתמשים שלך להיכנס עם חשבונות Apple שלהם על ידי פתיחת חלון מוקפץ או על ידי הפנייה מחדש לדף הכניסה. שיטת ההפניה מועדפת במכשירים ניידים.

    • כדי להיכנס באמצעות חלון מוקפץ, קרא signInWithPopup() :

      Web version 9

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // Apple credential
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
      
          // ...
        })
        .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 credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // You can also get the Apple OAuth Access and ID Tokens.
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
      
          // ...
        })
        .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() :

      Web version 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web version 8

      firebase.auth().signInWithRedirect(provider);

      לאחר שהמשתמש משלים את הכניסה וחוזר לדף, אתה יכול לקבל את תוצאת הכניסה על ידי קריאה getRedirectResult() :

      Web version 9

      import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
      
      // Result from Redirect auth flow.
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = OAuthProvider.credentialFromResult(result);
          if (credential) {
            // You can also get the Apple OAuth Access and ID Tokens.
            const accessToken = credential.accessToken;
            const idToken = credential.idToken;
          }
          // The signed-in user info.
          const user = result.user;
        })
        .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 credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      // Result from Redirect auth flow.
      firebase
        .auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // You can get the Apple OAuth Access and ID Tokens.
            var accessToken = credential.accessToken;
            var idToken = credential.idToken;
      
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        })
        .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;
      
          // ...
        });

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

    בניגוד לספקים אחרים הנתמכים על ידי Firebase Auth, אפל לא מספקת כתובת URL של תמונה.

    כמו כן, כאשר המשתמש בוחר לא לשתף את האימייל שלו עם האפליקציה, אפל מספקת כתובת דוא"ל ייחודית עבור אותו משתמש (בצורה xyz@privaterelay.appleid.com ), אותה היא חולקת עם האפליקציה שלך. אם הגדרתם את שירות ממסר הדוא"ל הפרטי, אפל מעבירה מיילים שנשלחו לכתובת האנונימית לכתובת האימייל האמיתית של המשתמש.

    Apple משתפת רק מידע משתמש כגון שם התצוגה עם יישומים בפעם הראשונה שמשתמש נכנס. בדרך כלל, Firebase מאחסנת את שם התצוגה בפעם הראשונה שמשתמש נכנס ל-Apple, אותו תוכל לקבל באמצעות firebase.auth().currentUser.displayName . עם זאת, אם השתמשת בעבר ב-Apple כדי להיכנס משתמש לאפליקציה מבלי להשתמש ב-Firebase, Apple לא תספק ל-Firebase את שם התצוגה של המשתמש.

אימות מחדש וקישור חשבון

ניתן להשתמש באותה דפוס עם reauthenticateWithPopup() ו- reauthenticateWithRedirect() , שבהם תוכל להשתמש כדי לאחזר אישור חדש עבור פעולות רגישות הדורשות כניסה אחרונה:

Web version 9

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
const provider = new OAuthProvider('apple.com');

reauthenticateWithPopup(auth.currentUser, provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.

    // The signed-in user info.
    const user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // ...
  })
  .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 credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });

Web version 8

const provider = new firebase.auth.OAuthProvider('apple.com');

firebase
  .auth()
  .currentUser
  .reauthenticateWithPopup(provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;
     // You can also get the Apple OAuth Access and ID Tokens.
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;

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

    // ...
  });

בנוסף, אתה יכול להשתמש ב- linkWithPopup() וב- linkWithRedirect() , כדי לקשר ספקי זהות שונים לחשבונות קיימים.

שים לב שאפל דורשת ממך לקבל הסכמה מפורשת ממשתמשים לפני שתקשר את חשבונות Apple שלהם לנתונים אחרים.

לדוגמה, כדי לקשר חשבון פייסבוק לחשבון Firebase הנוכחי, השתמש באסימון הגישה שקיבלת מהכניסה של המשתמש לפייסבוק:

Web version 9

import { getAuth, linkWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // ...

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Web version 8

const provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // Facebook additional data available in result.additionalUserInfo.profile,

      // Additional Facebook OAuth access token can also be retrieved.
      // result.credential.accessToken

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

בצע אימות באמצעות Firebase בתוסף Chrome

אם אתה בונה אפליקציית תוסף Chrome, עליך להוסיף את מזהה תוסף Chrome שלך:

  1. פתח את הפרויקט שלך במסוף Firebase .
  2. בקטע אימות , פתח את דף שיטת הכניסה .
  3. הוסף URI כמו הבא לרשימת הדומיינים המורשים:
    chrome-extension://CHROME_EXTENSION_ID

רק פעולות קופצות ( signInWithPopup , linkWithPopup ו- reauthenticateWithPopup ) זמינות לתוספי Chrome, מכיוון שתוספי Chrome אינם יכולים להשתמש בהפניות HTTP. עליך לקרוא לשיטות אלו מסקריפט של דף רקע ולא מחלון קופץ של פעולה בדפדפן, מכיוון שחלון האימות המוקפץ יבטל את חלון פעולת הדפדפן הקופץ. ניתן להשתמש בשיטות הקופצות רק בהרחבות המשתמשות ב- Manifest V2 . ה- Manfest V3 החדש יותר מאפשר רק סקריפטים בצורת עובדי שירות, שאינם יכולים לבצע את פעולות הקופץ כלל.

בקובץ המניפסט של תוסף Chrome שלך, ודא שאתה מוסיף את כתובת האתר https://apis.google.com לרשימת ההיתרים של content_security_policy .

שים לב שאתה עדיין חייב לאמת את הדומיין המותאם אישית עם Apple בדומה לדומיין ברירת המחדל של firebaseapp.com:

http://auth.custom.example.com/.well-known/apple-developer-domain-association.txt

מתקדם: אימות עם Firebase ב-Node.js

כדי לבצע אימות עם Firebase ביישום Node.js:

  1. היכנס למשתמש עם חשבון Apple שלו וקבל את אסימון ה-Apple ID של המשתמש. אתה יכול להשיג זאת בכמה דרכים. לדוגמה, אם לאפליקציית Node.js שלך יש קצה קצה של דפדפן:

    1. בקצה האחורי שלך, צור מחרוזת אקראית ("nonce") וחשב את ה-Hash שלה SHA256. ה-nonce הוא ערך שימוש חד פעמי שבו אתה משתמש כדי לאמת נסיעה בודדת הלוך ושוב בין ה-backend שלך לשרתי האישור של אפל.

      Web version 9

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = (length) => {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        let nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Web version 8

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = function(length) {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        var nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.slice(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');
    2. בדף הכניסה שלך, ציין את ה-hash nonce בתצורת הכניסה עם Apple:

      <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
      <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
      <script>
          AppleID.auth.init({
              clientId: YOUR_APPLE_CLIENT_ID,
              scope: 'name email',
              redirectURI: URL_TO_YOUR_REDIRECT_HANDLER,  // See the next step.
              state: '[STATE]',  // Optional value that Apple will send back to you
                                 // so you can return users to the same context after
                                 // they sign in.
              nonce: HASHED_NONCE  // The hashed nonce you generated in the previous step.
          });
      </script>
      
    3. קבל את אסימון ה-Apple ID מצד השרת של תגובת אישור POSTed:

      app.post('/redirect', (req, res) => {
        const savedState = req.cookies.__session;
        const code = req.body.code;
        const state = req.body.state;
        const appleIdToken = req.body.id_token;
        if (savedState !== state || !code) {
          res.status(403).send('403: Permission denied');
        } else {
          // Sign in with Firebase using appleIdToken. (See next step).
        }
      });
      

    ראה גם הגדרת דף האינטרנט שלך עבור כניסה עם Apple .

  2. לאחר שתקבל את אסימון Apple ID של המשתמש, השתמש בו כדי לבנות אובייקט אישור ולאחר מכן היכנס למשתמש עם האישור:

    Web version 9

    import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    
    // Build Firebase credential with the Apple ID token.
    const provider = new OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    signInWithCredential(auth, authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

    Web version 8

    // Build Firebase credential with the Apple ID token.
    const provider = new firebase.auth.OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    firebase.auth().signInWithCredential(authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

הצעדים הבאים

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

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

  • בכללי האבטחה של מסד הנתונים בזמן אמת של Firebase ואחסון בענן , תוכל לקבל את מזהה המשתמש הייחודי של המשתמש 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.
});