Google Sign-in в React Native с Parse SDK: разработка

вход с google для react native введение в последнем уроке вы добавили функцию входа/выхода пользователя в ваше приложение, используя класс parse user parse user теперь вы узнаете, как использовать вход в google, чтобы получить данные пользователя из google и войти, зарегистрироваться или связать существующих пользователей с ним вы также установите и настроите библиотеку react native google signin react native google signin , чтобы достичь этого метод parse user linkwith parse user linkwith отвечает за регистрацию и вход пользователей, используя любой метод аутентификации третьих сторон, при условии, что вы передаете правильные параметры, запрашиваемые каждым различным провайдером после связывания данных пользователя с новым или существующим parse user parse user , parse сохранит действительную сессию пользователя на вашем устройстве будущие вызовы методов, таких как currentasync currentasync , успешно извлекут данные вашего пользователя, так же как и при обычных входах в любое время вы можете получить доступ к этому проекту через наши репозитории github, чтобы ознакомиться со стилями и полным кодом https //github com/templates back4app/react native js login google https //github com/templates back4app/react native ts login google предварительные требования чтобы завершить этот учебник, вам потребуется приложение 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 цель создание функции входа пользователя с использованием входа через google на parse для приложения react native 1 установка зависимостей самый популярный способ включить вход через google в react native использовать react native google signin react native google signin , чтобы обработать это поскольку конфигурация этой библиотеки зависит от вашей среды разработки, целевой платформы и предпочтений, настройте ее, следуя https //github com/react native google signin/google signin после этого убедитесь, что основной файл вашего приложения ( app js app js или app tsx app tsx ) правильно инициализирует и настраивает googlesignin googlesignin следующим образом app tsx/app js 1 // other imports 2 import {googlesignin} from '@react native community/google signin'; 3&#x9; 4 // parse initialization configuration goes here 5 // 6&#x9; 7 // googlesignin initial configuration 8 // iosclientid is required for ios platform development and 9 // webclientid for android use only what is suitable to you 10 googlesignin configure({ 11 iosclientid 12 'google ios client id', 13 webclientid 14 'google android web client id', 15 }); 16&#x9; 17 // 2 использование google sign in с parse теперь давайте создадим новый метод внутри userlogin userlogin компонента, вызывающего модальное окно аутентификации google sign in с googlesignin signin googlesignin signin если пользователь войдет в систему с помощью google, этот вызов получит данные пользователя из google, и вам нужно будет сохранить id, idtoken и электронную почту google для дальнейшего использования javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 }; после этого вы можете использовать parse user linkwith parse user linkwith на новом parse user parse user объекте, чтобы зарегистрировать нового пользователя и войти в систему обратите внимание, что если ваш пользователь уже зарегистрировался с помощью этой аутентификации google, linkwith linkwith войдет в систему, используя существующую учетную запись javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin parse user = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser parse user = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error object) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 }; добавьте эту функцию в ваш usersignin usersignin компонент и назначьте её вашей кнопке google onpress onpress продолжайте и протестируйте вашу новую функцию обратите внимание, что пользователь будет перенаправлен на ваш главный экран после успешной регистрации и/или входа 3 проверка входа пользователя и создания сессии чтобы убедиться, что вход в систему google сработал, вы можете посмотреть на свою панель управления parse и увидеть своего нового пользователя пользователя (если ваши данные аутентификации google не принадлежали другому пользователю), содержащего параметры authdata authdata google вы также можете проверить, что действительная сессия была создана на панели управления, содержащей указатель на этот пользователь пользователь объект 4 привязка существующего пользователя к входу через google другим linkwith linkwith возможным использованием является связывание существующего пользователя с другим провайдером аутентификации, в данном случае, google добавьте эту функцию, которая вызывает linkwith linkwith так же, как вы сделали в userlogin userlogin в ваш hellouser hellouser компонент или непосредственно на ваш главный экран единственное отличие здесь в том, что вместо вызова метода из пустого parse user parse user , вы будете использовать его из объекта вошедшего в систему пользователя javascript 1 const douserlinkgoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const authdata = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 };1 const douserlinkgoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const authdata object = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error object) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 }; назначьте эту функцию на кнопку google onpress onpress в вашем домашнем экране протестируйте вашу новую функцию, отметив, что значение объекта parse user parse user authdata authdata будет обновлено с новыми данными провайдера аутентификации проверьте, обновил ли пользователь действительно данные на вашей панели управления parse сервером заключение в конце этого руководства вы узнали, как войти в систему, зарегистрироваться или связать существующих пользователей parse в react native, используя вход с помощью google с react native google signin react native google signin в следующем руководстве мы покажем вам, как выполнять полезные запросы пользователей