ตรวจสอบสิทธิ์การใช้ Apple ด้วย JavaScript

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

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

หากต้องการลงชื่อเข้าใช้ผู้ใช้โดยใช้ Apple ขั้นแรกให้กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple บนไซต์นักพัฒนาของ Apple จากนั้นเปิดใช้งาน Apple เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ของคุณ

เข้าร่วมโปรแกรมนักพัฒนา Apple

การลงชื่อเข้าใช้ด้วย Apple สามารถกำหนดค่าได้โดยสมาชิกของ โปรแกรมนักพัฒนา Apple เท่านั้น

กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple

บนไซต์ Apple Developer ให้ทำดังต่อไปนี้:

  1. เชื่อมโยงเว็บไซต์ของคุณกับแอพของคุณตามที่อธิบายไว้ในส่วนแรกของ กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple สำหรับเว็บ เมื่อได้รับพร้อมท์ ให้ลงทะเบียน URL ต่อไปนี้เป็น 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 (หรือ โดเมนเทมเพลตอีเมลที่คุณกำหนดเอง) เพื่อให้ Apple สามารถส่งต่ออีเมลที่ส่งโดย Firebase Authentication ไปยังที่อยู่อีเมล Apple ที่ไม่เปิดเผยตัวตน

เปิดใช้งาน Apple เป็นผู้ให้บริการลงชื่อเข้าใช้

  1. เพิ่ม Firebase ในโครงการของคุณ
  2. ใน คอนโซล Firebase ให้เปิดส่วน การตรวจสอบสิทธิ์ บนแท็บ วิธีการลงชื่อเข้า ใช้ ให้เปิดใช้งานผู้ให้บริการ Apple ระบุรหัสบริการที่คุณสร้างไว้ในส่วนก่อนหน้า นอกจากนี้ ใน ส่วนการกำหนดค่าโฟลว์โค้ด OAuth ให้ระบุ Apple Team ID ของคุณ รวมถึงคีย์ส่วนตัวและ ID คีย์ที่คุณสร้างไว้ในส่วนก่อนหน้า

ปฏิบัติตามข้อกำหนดข้อมูลที่ไม่เปิดเผยตัวตนของ Apple

ลงชื่อเข้าใช้ด้วย Apple ทำให้ผู้ใช้สามารถเลือกที่จะไม่เปิดเผยข้อมูลของตน รวมถึงที่อยู่อีเมลของตนได้เมื่อลงชื่อเข้าใช้ ผู้ใช้ที่เลือกตัวเลือกนี้จะมีที่อยู่อีเมลในโดเมน privaterelay.appleid.com เมื่อคุณใช้การลงชื่อเข้าด้วย Apple ในแอพของคุณ คุณต้องปฏิบัติตามนโยบายหรือข้อกำหนดสำหรับนักพัฒนาที่เกี่ยวข้องจาก Apple เกี่ยวกับ Apple ID ที่ไม่เปิดเผยตัวตนเหล่านี้

ซึ่งรวมถึงการได้รับความยินยอมจากผู้ใช้ที่จำเป็นก่อนที่คุณจะเชื่อมโยงข้อมูลส่วนบุคคลที่สามารถระบุตัวตนได้โดยตรงกับ Apple ID ที่ไม่เปิดเผยตัวตน เมื่อใช้ Firebase Authentication อาจรวมถึงการดำเนินการต่อไปนี้:

  • เชื่อมโยงที่อยู่อีเมลกับ Apple ID ที่ไม่ระบุชื่อหรือในทางกลับกัน
  • เชื่อมโยงหมายเลขโทรศัพท์กับ Apple ID ที่ไม่ระบุชื่อหรือในทางกลับกัน
  • เชื่อมโยงข้อมูลรับรองโซเชียลที่ไม่เปิดเผยตัวตน (Facebook, Google ฯลฯ) กับ Apple ID ที่ไม่เปิดเผยตัวตนหรือในทางกลับกัน

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

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

หากคุณกำลังสร้างเว็บแอป วิธีที่ง่ายที่สุดในการตรวจสอบผู้ใช้ของคุณด้วย Firebase โดยใช้บัญชี Apple ของพวกเขาคือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase JavaScript SDK

หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้

  1. สร้างอินสแตนซ์ของ OAuthProvider โดยใช้ ID ผู้ให้บริการที่เกี่ยวข้อง apple.com

    Web modular API

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

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('apple.com');
  2. ทางเลือก: ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจากค่าเริ่มต้นที่คุณต้องการขอจากผู้ให้บริการการตรวจสอบสิทธิ์

    Web modular API

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

    Web namespaced API

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

    ตามค่าเริ่มต้น เมื่อเปิดใช้งาน หนึ่งบัญชีต่อที่อยู่อีเมล Firebase จะขอขอบเขตอีเมลและชื่อ หากคุณเปลี่ยนการตั้งค่านี้เป็น หลายบัญชีต่อที่อยู่อีเมล Firebase จะไม่ขอขอบเขตใดๆ จาก Apple เว้นแต่คุณจะระบุขอบเขตไว้

  3. ทางเลือก: หากคุณต้องการแสดงหน้าจอลงชื่อเข้าใช้ของ Apple ในภาษาอื่นที่ไม่ใช่ภาษาอังกฤษ ให้ตั้งค่าพารามิเตอร์ locale ดูเอกสาร การลงชื่อเข้าใช้ด้วย Apple สำหรับภาษาที่รองรับ

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });
  4. ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ OAuth คุณสามารถแจ้งให้ผู้ใช้ของคุณลงชื่อเข้าใช้ด้วยบัญชี Apple ของตนได้โดยการเปิดหน้าต่างป๊อปอัปหรือเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ วิธีการเปลี่ยนเส้นทางเป็นที่ต้องการบนอุปกรณ์เคลื่อนที่

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

      Web modular API

      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;
      
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        })
        .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 namespaced API

      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;
      
          // IdP data available using getAdditionalUserInfo(result)
        // ...
        })
        .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() :

    ปฏิบัติตาม แนวทางปฏิบัติที่ดีที่สุด เมื่อใช้ signInWithRedirect , linkWithRedirect หรือ reauthenticateWithRedirect

    Web modular API

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

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);

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

    Web modular API

    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 namespaced API

    // 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;
    
          // IdP data available in result.additionalUserInfo.profile.
          // ...
        }
        // 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 ตรงที่ Apple ไม่ได้ระบุ URL รูปภาพ

    นอกจากนี้ เมื่อผู้ใช้เลือกที่จะไม่แชร์อีเมลของตนกับแอพ Apple จะจัดเตรียมที่อยู่อีเมลเฉพาะสำหรับผู้ใช้นั้น (ในรูปแบบ xyz@privaterelay.appleid.com ) ซึ่งจะแชร์กับแอพของคุณ หากคุณกำหนดค่าบริการส่งต่ออีเมลส่วนตัว Apple จะส่งต่ออีเมลที่ส่งไปยังที่อยู่ที่ไม่ระบุชื่อไปยังที่อยู่อีเมลจริงของผู้ใช้

    Apple จะแชร์ข้อมูลผู้ใช้ เช่น ชื่อที่แสดงกับแอพในครั้งแรกที่ผู้ใช้ลงชื่อเข้าใช้เท่านั้น โดยปกติแล้ว Firebase จะจัดเก็บชื่อที่แสดงในครั้งแรกที่ผู้ใช้ลงชื่อเข้าใช้ด้วย Apple ซึ่งคุณสามารถรับได้จาก firebase.auth().currentUser.displayName . อย่างไรก็ตาม หากก่อนหน้านี้คุณใช้ Apple เพื่อลงชื่อเข้าใช้แอปให้ผู้ใช้โดยไม่ต้องใช้ Firebase Apple จะไม่ให้ชื่อที่แสดงของผู้ใช้แก่ Firebase

การตรวจสอบสิทธิ์ซ้ำและการเชื่อมโยงบัญชี

รูปแบบเดียวกันนี้สามารถใช้ได้กับ reauthenticateWithPopup() และ reauthenticateWithRedirect() ซึ่งคุณสามารถใช้เพื่อดึงข้อมูลรับรองใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนซึ่งต้องมีการลงชื่อเข้าใช้ล่าสุด:

Web modular API

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 namespaced API

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;

    // IdP data available in result.additionalUserInfo.profile.
      // ...
  })
  .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 กำหนดให้คุณต้องได้รับความยินยอมอย่างชัดแจ้งจากผู้ใช้ก่อนที่คุณจะเชื่อมโยงบัญชี Apple ของพวกเขากับข้อมูลอื่น

ตัวอย่างเช่น หากต้องการเชื่อมโยงบัญชี Facebook กับบัญชี Firebase ปัจจุบัน ให้ใช้โทเค็นการเข้าถึงที่คุณได้รับจากการลงชื่อเข้าใช้ Facebook:

Web modular API

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 namespaced API

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 คุณต้องเพิ่ม ID ส่วนขยาย Chrome ของคุณ:

  1. เปิดโครงการของคุณใน คอนโซล Firebase
  2. ในส่วน การรับรองความถูกต้อง ให้เปิดหน้า วิธีการลงชื่อเข้าใช้
  3. เพิ่ม URI ดังต่อไปนี้ลงในรายการโดเมนที่ได้รับอนุญาต:
    chrome-extension://CHROME_EXTENSION_ID

