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

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

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

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

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

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

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

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

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

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

    คุณสามารถรับรหัสโปรเจ็กต์ Firebase ได้ใน หน้าการตั้งค่าคอนโซล Firebase

    เมื่อดำเนินการเสร็จแล้ว ให้จดบันทึก Service ID ใหม่ของคุณ ซึ่งคุณจะต้องใช้ในส่วนถัดไป

  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 ของคุณและคีย์ส่วนตัวและรหัสคีย์ที่คุณสร้างในส่วนก่อนหน้า

ปฏิบัติตามข้อกำหนดข้อมูลที่ไม่ระบุตัวตนของ 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 โดยใช้รหัสผู้ให้บริการที่เกี่ยวข้อง apple.com

    Web modular API

    import { OAuthProvider } from "firebase/auth";

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

    Web namespaced API

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

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

    Web modular API

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

    Web namespaced API

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

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

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

    Web modular API

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

    Web namespaced API

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

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

    // ...
  });
      auth_apple_signin_popup.js

      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;

    // ...
  });
      apple.js

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

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

    Web modular API

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

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

    Web namespaced API

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

    หลังจากที่ผู้ใช้ลงชื่อเข้าใช้เสร็จสิ้นและกลับมาที่หน้านี้ คุณจะได้รับผลการลงชื่อเข้าใช้โดยเรียก 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);

    // ...
  });
    auth_apple_signin_redirect_result.js

    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;

    // ...
  });
    apple.js

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

    // ...
  });
auth_apple_reauthenticate_popup.js

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;

    // ...
  });
apple.js

และคุณสามารถใช้ 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.
    });
auth_apple_link_facebook.js

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

รับรองความถูกต้องด้วย 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 ตรวจสอบให้แน่ใจว่าคุณได้เพิ่ม https://apis.google.com URL ไปยังรายการที่อนุญาต 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. ในแบ็กเอนด์ของคุณ ให้สร้างสตริงแบบสุ่ม (a "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');
      auth_apple_nonce_node.js

      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');
      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 จากฝั่งเซิร์ฟเวอร์ตอบกลับการตรวจสอบสิทธิ์ 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);
  });
    auth_apple_signin_nonce.js

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

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

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

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

  • ใน กฎความปลอดภัย ของ Firebase Realtime Database และ Cloud Storage คุณสามารถรับ 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.
});
auth_sign_out.js

Web namespaced API

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