Implementación de Apple Sign-In en Parse con React Native

iniciar sesión con apple para react native introducción en el último tutorial, construiste una función de inicio/cierre de sesión de usuario en tu aplicación utilizando la parse user parse user clase ahora aprenderás cómo usar el inicio de sesión de apple para recuperar datos de usuario de apple e iniciar sesión, registrarte o vincular usuarios existentes con ello también instalarás y configurarás la react native apple authentication react native apple authentication biblioteca para lograr eso el parse user linkwith parse user linkwith método es responsable de registrar e iniciar sesión a los usuarios utilizando cualquier método de autenticación de terceros, siempre que pases los parámetros correctos solicitados por cada proveedor diferente después de vincular los datos del usuario a un nuevo o existente parse user parse user , parse almacenará una sesión de usuario válida en tu dispositivo las futuras llamadas a métodos como currentasync currentasync recuperarán exitosamente tus datos de usuario, al igual que con los inicios de sesión regulares en cualquier momento, puedes acceder al proyecto completo de android construido con este tutorial en nuestros repositorios de github https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java requisitos previos para completar este tutorial, necesitarás una aplicación de react native creada y https //www back4app com/docs/react native/parse sdk/react native sdk completa las guías anteriores para que puedas tener una mejor comprensión de https //www back4app com/docs/react native/parse sdk/working with users/react native login objetivo construir una función de inicio de sesión de usuario utilizando el inicio de sesión de apple en parse para una aplicación de react native 1 instalando dependencias la forma más popular de habilitar el inicio de sesión de apple en react native es usando react native apple authentication react native apple authentication para manejarlo dado que la configuración de esta biblioteca depende de tu entorno de desarrollo, plataforma objetivo y preferencias, configúralo siguiendo la https //github com/invertase/react native apple authentication si estás desarrollando para android, también necesitas instalar la https //github com/auth0/jwt decode biblioteca para decodificar los tokens jwt de apple nota asegúrate de seguir cuidadosamente las instrucciones para la configuración inicial del entorno de xcode, creando tu id de aplicación, claves e id de servicio en el portal de desarrolladores de apple 2 usando apple sign in con parse ahora vamos a crear un nuevo método dentro del userlogin userlogin componente que llama al modal de autenticación de apple sign in la react native apple authentication react native apple authentication lib tiene dos módulos separados para manejar esta llamada según la plataforma del usuario, así que necesitas usar appleauth performrequest appleauth performrequest en ios y appleauthandroid signin appleauthandroid signin en android si el usuario inicia sesión con apple, esta llamada recuperará los datos del usuario de apple y necesitas almacenar el id id , token token , y el correo electrónico de apple para más tarde 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 }; tenga en cuenta que para android necesita decodificar el token de retorno de apple porque la lib react native apple authentication react native apple authentication utiliza la api web de inicio de sesión de apple para la autenticación hay restricciones para el acceso a los datos al usar este método, por lo que una solución común para recuperar su id de usuario y correo electrónico es a través de este proceso de decodificación, como se indica https //docs parseplatform org/parse server/guide/#apple authdata en las guías oficiales de parse después de eso, puedes usar parse user linkwith parse user linkwith en un nuevo parse user parse user objeto para registrar un nuevo usuario e iniciar sesión ten en cuenta que si tu usuario ya se había registrado utilizando esta autenticación de apple, linkwith linkwith lo iniciará sesión utilizando la cuenta existente 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 }; agrega esta función a tu usersignin usersignin componente y asígnala a tu botón de apple onpress onpress adelante, prueba tu nueva función ten en cuenta que el usuario será redirigido a tu pantalla de inicio después de registrarse y/o iniciar sesión con éxito 3 verificando el inicio de sesión del usuario y la creación de sesión para asegurarte de que el inicio de sesión de apple funcionó, puedes mirar en tu panel de parse y ver tu nuevo usuario usuario (si tus datos de autenticación de apple no pertenecían a otro usuario), que contiene los authdata authdata de apple también puedes verificar que se creó una sesión válida en el panel, que contiene un puntero a ese usuario usuario objeto 4 vinculando un usuario existente a apple sign in otro linkwith linkwith uso posible es vincular un usuario existente con otro proveedor de autenticación, en este caso, apple agrega esta función que llama a linkwith linkwith de la misma manera que lo hiciste en userlogin userlogin a tu hellouser hellouser componente o directamente a tu pantalla de inicio la única diferencia aquí es que en lugar de llamar al método desde un parse user parse user vacío, lo usarás desde el objeto del usuario que ha iniciado sesión 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 }; asigne esta función a un botón de apple onpress onpress en su pantalla de inicio pruebe su nueva función, notando que el parse user parse user objeto authdata authdata se actualizará con los nuevos datos del proveedor de autenticación verifique si el usuario se ha actualizado en el panel de control de su servidor parse conclusión al final de esta guía, aprendió cómo iniciar sesión, registrarse o vincular usuarios de parse existentes en react native utilizando el inicio de sesión de apple con react native apple authentication react native apple authentication en la próxima guía, le mostraremos cómo realizar consultas útiles de usuarios