Integrasi Apple SignIn di React Native dengan Parse

masuk dengan apple untuk react native pendahuluan dalam tutorial terakhir, anda membangun fitur login/logout pengguna untuk aplikasi anda menggunakan parse user parse user kelas sekarang anda akan belajar bagaimana menggunakan masuk apple untuk mengambil data pengguna dari apple dan masuk, mendaftar atau menghubungkan pengguna yang ada dengan itu anda juga akan menginstal dan mengonfigurasi react native apple authentication react native apple authentication lib untuk mencapai itu metode parse user linkwith parse user linkwith bertanggung jawab untuk mendaftar dan masuk pengguna menggunakan metode otentikasi pihak ketiga mana pun, selama anda mengirimkan parameter yang tepat yang diminta oleh setiap penyedia yang berbeda setelah menghubungkan data pengguna ke parse user parse user baru atau yang ada, parse akan menyimpan sesi pengguna yang valid di perangkat anda panggilan mendatang ke metode seperti currentasync currentasync akan berhasil mengambil data pengguna anda, sama seperti dengan login biasa kapan saja, anda dapat mengakses proyek android lengkap yang dibangun dengan tutorial ini di repositori github kami https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react native yang dibuat dan https //www back4app com/docs/react native/parse sdk/react native sdk selesaikan panduan sebelumnya agar anda dapat memiliki pemahaman yang lebih baik tentang https //www back4app com/docs/react native/parse sdk/working with users/react native login tujuan untuk membangun fitur login pengguna menggunakan apple sign in di parse untuk aplikasi react native 1 menginstal ketergantungan cara paling populer untuk mengaktifkan apple sign in di react native adalah dengan menggunakan react native apple authentication react native apple authentication untuk menanganinya karena konfigurasi pustaka ini tergantung pada lingkungan pengembangan, platform target, dan preferensi anda, atur sesuai dengan https //github com/invertase/react native apple authentication jika anda mengembangkan untuk android, anda juga perlu menginstal https //github com/auth0/jwt decode pustaka untuk mendekode token jwt apple catatan pastikan untuk mengikuti instruksi dengan teliti untuk pengaturan awal lingkungan xcode, membuat id aplikasi anda, kunci, dan id layanan di portal pengembang apple 2 menggunakan apple sign in dengan parse mari kita buat metode baru di dalam userlogin userlogin komponen yang memanggil modal otentikasi apple sign in react native apple authentication react native apple authentication lib memiliki dua modul terpisah untuk menangani panggilan ini berdasarkan platform pengguna anda, jadi anda perlu menggunakan appleauth performrequest appleauth performrequest di ios dan appleauthandroid signin appleauthandroid signin di android jika pengguna masuk dengan apple, panggilan ini akan mengambil data pengguna dari apple dan anda perlu menyimpan id id , token token , dan email apple untuk nanti 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 }; perhatikan bahwa untuk android anda perlu mendekode token yang dikembalikan dari apple karena lib react native apple authentication react native apple authentication menggunakan api web apple sign in untuk otentikasi ada pembatasan untuk akses data saat menggunakan metode ini, jadi solusi umum untuk mengambil id pengguna dan email anda adalah melalui proses dekode ini, seperti yang dinyatakan https //docs parseplatform org/parse server/guide/#apple authdata dalam panduan resmi parse setelah itu, anda dapat menggunakan parse user linkwith parse user linkwith pada objek parse user parse user baru untuk mendaftarkan pengguna baru dan masuk perhatikan bahwa jika pengguna anda sudah mendaftar menggunakan otentikasi apple ini, linkwith linkwith akan masuk menggunakan akun yang ada 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 }; tambahkan fungsi ini ke usersignin usersignin komponen anda dan tetapkan ke tombol apple anda onpress onpress silakan uji fungsi baru anda perhatikan bahwa pengguna akan diarahkan ke layar beranda anda setelah berhasil mendaftar dan/atau masuk 3 memverifikasi masuk pengguna dan pembuatan sesi untuk memastikan bahwa masuk dengan apple berhasil, anda dapat melihat dasbor parse anda dan melihat pengguna pengguna baru anda (jika data otentikasi apple anda tidak milik pengguna lain), yang berisi authdata authdata parameter apple anda juga dapat memverifikasi bahwa sesi yang valid telah dibuat di dasbor, yang berisi pointer ke pengguna pengguna objek tersebut 4 menghubungkan pengguna yang ada ke apple sign in penggunaan lain yang mungkin adalah untuk menghubungkan pengguna yang ada dengan penyedia otentikasi lain, dalam hal ini, apple tambahkan fungsi ini yang memanggil linkwith linkwith dengan cara yang sama seperti yang anda lakukan di linkwith linkwith userlogin userlogin ke hellouser hellouser komponen anda atau langsung ke layar beranda anda satu satunya perbedaan di sini adalah bahwa alih alih memanggil metode dari parse user parse user yang kosong, anda akan menggunakannya dari objek pengguna yang sudah masuk 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 }; tetapkan fungsi ini ke tombol apple onpress onpress parameter di layar beranda anda uji fungsi baru anda, dengan mencatat bahwa parse user parse user objek authdata authdata nilainya akan diperbarui dengan data penyedia otentikasi baru verifikasi apakah pengguna memang telah diperbarui di dasbor server parse anda kesimpulan di akhir panduan ini, anda telah belajar bagaimana cara masuk, mendaftar, atau menghubungkan pengguna parse yang ada di react native menggunakan sign in apple dengan react native apple authentication react native apple authentication di panduan berikutnya, kami akan menunjukkan kepada anda cara melakukan kueri pengguna yang berguna