ตรวจสอบสิทธิ์โดยใช้ 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. เปิดส่วน Auth ในคอนโซล Firebase ในแท็บวิธีการลงชื่อเข้าใช้ ให้เปิดใช้ผู้ให้บริการ Apple ระบุรหัสบริการที่คุณสร้างในส่วนก่อนหน้า นอกจากนี้ ในส่วนส่วนการกําหนดค่าโฟลว์ของรหัส OAuth ให้ระบุรหัสทีม Apple, คีย์ส่วนตัว และรหัสคีย์ที่คุณสร้างในส่วนก่อนหน้า

ปฏิบัติตามข้อกำหนดด้านข้อมูลที่ลบการระบุตัวบุคคลของ Apple

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

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

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

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

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

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

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

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

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');
    auth_apple_provider_create.js

    Web

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

  2. ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจากค่าเริ่มต้นที่คุณต้องการขอจากผู้ให้บริการตรวจสอบสิทธิ์

    Web

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

    Web

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

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

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

    Web

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

    Web

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

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

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

      Web

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

    // ...
  });
      auth_apple_signin_popup.js

      Web

      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;

    // ...
  });
      apple.js

    • หากต้องการลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ ให้เรียกใช้ signInWithRedirect()

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

    Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_apple_signin_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider);
    apple.js

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

    Web

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

    // ...
  });
    auth_apple_signin_redirect_result.js

    Web

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

    // ...
  });
    apple.js

    นอกจากนี้ คุณยังจับและจัดการข้อผิดพลาดได้ที่นี่ ดูรายการรหัสข้อผิดพลาดได้ที่เอกสารอ้างอิง API

    Apple ไม่ได้ระบุ URL รูปภาพ ซึ่งต่างจากผู้ให้บริการรายอื่นๆ ที่ Firebase Auth รองรับ

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

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

การตรวจสอบสิทธิ์อีกครั้งและการลิงก์บัญชี

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

Web

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

    // ...
  });
auth_apple_reauthenticate_popup.js

Web

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;

    // ...
  });
apple.js

และคุณใช้ linkWithPopup() และ linkWithRedirect() เพื่อลิงก์ผู้ให้บริการข้อมูลประจำตัวรายต่างๆ กับบัญชีที่มีอยู่ได้

โปรดทราบว่า Apple กําหนดให้คุณขอความยินยอมอย่างชัดเจนจากผู้ใช้ก่อนลิงก์บัญชี Apple ของผู้ใช้กับข้อมูลอื่นๆ

เช่น หากต้องการลิงก์บัญชี Facebook กับบัญชี Firebase ปัจจุบัน ให้ใช้โทเค็นการเข้าถึงที่ได้รับจากการลงชื่อเข้าใช้ Facebook ของผู้ใช้

Web

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

Web

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

ตรวจสอบสิทธิ์ด้วย Firebase ในส่วนขยาย Chrome

หากคุณกำลังสร้างแอปส่วนขยาย Chrome โปรดดู คำแนะนำเกี่ยวกับเอกสารที่อยู่นอกหน้าจอ

โปรดทราบว่าคุณยังคงต้องยืนยันโดเมนที่กำหนดเองกับ 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 คุณจึงต้องขอให้ผู้ใช้ลงชื่อเข้าใช้อีกครั้งก่อนที่จะเพิกถอนโทเค็นและลบบัญชี

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

    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

      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');
      auth_apple_nonce_node.js

      Web

      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');
      apple.js

    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 จากเซิร์ฟเวอร์ฝั่งที่ตอบกลับการให้สิทธิ์แบบ POST

      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

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

    Web

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

ขั้นตอนถัดไป

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

  • ในแอปทําตามวิธีที่เราแนะนําเพื่อดูสถานะการตรวจสอบสิทธิ์ของผู้ใช้คือการตั้งค่าผู้สังเกตการณ์ในออบเจ็กต์ Auth จากนั้นคุณก็รับข้อมูลโปรไฟล์พื้นฐานของผู้ใช้ได้จากออบเจ็กต์ User โปรดดูหัวข้อจัดการผู้ใช้

  • ใน Firebase Realtime Database และ Cloud Storage กฎความปลอดภัย คุณสามารถรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร auth และนำไปใช้ควบคุมข้อมูลที่ผู้ใช้เข้าถึงได้

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

หากต้องการออกจากระบบของผู้ใช้ ให้เรียกใช้ signOut โดยทำดังนี้

Web

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

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

Web

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