วิธีทำ-Apple-Login-เข้าสู่ระบบด้วย-Apple-ID-PHP-บนเว็บไซต์

Apple Login คือการเข้าสู่ระบบหรือสมัครสมาชิกแบบ SSO ( Single Sign On ) ความหมายคือการใช้ข้อมูลเดียวกันกับแพลตฟอร์มใด แพลตฟอร์มหนึ่งในการลงทะเบียนใช้งาน ในตัวอย่างนี้ก็คือการใช้ Apple ID ในการเข้าสู่ระบบหรือสมัครสมาชิกเข้าใช้งานซอฟต์แวร์อื่น

เราจะเริ่มเห็นตัวเลือกในการเข้าสู่ระบบ หรือสมัครสมาชิก บนเว็บไซต์ หรือ mobile application โดยใช้ Apple ID มากขึ้นเรื่อย เหตุผลก็เพราะว่า ทาง Apple ได้เพิ่มกฏเกณฑ์ในการนำ Application ขึ้นให้บริการที่ Apps Store ถ้าแอปนั้นมีการใช้ Third Party ในการเข้าสู่ระบบ เช่น Facebook, Twitter หรือ Google แอปนั้นจำเป็นต้องเพิ่มการเข้าใช้งานหรือสมัครสมาชิกด้วย Apple ID เข้าไปด้วย ยกเว้นแต่ว่าแอปนั้นเป็นการเข้าระบบหรือสมัครสมาชิกด้วย Custom Register ก็ไม่จำเป็นต้องเพิ่มการสมัครสมาชิกด้วย Apple ID

วิธีทำ Apple Login สำหรับ Website ( ตั้งค่าฝั่ง Apple )

  • ทำความเข้าใจขั้นตอนการตั้งค่าฝั่ง Apple โดยรวม ยังไม่ได้เกี่ยวกับฝั่ง Website นะครับ จะมีอยู่ 4 ขั้นตอนหลัก ๆ คือ
    • Enable App ID
    • Create Service ID for Web Authentication
    • Create Key
    • Register Email Sources for Communication

ขั้นตอนที่ 1 Enable App ID

  • แน่นอนครับคุณต้องเป็นสมาชิก apple developer program ก่อน ซึ่งมีค่าใช้จ่าย 99$ ต่อปี ใช้ได้ทั้งแบบ Individual ( บุคคล ) และ Enterprise ( นิติบุคคล​ ) สมัครได้ที่ https://developer.apple.com/programs
  • สร้าง Primary App IDs เข้าไปที่ Certificates, Identifiers & Profiles เลือกไปที่ Identifiers กด + เพื่อเพิ่ม App IDs ให้เลือกข้อมูลตามภาพด้านล่างนะครับ
เลือกที่ Apps IDs เพื่อสร้าง Primary App IDs ก่อน
เลือก Type เป็น App
กรอก Description และ Bundle ID Explicit ตัวอย่างเช่น com.domain.appname ติ๊กที่ Sign In with Apple และกด Edit
เลือกที่ Enable as a primary App ID กด Save และ กด Continue

ขั้นตอนที่ 2 Create Service ID for Web Authentication

  • สร้าง Service IDs ให้ไปที่ Certificates, Identifiers & Profiles เลือก Identifiers กดปุ่มบวกเหมือนเดิม แต่คราวนี้ให้เลือก ที่ Services IDs จากนั้นกรอข้อมูล description และ identifiers ที่แตกต่างจากที่เรากรอกไว้ก่อนหน้านี้นะครับ คนละ app id กัน ตัวอย่างเช่น com.domain.login จากนั้นกด continue และ register ตามลำดับ
  • หลังจากกด register เรียบร้อยแล้ว ระบบจะพาเรามาที่หน้าแสดง รายการ Services IDs ให้เราคลิกไปที่ Services IDs ที่เราเพิ่งสร้าง ติ๊กถูกที่ Sign in with Apps จากนั้นเลือก Primary App IDs ที่เราสร้างไว้ในขั้นตอนแรก ระบุโดเมนที่เราต้องการทำระบบ Apple Login เช่น www.abc.com ไม่ต้องมี https จากนั้นระบุ redirect url คือ url ที่จะ return ข้อมูลกลับมาให้เรา เช่น https://www.abc.com/redirect_apple_url เป็นต้น มี https โดเมนจะต้อง Support ตามรายการด้านล่างด้วยนะครับ
    • เว็บไซต์เราต้องเข้าผ่าน https เท่านั้น
    • และ ต้องเป็น TLS 1.2 หรือสูงกว่าเท่านั้น

วิธีตรวจสอบว่าเว็บไซต์เรารองรับ TLS 1.2 หรือป่าว ให้ไปที่ ตรวจสอบ TLS พิมพ์ url เข้าไปและดูที่ส่วน Server Configuration

ขั้นตอนที่ 3 Create Key

สร้าง Keys ให้ไปที่ Certificates, Identifiers & Profiles เลือก Keys กดปุ่มเครื่องหมายบวก + ตั้งชื่อ keys จากนั้นติ๊กที่ Sign in with Apple กด Configure และเลือก Primary App IDs ที่เคยสร้างไว้ในขั้นตอนแรก กด save -> continue และ download ตามลำดับ เป็นอันเสร็จสิ้นขั้นตอนที่ 3 Create Key

ขั้นตอนที่ 4 Register Email Sources for Communication

  • ให้ไปที่ Certificates, Identifiers & Profiles เลือก More กดปุ่ม Configure เลือกไปที่ Setting และติ๊กเปิดใช้งาน Receive Sign in with Apple private email relay notifications จากนั้นกด Save
  • ในส่วนของ Email Sources ให้กดปุ่มบวก + และระบุโดเมนหลัก และ อีเมล ตามภาพด้านล่าง เป็นอันเสร็จสิ้นขั้นตอนสุดท้าย Register Email Sources for Communication ในส่วนการตั้งค่าใช้งานฝั่ง Apple