เฉพาะการดำเนินการป๊อปอัป ( signInWithPopup , linkWithPopup และ reauthenticateWithPopup ) เท่านั้นที่พร้อมใช้งานสำหรับส่วนขยายของ Chrome เนื่องจากส่วนขยายของ Chrome ไม่สามารถใช้การเปลี่ยนเส้นทาง HTTP ได้ คุณควรเรียกใช้เมธอดเหล่านี้จากสคริปต์ของเพจพื้นหลัง แทนที่จะเป็นป๊อปอัปการทำงานของเบราว์เซอร์ เนื่องจากป๊อปอัปการตรวจสอบสิทธิ์จะยกเลิกป๊อปอัปการทำงานของเบราว์เซอร์ วิธีการป๊อปอัปสามารถใช้ได้เฉพาะในส่วนขยายที่ใช้ Manifest V2 เท่านั้น Manifest V3 ที่ใหม่กว่าอนุญาตเฉพาะสคริปต์พื้นหลังในรูปแบบของพนักงานบริการ ซึ่งไม่สามารถดำเนินการป๊อปอัปได้เลย

ในไฟล์ Manifest ของส่วนขยาย Chrome ตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม URL https://apis.google.com ลงในรายการอนุญาต content_security_policy

โปรดทราบว่าคุณยังต้องยืนยันโดเมนที่กำหนดเองกับ Apple เช่นเดียวกับโดเมนเริ่มต้น firebaseapp.com:

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

การเพิกถอนโทเค็น

Apple กำหนดให้แอพที่รองรับการสร้างบัญชีต้องอนุญาตให้ผู้ใช้เริ่มต้นการลบบัญชีของตนภายในแอพ ตามที่อธิบายไว้ใน แนวทางการตรวจสอบ App Store

เพื่อให้เป็นไปตามข้อกำหนดนี้ ให้ปฏิบัติตามขั้นตอนต่อไปนี้:

  1. ตรวจสอบให้แน่ใจว่าคุณได้กรอกส่วนการกำหนด ค่ารหัสบริการ และ ลำดับขั้นตอนรหัส OAuth ของการกำหนดค่าการลงชื่อเข้าใช้ด้วยผู้ให้บริการ Apple ดังที่ระบุไว้ในส่วน กำหนดค่าการลงชื่อเข้าใช้ด้วย Apple

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

    จากนั้น รับโทเค็นการเข้าถึง Apple OAuth จาก OAuthCredential และใช้เพื่อเรียก revokeAccessToken(auth, token) เพื่อเพิกถอนโทเค็นการเข้าถึง Apple OAuth

    const provider = new OAuthProvider('apple.com');
    provider.addScope('email');
    provider.addScope('name');
    
    const auth = getAuth();
    signInWithPopup(auth, provider).then(result => {
      // Get the Apple OAuth access token.
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
    
      // Revoke the Apple OAuth access token.
      revokeAccessToken(auth, accessToken)
        .then(() => {
          // Token revoked.
    
          // Delete the user account.
          // ...
        })
        .catch(error => {
          // An error happened.
          // ...
        });
    });
    
  3. สุดท้าย ลบบัญชีผู้ใช้ (และข้อมูลที่เกี่ยวข้องทั้งหมด)

ขั้นสูง: ตรวจสอบสิทธิ์กับ Firebase ใน Node.js

หากต้องการตรวจสอบสิทธิ์กับ Firebase ในแอปพลิเคชัน Node.js ให้ทำดังนี้

  1. ลงชื่อเข้าใช้ผู้ใช้ด้วยบัญชี Apple และรับโทเค็น Apple ID ของผู้ใช้ คุณสามารถทำได้หลายวิธี ตัวอย่างเช่น หากแอป Node.js ของคุณมีส่วนหน้าของเบราว์เซอร์:

    1. บนแบ็กเอนด์ของคุณ ให้สร้างสตริงสุ่ม ("nonce") และคำนวณแฮช SHA256 ของสตริงนั้น nonce เป็นค่าใช้ครั้งเดียวที่คุณใช้เพื่อตรวจสอบการเดินทางไปกลับครั้งเดียวระหว่างแบ็กเอนด์ของคุณกับเซิร์ฟเวอร์ตรวจสอบสิทธิ์ของ Apple

      Web modular API

      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 namespaced API

      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. บนหน้าลงชื่อเข้าใช้ของคุณ ให้ระบุ 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 modular API

    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 namespaced API

    // 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 และ กฎความปลอดภัยของ พื้นที่เก็บข้อมูลบนคลาวด์ คุณสามารถรับ ID ผู้ใช้เฉพาะของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และใช้เพื่อควบคุมข้อมูลที่ผู้ใช้สามารถเข้าถึงได้

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

หากต้องการออกจากระบบผู้ใช้ ให้โทร signOut :

Web modular API

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});