การลงชื่อเข้าใช้ผ่าน Apple ใน React Native ด้วย Parse SDK

ลงชื่อเข้าใช้ด้วย apple สำหรับ react native บทนำ ในบทเรียนก่อนหน้านี้ คุณได้สร้างฟีเจอร์การเข้าสู่ระบบ/ออกจากระบบของผู้ใช้ในแอปของคุณโดยใช้ parse user parse user คลาส ตอนนี้คุณจะได้เรียนรู้วิธีการใช้การลงชื่อเข้าใช้ด้วย apple เพื่อดึงข้อมูลผู้ใช้จาก apple และเข้าสู่ระบบ ลงทะเบียน หรือเชื่อมโยงผู้ใช้ที่มีอยู่กับมัน คุณจะติดตั้งและกำหนดค่า react native apple authentication react native apple authentication ไลบรารีเพื่อให้บรรลุเป้าหมายนี้ วิธีการ parse user linkwith parse user linkwith มีหน้าที่ในการลงทะเบียนและเข้าสู่ระบบผู้ใช้โดยใช้วิธีการตรวจสอบสิทธิ์ของบุคคลที่สามใด ๆ ตราบใดที่คุณส่งพารามิเตอร์ที่ถูกต้องตามที่ผู้ให้บริการแต่ละรายร้องขอ หลังจากเชื่อมโยงข้อมูลผู้ใช้กับ parse user parse user ใหม่หรือที่มีอยู่ parse จะเก็บเซสชันผู้ใช้ที่ถูกต้องในอุปกรณ์ของคุณ การเรียกใช้วิธีการในอนาคต เช่น currentasync currentasync จะดึงข้อมูลผู้ใช้ของคุณได้สำเร็จ เช่นเดียวกับการเข้าสู่ระบบปกติ คุณสามารถเข้าถึงโปรเจกต์ android ที่สร้างขึ้นจากบทเรียนนี้ได้ตลอดเวลาที่ github ของเรา https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java ข้อกำหนดเบื้องต้น ในการทำตามบทแนะนำนี้ คุณจะต้องมี แอป react native ที่สร้างขึ้นและ https //www back4app com/docs/react native/parse sdk/react native sdk ทำตามคู่มือก่อนหน้านี้เพื่อให้คุณมีความเข้าใจที่ดีขึ้นเกี่ยวกับ https //www back4app com/docs/react native/parse sdk/working with users/react native login เป้าหมาย เพื่อสร้างฟีเจอร์การเข้าสู่ระบบของผู้ใช้โดยใช้การลงชื่อเข้าใช้ด้วย apple บน parse สำหรับแอป react native 1 การติดตั้ง dependencies วิธีที่ได้รับความนิยมมากที่สุดในการเปิดใช้งาน apple sign in บน react native คือการใช้ react native apple authentication react native apple authentication เพื่อจัดการกับมัน เนื่องจากการกำหนดค่าของไลบรารีนี้ขึ้นอยู่กับสภาพแวดล้อมการพัฒนาของคุณ แพลตฟอร์มเป้าหมาย และความชอบของคุณ ให้ตั้งค่าตาม https //github com/invertase/react native apple authentication หากคุณกำลังพัฒนาสำหรับ android คุณยังต้องติดตั้ง https //github com/auth0/jwt decode ไลบรารีสำหรับการถอดรหัส apple jwt tokens หมายเหตุ โปรดตรวจสอบให้แน่ใจว่าคุณได้ปฏิบัติตามคำแนะนำสำหรับการตั้งค่าเริ่มต้นของสภาพแวดล้อม xcode การสร้าง app id ของคุณ คีย์ และ service id บน apple developer portal อย่างละเอียด 2 การใช้ apple sign in กับ parse ตอนนี้เรามาสร้างวิธีใหม่ภายใน userlogin userlogin คอมโพเนนต์ที่เรียกโมดัลการตรวจสอบสิทธิ์ apple sign in กันเถอะ react native apple authentication react native apple authentication ไลบรารีนี้มีโมดูลแยกสองโมดูลเพื่อจัดการการเรียกนี้ตามแพลตฟอร์มของผู้ใช้ ดังนั้นคุณต้องใช้ appleauth performrequest appleauth performrequest บน ios และ appleauthandroid signin appleauthandroid signin บน android หากผู้ใช้ลงชื่อเข้าใช้ด้วย apple การเรียกนี้จะดึงข้อมูลผู้ใช้จาก apple และคุณต้องเก็บ id id , token token , และอีเมลของ apple สำหรับภายหลัง javascript 1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response = {}; 4 let appleid = ''; 5 let appletoken = ''; 6 let appleemail = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'your service id', 22 // return url added to your apple dev console 23 redirecturi 'your redirect url', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata = { 37 id appleid, 38 token appletoken, 39 }; 40 } catch (error) { 41 // error can be caused by wrong parameters or lack of internet connection 42 alert alert('error!', error); 43 return false; 44 } 45 };1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response object = {}; 4 let appleid string = ''; 5 let appletoken string = ''; 6 let appleemail string = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'your service id', 22 // return url added to your apple dev console 23 redirecturi 'your service url', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken object = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata object = { 37 id appleid, 38 token appletoken, 39 }; 40 } catch (error any) { 41 // error can be caused by wrong parameters or lack of internet connection 42 alert alert('error!', error); 43 return false; 44 } 45 }; โปรดทราบว่า สำหรับ android คุณต้องถอดรหัสโทเค็นที่ส่งกลับจาก apple เพราะไลบรารี react native apple authentication react native apple authentication ใช้ api เว็บของ apple sign in สำหรับการตรวจสอบสิทธิ์ มีข้อจำกัดในการเข้าถึงข้อมูลเมื่อใช้วิธีนี้ ดังนั้นวิธีการทั่วไปในการดึง id ผู้ใช้และอีเมลของคุณคือผ่านกระบวนการถอดรหัสนี้ ตามที่ระบุ https //docs parseplatform org/parse server/guide/#apple authdata ในคู่มืออย่างเป็นทางการของ parse หลังจากนั้น คุณสามารถใช้ parse user linkwith parse user linkwith บน parse user parse user ใหม่เพื่อลงทะเบียนผู้ใช้ใหม่และเข้าสู่ระบบ โปรดทราบว่าหากผู้ใช้ของคุณได้ลงทะเบียนแล้วโดยใช้การรับรองความถูกต้องของ apple นี้ linkwith linkwith จะเข้าสู่ระบบโดยใช้บัญชีที่มีอยู่ javascript 1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response = {}; 4 let appleid = ''; 5 let appletoken = ''; 6 let appleemail = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'your service io', 22 // return url added to your apple dev console 23 redirecturi 'your service url', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata = { 37 id appleid, 38 token appletoken, 39 }; 40 // log in or sign up on parse using this apple credentials 41 let usertologin = new parse user(); 42 // set username and email to match provider email 43 usertologin set('username', appleemail); 44 usertologin set('email', appleemail); 45 return await usertologin 46 linkwith('apple', { 47 authdata authdata, 48 }) 49 then(async (loggedinuser) => { 50 // login returns the corresponding parseuser object 51 alert alert( 52 'success!', 53 `user ${loggedinuser get('username')} has successfully signed in!`, 54 ); 55 // to verify that this is in fact the current user, currentasync can be used 56 const currentuser = await parse user currentasync(); 57 console log(loggedinuser === currentuser); 58 // navigation navigate takes the user to the screen named after the one 59 // passed as parameter 60 navigation navigate('home'); 61 return true; 62 }) 63 catch(async (error) => { 64 // error can be caused by wrong parameters or lack of internet connection 65 alert alert('error!', error message); 66 return false; 67 }); 68 } catch (error) { 69 // error can be caused by wrong parameters or lack of internet connection 70 alert alert('error!', error); 71 return false; 72 } 73 };1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response object = {}; 4 let appleid string = ''; 5 let appletoken string = ''; 6 let appleemail string = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'com back4app userguide', 22 // return url added to your apple dev console 23 redirecturi 'https //tuhl software/back4appuserguide/', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken object = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata object = { 37 id appleid, 38 token appletoken, 39 }; 40 // log in or sign up on parse using this apple credentials 41 let usertologin parse user = new parse user(); 42 // set username and email to match provider email 43 usertologin set('username', appleemail); 44 usertologin set('email', appleemail); 45 return await usertologin 46 linkwith('apple', { 47 authdata authdata, 48 }) 49 then(async (loggedinuser parse user) => { 50 // login returns the corresponding parseuser object 51 alert alert( 52 'success!', 53 `user ${loggedinuser get('username')} has successfully signed in!`, 54 ); 55 // to verify that this is in fact the current user, currentasync can be used 56 const currentuser parse user = await parse user currentasync(); 57 console log(loggedinuser === currentuser); 58 // navigation navigate takes the user to the screen named after the one 59 // passed as parameter 60 navigation navigate('home'); 61 return true; 62 }) 63 catch(async (error object) => { 64 // error can be caused by wrong parameters or lack of internet connection 65 alert alert('error!', error message); 66 return false; 67 }); 68 } catch (error any) { 69 // error can be caused by wrong parameters or lack of internet connection 70 alert alert('error!', error); 71 return false; 72 } 73 }; เพิ่มฟังก์ชันนี้ลงใน usersignin usersignin คอมโพเนนต์ของคุณและกำหนดให้กับปุ่ม apple ของคุณ onpress onpress พารามิเตอร์ ไปข้างหน้าและทดสอบฟังก์ชันใหม่ของคุณ โปรดทราบว่าผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าหลักของคุณหลังจากลงทะเบียนและ/หรือเข้าสู่ระบบสำเร็จ 3 การตรวจสอบการเข้าสู่ระบบของผู้ใช้และการสร้างเซสชัน เพื่อให้แน่ใจว่าการเข้าสู่ระบบด้วย apple ทำงานได้ คุณสามารถดูที่แดชบอร์ด parse ของคุณและดู ผู้ใช้ ผู้ใช้ ใหม่ (หากข้อมูลการตรวจสอบสิทธิ์ของ apple ของคุณไม่เป็นของผู้ใช้อื่น) ซึ่งมี authdata authdata ของ apple คุณยังสามารถตรวจสอบได้ว่าเซสชันที่ถูกต้องถูกสร้างขึ้นในแดชบอร์ด ซึ่งมีการชี้ไปที่ ผู้ใช้ ผู้ใช้ วัตถุ 4 การเชื่อมโยงผู้ใช้ที่มีอยู่กับการเข้าสู่ระบบด้วย apple อีกหนึ่ง linkwith linkwith การใช้งานที่เป็นไปได้คือการเชื่อมโยงผู้ใช้ที่มีอยู่กับผู้ให้บริการการตรวจสอบสิทธิ์อื่น ในกรณีนี้คือ apple เพิ่มฟังก์ชันนี้ที่เรียก linkwith linkwith ในลักษณะเดียวกับที่คุณทำใน userlogin userlogin ไปยัง hellouser hellouser คอมโพเนนต์ของคุณหรือโดยตรงไปยังหน้าหลักของคุณ ความแตกต่างเพียงอย่างเดียวที่นี่คือแทนที่จะเรียกใช้วิธีการจาก parse user parse user , คุณจะใช้มันจากวัตถุผู้ใช้ที่เข้าสู่ระบบแล้ว javascript 1 const douserlinkapple = async function (){ 2 try { 3 let response = {}; 4 let appleid = ''; 5 let appletoken = ''; 6 if (platform os === 'ios') { 7 // performs login request requesting user email 8 response = await appleauth performrequest({ 9 requestedoperation appleauth operation login, 10 requestedscopes \[appleauth scope email], 11 }); 12 // on ios, user id and email are easily retrieved from request 13 appleid = response user; 14 appletoken = response identitytoken; 15 } else if (platform os === 'android') { 16 // configure the request 17 appleauthandroid configure({ 18 // the service id you registered with apple 19 clientid 'your service id', 20 // return url added to your apple dev console 21 redirecturi 'your redirect url', 22 responsetype appleauthandroid responsetype all, 23 scope appleauthandroid scope all, 24 }); 25 response = await appleauthandroid signin(); 26 // decode user id and email from token returned from apple, 27 // this is a common workaround for apple sign in via web api 28 const decodedidtoken = jwt decode(response id token); 29 appleid = decodedidtoken sub; 30 appletoken = response id token; 31 } 32 // format authdata to provide correctly for apple linkwith on parse 33 const authdata = { 34 id appleid, 35 token appletoken, 36 }; 37 let currentuser = await parse user currentasync(); 38 // link user with his apple credentials 39 return await currentuser 40 linkwith('apple', { 41 authdata authdata, 42 }) 43 then(async (loggedinuser) => { 44 // login returns the corresponding parseuser object 45 alert alert( 46 'success!', 47 `user ${loggedinuser get( 48 'username', 49 )} has successfully linked his apple account!`, 50 ); 51 // to verify that this is in fact the current user, currentasync can be used 52 currentuser = await parse user currentasync(); 53 console log(loggedinuser === currentuser); 54 return true; 55 }) 56 catch(async (error) => { 57 // error can be caused by wrong parameters or lack of internet connection 58 alert alert('error!', error message); 59 return false; 60 }); 61 } catch (error) { 62 // error can be caused by wrong parameters or lack of internet connection 63 alert alert('error!', error); 64 return false; 65 } 66 };1 const douserlinkapple = async function () promise\<boolean> { 2 try { 3 let response object = {}; 4 let appleid string = ''; 5 let appletoken string = ''; 6 if (platform os === 'ios') { 7 // performs login request requesting user email 8 response = await appleauth performrequest({ 9 requestedoperation appleauth operation login, 10 requestedscopes \[appleauth scope email], 11 }); 12 // on ios, user id and email are easily retrieved from request 13 appleid = response user; 14 appletoken = response identitytoken; 15 } else if (platform os === 'android') { 16 // configure the request 17 appleauthandroid configure({ 18 // the service id you registered with apple 19 clientid 'your service id', 20 // return url added to your apple dev console 21 redirecturi 'your service url', 22 responsetype appleauthandroid responsetype all, 23 scope appleauthandroid scope all, 24 }); 25 response = await appleauthandroid signin(); 26 // decode user id and email from token returned from apple, 27 // this is a common workaround for apple sign in via web api 28 const decodedidtoken object = jwt decode(response id token); 29 appleid = decodedidtoken sub; 30 appletoken = response id token; 31 } 32 // format authdata to provide correctly for apple linkwith on parse 33 const authdata object = { 34 id appleid, 35 token appletoken, 36 }; 37 let currentuser parse user = await parse user currentasync(); 38 // link user with his apple credentials 39 return await currentuser 40 linkwith('apple', { 41 authdata authdata, 42 }) 43 then(async (loggedinuser parse user) => { 44 // login returns the corresponding parseuser object 45 alert alert( 46 'success!', 47 `user ${loggedinuser get( 48 'username', 49 )} has successfully linked his apple account!`, 50 ); 51 // to verify that this is in fact the current user, currentasync can be used 52 currentuser = await parse user currentasync(); 53 console log(loggedinuser === currentuser); 54 return true; 55 }) 56 catch(async (error object) => { 57 // error can be caused by wrong parameters or lack of internet connection 58 alert alert('error!', error message); 59 return false; 60 }); 61 } catch (error any) { 62 // error can be caused by wrong parameters or lack of internet connection 63 alert alert('error!', error); 64 return false; 65 } 66 }; กำหนดฟังก์ชันนี้ให้กับปุ่ม apple onpress onpress ในหน้าจอหลักของคุณ ทดสอบฟังก์ชันใหม่ของคุณ โดยสังเกตว่า parse user parse user อ็อบเจ็กต์ authdata authdata จะถูกอัปเดตด้วยข้อมูลผู้ให้บริการการรับรองใหม่ ตรวจสอบว่าผู้ใช้ได้อัปเดตในแดชบอร์ด parse server ของคุณแล้วหรือไม่ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการเข้าสู่ระบบ ลงทะเบียน หรือเชื่อมโยงผู้ใช้ parse ที่มีอยู่ใน react native โดยใช้การลงชื่อเข้าใช้ apple กับ react native apple authentication react native apple authentication ในคู่มือต่อไป เราจะแสดงวิธีการทำการค้นหาผู้ใช้ที่มีประโยชน์