วิธีทำ Apple Login สำหรับ Website ( ตั้งค่าฝั่ง Website )

  • ต้องทำความเข้าใจก่อนว่าฝั่งเว็บไซต์เราจะมีอยู่ 2 url หลัก ๆ คือ
    • Login Page หน้าเข้าสู่ระบบที่มีปุ่ม Sign in with Apple
    • Callback Page สำหรับรับข้อมูล หลังจากเข้าสู่ระบบ ไม่ว่าจะสำเร็จหรือไม่สำเร็จ
ตัวอย่างปุ่ม Sign in with Apple
  • ในหน้า Login Page ให้เราวาง javascript apple login ไว้เลือก Tag ปิด Body ตามด้านล่างนะครับ
  • อธิบาย code เบื้องต้นนะครับ ส่วนนี้คือ การนำ apple javascript api มาใช้งานบนเว็บไซต์ของเรา
  • ส่วนนี้คือ div ปุ่มสีดำ ที่แสดงคำว่า ‘Sign in with Apple’ พร้อมโลโก้ จะเอาไปวางไว้ส่วนไหนในหน้าเว็บก็ได้ สามารถปรับแต่งดีไซน์ได้ ให้ใช้ css important ช่วยในการปรับ แต่ให้ดู Guideline ของทาง apple ด้วย ที่ human-interface-guidelines
  • ส่วนของการ initzialize apple api จะมี 4 พารามิเตอร์หลัก ๆ ที่จำเป็นต้องระบุอยู่ 4 ตัวนะครับ ไม่ระบุไม่ได้
    • clientId คือ Services IDs ที่เราได้สร้างไว้ในขั้นตอนที่ 2 ( ไม่ไช่ Primary ID ) เช่น clientId : ‘com.domain.weblogin’
    • scope คือ จำนวนข้อมูลที่เราต้องการขอจาก apple api เช่น scope : ‘name email’ สังเกตุนะครับว่า apple จะใช้ space ในการแบ่ง scope ไม่ไช่ (,) เหมือน line หรือ facebook
    • redirectURI คือ callback url ที่จะส่งข้อมูลกลับมาให้เว็บไซต์เรา เช่น redirectURI: ‘https://www.domain.com/apple_login’ อย่าลืมว่าต้องเป็น https และ TLS 1.2 หรือสูงกว่าเท่านั้น ถึงจะรองรับ
    • state คือ id ต่อครั้งในการร้องขอข้อมูล ซึ่งเราอาจะใช้เป็น datetime ก็ได้ เช่น state : ‘<?php echo time(‘YmdHis’); ?>’
  • เขียนคำสั่งเพื่อรับข้อมูลที่ Callback Page หรือ redirectURL เราจะสามารถรับค่า ชื่อ – นามสกุล อีเมล และนำไปใช้งานในขั้นตอนต่อไป จะเขียน code รับข้อมูลได้ประมาณนี้นะครับ

เราจะได้ชื่อ และ นามสกุลมาเพียงแต่ใช้ json_decode นะครับ แต่สำหรับอีเมล เราจะต้อง JWT Decode ตัวแปร id_token อีกที ( ลักษณะเดียวกันกับ line login )

ตัวอย่างการทำงาน Sign in with Apple

หลังกดปุ่ม ‘Sign in with Apple’ จะให้กรอก Apple ID กับ Password และทำ Two-factor Authentication เพื่อเข้าสู่ระบบ
หลังจากทำ Two-factor Authentication แล้วจะแจ้งรายละเอียดระดับการเข้าถึงข้อมูลประมาณนี้
จากนั้นก็จะแสดงข้อมูลที่ Website สามารถเข้าถึงได้ และเราจะอนุญาติข้อมูลส่วนไหนบ้าง

หลังกดปุ่ม ‘continue‘ ระบบ apple api จะพาเราไปที่หน้า redirectURI พร้อมข้อมูลแบบ post ไม่ว่าจะเข้าสู่ระบบสำเร็จหรือไม่สำเร็จ เราสามารถจัดการข้อมูลได้จากตรงนี้

วิธีทำ LINE Login เข้าสู่ระบบด้วย Line (PHP) บนเว็... LINE Login API คือการเข้าสู่ระบบหรือสมัครสมาชิกแบบ SSO ( Single Sign On ) ความหมายคือการใช้ข้อมูลเดียวกันกับแพลตฟอร์มใด แพลตฟอร์มหนึ่งในการลงทะเบ...
สรุปปัญหา html2canvas กับข้อความภาษาไทย... html2canvas คือ html5 javascript library ที่ถูกพัฒนาขึ้นมาเพื่อใช้งานสำหรับการแปลงข้อมูลในภาษา html ให้กลายเป็นข้อมูลรูปภาพ png, jpg, pdf ตัว...
รวมฟรี สุดยอด WordPress Theme ปี 2020... เราได้รวบรวม WordPress Theme ที่ได้รับความนิยมที่สุดในครึ่งปี 2020 โดยคิดจากยอดดาวน์โหลดและยอดรีวิว และเลือกโดยคัดธีมที่มี Performance ดีที่สุด โ...
PHP ติดตั้งและใช้งาน Tesseract OCR แปลงรูปภาพเป็นข... Tesseract คือ Engine ที่ใช้สำหรับกระบวนการแปลงสื่อสิ่งพิมพ์ เช่นกระดาษ นิตยาสาร สัญญา หรือข้อมูลอะไรก็ตามที่อยู่ในรูปของเอกสารกระดาษ ให้กลายเป็นเ...

By codebee

- Programmer & Writer