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

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

ก่อนเริ่มต้น

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

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

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

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

ในเว็บไซต์นักพัฒนาซอฟต์แวร์ของ Apple ให้ทำดังนี้

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

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

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

    เมื่อเสร็จแล้ว ให้จดรหัสบริการใหม่ที่ต้องใช้ในส่วนถัดไป

  2. สร้างฟีเจอร์ลงชื่อเข้าใช้ด้วยคีย์ส่วนตัวของ Apple คุณจะต้องมีคีย์ส่วนตัวและรหัสคีย์ใหม่ในส่วนถัดไป
  3. หากคุณใช้ฟีเจอร์การตรวจสอบสิทธิ์ของ Firebase ที่ส่งอีเมลถึงผู้ใช้ ซึ่งรวมถึงการลงชื่อเข้าใช้ลิงก์อีเมล การยืนยันอีเมล การเพิกถอนการเปลี่ยนแปลงบัญชี และอื่นๆ ให้ กำหนดค่าบริการส่งต่ออีเมลแบบส่วนตัวของ Apple และลงทะเบียน noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com (หรือโดเมนเทมเพลตอีเมลที่กำหนดเอง) เพื่อให้ Apple ส่งต่ออีเมลที่ส่งจากการตรวจสอบสิทธิ์ Firebase ไปยังอีเมล 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 Modular API

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

    API ที่ใช้เนมสเปซในเว็บ

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

    Web Modular API

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

    API ที่ใช้เนมสเปซในเว็บ

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

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

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

    Web Modular API

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

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

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

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

    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

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

    นอกจากนี้ เมื่อผู้ใช้เลือกที่จะไม่แชร์อีเมลกับแอป 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);

    // ...
  });

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

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 โปรดดู คู่มือเอกสารนอกหน้าจอ

โปรดทราบว่าคุณยังต้องยืนยันโดเมนที่กำหนดเองกับ 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) เพื่อเพิกถอนโทเค็นเพื่อการเข้าถึง 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 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');

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

    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 Realtime Database และ Cloud Storage คุณจะรับรหัสผู้ใช้ที่ไม่ซ้ำของผู้ใช้ที่ลงชื่อเข้าใช้จากตัวแปร 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.
});

API ที่ใช้เนมสเปซในเว็บ

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