Site icon บริษัท โค๊ดบี จำกัด

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

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

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

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>Apple Login<&sol;strong> คือการเข้าสู่ระบบหรือสมัครสมาชิกแบบ SSO &lpar; Single Sign On &rpar; ความหมายคือการใช้ข้อมูลเดียวกันกับแพลตฟอร์มใด แพลตฟอร์มหนึ่งในการลงทะเบียนใช้งาน ในตัวอย่างนี้ก็คือการใช้ Apple ID ในการเข้าสู่ระบบหรือสมัครสมาชิกเข้าใช้งานซอฟต์แวร์อื่น<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">เราจะเริ่มเห็นตัวเลือกในการเข้าสู่ระบบ หรือสมัครสมาชิก บนเว็บไซต์ หรือ mobile application โดยใช้ Apple ID มากขึ้นเรื่อย เหตุผลก็เพราะว่า ทาง Apple ได้เพิ่มกฏเกณฑ์ในการนำ Application ขึ้นให้บริการที่ Apps Store ถ้าแอปนั้นมีการใช้ Third Party ในการเข้าสู่ระบบ เช่น Facebook&comma; Twitter หรือ Google แอปนั้นจำเป็นต้องเพิ่มการเข้าใช้งานหรือสมัครสมาชิกด้วย Apple ID เข้าไปด้วย ยกเว้นแต่ว่าแอปนั้นเป็นการเข้าระบบหรือสมัครสมาชิกด้วย Custom Register ก็ไม่จำเป็นต้องเพิ่มการสมัครสมาชิกด้วย Apple ID<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading"><strong>วิธีทำ Apple Login สำหรับ Website<&sol;strong> &lpar; ตั้งค่าฝั่ง Apple &rpar;<&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ทำความเข้าใจขั้นตอนการตั้งค่าฝั่ง Apple โดยรวม ยังไม่ได้เกี่ยวกับฝั่ง Website นะครับ จะมีอยู่ 4 ขั้นตอนหลัก ๆ คือ <ul><li><strong>Enable App ID<&sol;strong><&sol;li><li><strong>Create Service ID for Web Authentication<&sol;strong><&sol;li><li><strong>Create Key<&sol;strong><&sol;li><li><strong>Register Email Sources for Communication<&sol;strong><&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;0-940x119&period;png" alt&equals;"" class&equals;"wp-image-5256" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;0&period;png" data-full-size&equals;"2314x294" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ขั้นตอนที่ 1 Enable App ID<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>แน่นอนครับคุณต้องเป็นสมาชิก <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developer&period;apple&period;com&sol;programs" target&equals;"&lowbar;blank">apple developer program<&sol;a> ก่อน ซึ่งมีค่าใช้จ่าย 99&dollar; ต่อปี ใช้ได้ทั้งแบบ Individual &lpar; บุคคล &rpar; และ Enterprise &lpar; นิติบุคคล&ZeroWidthSpace; &rpar; สมัครได้ที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developer&period;apple&period;com&sol;programs" target&equals;"&lowbar;blank">https&colon;&sol;&sol;developer&period;apple&period;com&sol;programs<&sol;a><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>สร้าง <strong>Primary App IDs<&sol;strong> เข้าไปที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developer&period;apple&period;com&sol;account&sol;resources&sol;identifiers" target&equals;"&lowbar;blank">Certificates&comma; Identifiers &amp&semi; Profiles <&sol;a> เลือกไปที่ <strong>Identifiers<&sol;strong> กด &plus; เพื่อเพิ่ม <strong>App IDs<&sol;strong> ให้เลือกข้อมูลตามภาพด้านล่างนะครับ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;1-940x519&period;png" alt&equals;"" class&equals;"wp-image-5249" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;1&period;png" data-full-size&equals;"1518x838" &sol;><figcaption>เลือกที่ Apps IDs เพื่อสร้าง Primary App IDs ก่อน<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;2-940x628&period;png" alt&equals;"" class&equals;"wp-image-5250" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;2&period;png" data-full-size&equals;"1260x842" &sol;><figcaption>เลือก Type เป็น App<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;3-940x228&period;png" alt&equals;"" class&equals;"wp-image-5251" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;3&period;png" data-full-size&equals;"1988x482" &sol;><figcaption>กรอก Description และ Bundle ID Explicit ตัวอย่างเช่น com&period;domain&period;appname ติ๊กที่ Sign In with Apple และกด Edit<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;5-940x360&period;png" alt&equals;"" class&equals;"wp-image-5252" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;5&period;png" data-full-size&equals;"1332x510" &sol;><figcaption>เลือกที่ Enable as a primary App ID กด Save และ กด Continue<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ขั้นตอนที่ 2 Create Service ID for Web Authentication<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>สร้าง <strong>Service IDs<&sol;strong> ให้ไปที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developer&period;apple&period;com&sol;account&sol;resources&sol;identifiers" target&equals;"&lowbar;blank">Certificates&comma; Identifiers &amp&semi; Profiles<&sol;a> เลือก <strong>Identifiers<&sol;strong> กดปุ่มบวกเหมือนเดิม แต่คราวนี้ให้เลือก ที่ <strong>Services IDs<&sol;strong> จากนั้นกรอข้อมูล description และ identifiers ที่แตกต่างจากที่เรากรอกไว้ก่อนหน้านี้นะครับ คนละ app id กัน ตัวอย่างเช่น com&period;domain&period;login จากนั้นกด continue และ register ตามลำดับ <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;6-940x529&period;png" alt&equals;"" class&equals;"wp-image-5258" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;6&period;png" data-full-size&equals;"1502x846" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>หลังจากกด register เรียบร้อยแล้ว ระบบจะพาเรามาที่หน้าแสดง รายการ Services IDs ให้เราคลิกไปที่ Services IDs ที่เราเพิ่งสร้าง ติ๊กถูกที่ <strong>Sign in with Apps<&sol;strong> จากนั้นเลือก Primary App IDs ที่เราสร้างไว้ในขั้นตอนแรก ระบุโดเมนที่เราต้องการทำระบบ Apple Login เช่น www&period;abc&period;com ไม่ต้องมี https จากนั้นระบุ redirect url คือ url ที่จะ return ข้อมูลกลับมาให้เรา เช่น https&colon;&sol;&sol;www&period;abc&period;com&sol;redirect&lowbar;apple&lowbar;url เป็นต้น มี https โดเมนจะต้อง Support ตามรายการด้านล่างด้วยนะครับ<ul><li>เว็บไซต์เราต้องเข้าผ่าน https เท่านั้น<&sol;li><li>และ ต้องเป็น TLS 1&period;2 หรือสูงกว่าเท่านั้น<&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">วิธีตรวจสอบว่าเว็บไซต์เรารองรับ TLS 1&period;2 หรือป่าว ให้ไปที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;ssltools&period;digicert&period;com&sol;checker&sol;views&sol;checkInstallation&period;jsp" target&equals;"&lowbar;blank">ตรวจสอบ TLS<&sol;a> พิมพ์ url เข้าไปและดูที่ส่วน Server Configuration<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;7-940x456&period;png" alt&equals;"" class&equals;"wp-image-5259" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;7&period;png" data-full-size&equals;"1428x692" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ขั้นตอนที่ 3 Create Key<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">สร้าง <strong>Keys<&sol;strong> ให้ไปที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developer&period;apple&period;com&sol;account&sol;resources&sol;identifiers" target&equals;"&lowbar;blank">Certificates&comma; Identifiers &amp&semi; Profiles<&sol;a> เลือก <strong>Keys<&sol;strong> กดปุ่มเครื่องหมายบวก &plus; ตั้งชื่อ keys จากนั้นติ๊กที่ Sign in with Apple กด Configure และเลือก Primary App IDs ที่เคยสร้างไว้ในขั้นตอนแรก กด save -&gt&semi; continue และ download ตามลำดับ เป็นอันเสร็จสิ้นขั้นตอนที่ 3 Create Key<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;8-940x474&period;png" alt&equals;"" class&equals;"wp-image-5261" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;8&period;png" data-full-size&equals;"1522x768" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><strong>ขั้นตอนที่ 4 Register Email Sources for Communication<&sol;strong><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ให้ไปที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developer&period;apple&period;com&sol;account&sol;resources&sol;identifiers" target&equals;"&lowbar;blank">Certificates&comma; Identifiers &amp&semi; Profiles<&sol;a> เลือก <strong>More<&sol;strong> กดปุ่ม Configure เลือกไปที่ Setting และติ๊กเปิดใช้งาน <strong>Receive Sign in with Apple private email relay notifications<&sol;strong> จากนั้นกด Save<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;9-1-940x286&period;png" alt&equals;"" class&equals;"wp-image-5264" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;9-1&period;png" data-full-size&equals;"1142x348" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ในส่วนของ Email Sources ให้กดปุ่มบวก &plus; และระบุโดเมนหลัก และ อีเมล ตามภาพด้านล่าง เป็นอันเสร็จสิ้นขั้นตอนสุดท้าย <strong>Register Email Sources for Communication<&sol;strong> ในส่วนการตั้งค่าใช้งานฝั่ง Apple<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;10-940x908&period;png" alt&equals;"" class&equals;"wp-image-5265" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;10&period;png" data-full-size&equals;"1186x1146" &sol;><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading"><strong>วิธีทำ Apple Login สำหรับ Website<&sol;strong> &lpar; ตั้งค่าฝั่ง Website &rpar;<&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ต้องทำความเข้าใจก่อนว่าฝั่งเว็บไซต์เราจะมีอยู่ 2 url หลัก ๆ คือ<ul><li><strong>Login Page<&sol;strong> หน้าเข้าสู่ระบบที่มีปุ่ม Sign in with Apple<&sol;li><li><strong>Callback Page<&sol;strong> สำหรับรับข้อมูล หลังจากเข้าสู่ระบบ ไม่ว่าจะสำเร็จหรือไม่สำเร็จ<&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;11-940x487&period;png" alt&equals;"" class&equals;"wp-image-5266" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;11&period;png" data-full-size&equals;"1128x584" &sol;><figcaption>ตัวอย่างปุ่ม Sign in with Apple<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ในหน้า Login Page ให้เราวาง javascript apple login ไว้เลือก Tag ปิด Body ตามด้านล่างนะครับ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><script type&equals;"text&sol;javascript" src&equals;"https&colon;&sol;&sol;appleid&period;cdn-apple&period;com&sol;appleauth&sol;static&sol;jsapi&sol;appleid&sol;1&sol;en&lowbar;US&sol;appleid&period;auth&period;js"><&sol;script>&NewLine;<div id&equals;"appleid-signin" data-color&equals;"black" data-border&equals;"true" data-type&equals;"sign in"><&sol;div>&NewLine;<script type&equals;"text&sol;javascript">&NewLine; AppleID&period;auth&period;init&lpar;&lbrace;&NewLine; clientId &colon; '&lbrack;CLIENT&lowbar;ID&rsqb;'&comma;&NewLine; scope &colon; '&lbrack;SCOPES&rsqb;'&comma;&NewLine; redirectURI &colon; '&lbrack;REDIRECT&lowbar;URI&rsqb;'&comma;&NewLine; state &colon; '&lbrack;STATE&rsqb;'&comma;&NewLine; &rcub;&rpar;&semi;&NewLine;<&sol;script><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>อธิบาย code เบื้องต้นนะครับ ส่วนนี้คือ การนำ apple javascript api มาใช้งานบนเว็บไซต์ของเรา<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><script type&equals;"text&sol;javascript" src&equals;"https&colon;&sol;&sol;appleid&period;cdn-apple&period;com&sol;appleauth&sol;static&sol;jsapi&sol;appleid&sol;1&sol;en&lowbar;US&sol;appleid&period;auth&period;js"><&sol;script><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ส่วนนี้คือ div ปุ่มสีดำ ที่แสดงคำว่า &&num;8216&semi;Sign in with Apple&&num;8217&semi; พร้อมโลโก้ จะเอาไปวางไว้ส่วนไหนในหน้าเว็บก็ได้ สามารถปรับแต่งดีไซน์ได้ ให้ใช้ css important ช่วยในการปรับ แต่ให้ดู Guideline ของทาง apple ด้วย ที่ <a rel&equals;"noreferrer noopener" href&equals;"https&colon;&sol;&sol;developer&period;apple&period;com&sol;design&sol;human-interface-guidelines&sol;sign-in-with-apple&sol;overview&sol;buttons&sol;" target&equals;"&lowbar;blank">human-interface-guidelines<&sol;a> <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><div id&equals;"appleid-signin" data-color&equals;"black" data-border&equals;"true" data-type&equals;"sign in"><&sol;div><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ส่วนของการ initzialize apple api จะมี 4 พารามิเตอร์หลัก ๆ ที่จำเป็นต้องระบุอยู่ 4 ตัวนะครับ ไม่ระบุไม่ได้ <ul><li><strong>clientId<&sol;strong> คือ Services IDs ที่เราได้สร้างไว้ในขั้นตอนที่ 2 &lpar; ไม่ไช่ Primary ID &rpar; เช่น <strong>clientId &colon; &&num;8216&semi;com&period;domain&period;weblogin&&num;8217&semi;<&sol;strong><&sol;li><li><strong>scope<&sol;strong> คือ จำนวนข้อมูลที่เราต้องการขอจาก apple api เช่น <strong>scope &colon; &&num;8216&semi;name email&&num;8217&semi;<&sol;strong> สังเกตุนะครับว่า apple จะใช้ space ในการแบ่ง scope ไม่ไช่ &lpar;&comma;&rpar; เหมือน line หรือ facebook<&sol;li><li><strong>redirectURI<&sol;strong> คือ callback url ที่จะส่งข้อมูลกลับมาให้เว็บไซต์เรา เช่น <strong>redirectURI&colon; &&num;8216&semi;https&colon;&sol;&sol;www&period;domain&period;com&sol;apple&lowbar;login&&num;8217&semi;<&sol;strong> อย่าลืมว่าต้องเป็น https และ TLS 1&period;2 หรือสูงกว่าเท่านั้น ถึงจะรองรับ<&sol;li><li><strong>state<&sol;strong> คือ id ต่อครั้งในการร้องขอข้อมูล ซึ่งเราอาจะใช้เป็น datetime ก็ได้ เช่น <strong>state &colon; &&num;8216&semi;&lt&semi;&quest;php echo time&lpar;&&num;8216&semi;YmdHis&&num;8217&semi;&rpar;&semi; &quest;&gt&semi;&&num;8217&semi;<&sol;strong><&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"javascript" class&equals;"language-javascript"><pre class&equals;"wp-block-preformatted">AppleID&period;auth&period;init&lpar;&lbrace;&NewLine; clientId &colon; 'com&period;domain&period;weblogin'&comma;&NewLine; scope &colon; 'name email'&comma;&NewLine; redirectURI&colon; 'https&colon;&sol;&sol;www&period;domain&period;com&sol;apple&lowbar;login'&comma;&NewLine; state &colon; '<&quest;php echo time&lpar;'YmdHis'&rpar;&semi; &quest;>'&comma;&NewLine;&rcub;&rpar;&semi;<&sol;pre><&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เขียนคำสั่งเพื่อรับข้อมูลที่ <strong>Callback Page<&sol;strong> หรือ redirectURL เราจะสามารถรับค่า ชื่อ &&num;8211&semi; นามสกุล อีเมล และนำไปใช้งานในขั้นตอนต่อไป จะเขียน code รับข้อมูลได้ประมาณนี้นะครับ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php">public function apple&lowbar;login&lpar;&rpar;&lbrace;&NewLine; &dollar;post &equals; &dollar;this-&gt&semi;input-&gt&semi;post&lpar;&rpar;&semi;&NewLine; &dollar;user &equals; json&lowbar;decode&lpar;&dollar;post&lbrack;'user'&rsqb;&rpar;&semi;&NewLine; &dollar;firstName &equals; &dollar;user-&gt&semi;name-&gt&semi;firstName&semi;&NewLine; &dollar;lastName &equals; &dollar;user-&gt&semi;name-&gt&semi;lastName&semi;&NewLine; &dollar;id&lowbar;token &equals; &dollar;post&lbrack;'id&lowbar;token'&rsqb;&semi;&NewLine;&rcub;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">เราจะได้ชื่อ และ นามสกุลมาเพียงแต่ใช้ json&lowbar;decode นะครับ แต่สำหรับอีเมล เราจะต้อง <strong>JWT Decode<&sol;strong> ตัวแปร id&lowbar;token อีกที &lpar; <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;วิธีทำ-line-login&sol;" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">ลักษณะเดียวกันกับ line login<&sol;a> &rpar;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading">ตัวอย่างการทำงาน Sign in with Apple<&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;14-940x668&period;png" alt&equals;"" class&equals;"wp-image-5281" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;14&period;png" data-full-size&equals;"1120x796" &sol;><figcaption>หลังกดปุ่ม &&num;8216&semi;Sign in with Apple&&num;8217&semi; จะให้กรอก Apple ID กับ Password และทำ Two-factor Authentication เพื่อเข้าสู่ระบบ<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;12-940x439&period;png" alt&equals;"" class&equals;"wp-image-5277" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;12&period;png" data-full-size&equals;"2092x978" &sol;><figcaption>หลังจากทำ Two-factor Authentication แล้วจะแจ้งรายละเอียดระดับการเข้าถึงข้อมูลประมาณนี้<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<figure class&equals;"wp-block-image size-large"><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;13-940x458&period;png" alt&equals;"" class&equals;"wp-image-5278" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2020&sol;06&sol;13&period;png" data-full-size&equals;"2122x1034" &sol;><figcaption>จากนั้นก็จะแสดงข้อมูลที่ Website สามารถเข้าถึงได้ และเราจะอนุญาติข้อมูลส่วนไหนบ้าง<&sol;figcaption><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">หลังกดปุ่ม &&num;8216&semi;<strong>continue<&sol;strong>&&num;8216&semi; ระบบ apple api จะพาเราไปที่หน้า redirectURI พร้อมข้อมูลแบบ post ไม่ว่าจะเข้าสู่ระบบสำเร็จหรือไม่สำเร็จ เราสามารถจัดการข้อมูลได้จากตรงนี้<&sol;p>&NewLine;

Exit mobile version