ตรวจสอบสิทธิ์โดยใช้ 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 รวมถึงคีย์ส่วนตัวและรหัสคีย์ที่คุณสร้างไว้ในส่วนก่อนหน้า

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

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

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

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

  • ในแอป วิธีที่แนะนำในการทราบสถานะการให้สิทธิ์ของผู้ใช้คือการ ตั้งค่า Observer ในออบเจ็กต์ 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