React Native OTP-Authentifizierung mit Parse Cloud Code

otp authentifizierung für react native mit cloud funktionen einführung in diesem leitfaden lernen sie, wie sie eine parse cloud code funktion verwenden, um die twilio verify api in einer react native app zu integrieren, um eine otp login funktion zu aktivieren cloud code funktionen sind der perfekte ort für diese art von operationen, da sie es ihnen ermöglichen, sensible daten zu verarbeiten und andere apis außerhalb ihrer anwendung zu verwenden in diesem leitfaden werden sie auch überprüfen, wie sie eine react native komponente mit der otp integration implementieren, um unser vorheriges beispiel zur benutzer e mail verifizierung zu verbessern jederzeit können sie auf das vollständige android projekt zugreifen, das mit diesem tutorial in unseren github repositories erstellt wurde kotlin beispiel repository java beispiel repository voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react native app, die erstellt und mit back4app verbunden ist verstehen, wie man eine cloud funktion bereitstellt auf back4app ein aktives konto bei twilio, sie können hier ein kostenloses testkonto erstellen hier ein aktives konto bei sendgrid, sie können hier ein kostenloses testkonto erstellen hier ziel integrieren sie die twilio verify api mithilfe von parse cloud code funktionen auf back4app und verwenden sie sie in einer react native app 1 einrichtung von twilio verify twilio ist ein bekannter anbieter von 2fa token und otp diensten, der heutzutage von einer vielzahl von unternehmen genutzt wird die verify api ist ein vereinfachtes api set, das entwicklern hilft, telefone, e mails zu verifizieren und passwortlose anmeldungen ohne probleme durchzuführen in diesem leitfaden werden sie die sms und e mail verifizierungsmethoden verwenden, um ihrer anwendung eine otp funktion zu ermöglichen wir werden die offiziellen verify dokumente https //www twilio com/docs/verify/api , also beziehen sie sich darauf, falls ihnen ein schritt unklar ist nachdem sie ihre twilio und sendgrid konten erstellt haben (sendgrid wird benötigt, um automatisierte e mails mit ihren benutzertokens zu senden), notieren sie sich die folgenden identifikatoren, die aus dem dashboard jedes dienstes abgerufen werden können twilios konto sid und auth token; sendgrid id und eine einfache e mail vorlagen id jetzt erstellen sie einen neuen verify dienst in twilio verify dashboard https //www twilio com/console/verify/dashboard , der eine reihe von konfigurationen ist, die unsere otp anfragen und überprüfungen verwalten stellen sie sicher, dass sie hier ihre dienst sid notieren wenn sie möchten, können sie auch das senden von e mail codes aktivieren, indem sie ihre sendgrid schlüssel hinzufügen, indem sie eine neue e mail integration innerhalb des verify dienstes erstellen dashboard https //www twilio com/docs/verify/email das ist alles, die gesamte einrichtung ist abgeschlossen und wir können nun fortfahren, unsere cloud code funktionen zu erstellen 2 integration über cloud code funktionen wie bereits besprochen, ermöglicht die verwendung von cloud code funktionen in ihrer anwendung eine große flexibilität in ihrem code, wodurch es möglich wird, wiederverwendbare methoden von ihrer app zu trennen und ihr verhalten besser zu steuern sie können überprüfen oder nachlesen, wie sie sie in unserem cloud funktionen startleitfaden https //www back4app com/docs/get started/cloud functions lass uns unsere erste cloud funktion namens requestotp requestotp , erstellen, in der ein otp erstellt und dem benutzer über die gewählte methode gesendet wird die funktion muss zwei parameter empfangen, userdata userdata mit einer e mail adresse oder telefonnummer und verificationtype verificationtype , die angibt, welche verifizierungsmethode verwendet werden soll, e mail e mail oder sms sms hier ist der funktionscode 1 // define twilio keys and require the library helper 2 const accountsid = 'your twilio account sid here'; 3 const authtoken = 'your twilio auth token here'; 4 const client = require('twilio')(accountsid, authtoken); 5&#x9; 6 // request otp 7 parse cloud define('requestotp', async (request) => { 8 const userdata = request params userdata; 9 const verificationtype = request params verificationtype; 10 let verification request = await client verify 11 services('your twilio verify service id here') 12 verifications create({ to userdata, channel verificationtype }); 13 return { status verification request status, error '' }; 14 }); beachte, dass wir oben unsere twilio api schlüssel definiert und auch die hilfsbibliothek importiert haben die implementierung von back4app’s parse server gibt uns standardmäßig zugriff auf die twilio bibliothek, sodass du sie nicht auf deinem server installieren musst die zweite und letzte cloud funktion heißt verifyotp verifyotp , sie überprüft dein benutzer token in twilios verify und meldet ihn automatisch an, erstellt eine sitzung und gibt deren id an deine anwendung zurück, sodass du dich von dort ohne passwort anmelden kannst es gibt vier erforderliche parameter, wobei die ersten beiden die gleichen sind wie in der vorherigen funktion, mit der ergänzung von usertoken usertoken , das das angegebene verifizierungstoken enthält, und auch userinstallationid userinstallationid , das später erklärt wird 1 // since we need in uuid v4 id for creating a new session, this function 2 // mocks the creation of one without the need to import the `uuidv4` module 3 // for a more robust solution, consider using the uuid module, which uses 4 // higher quality rng apis 5 // adapted from https //stackoverflow\ com/a/2117523 6 function uuidv4() { 7 return 'xxxxxxxx xxxx 4xxx yxxx xxxxxxxxxxxx' replace(/\[xy]/g, function (c) { 8 var r = (math random() 16) | 0, 9 v = c == 'x' ? r (r & 0x3) | 0x8; 10 return v tostring(16); 11 }); 12 } 13&#x9; 14 // verify otp 15 parse cloud define('verifyotp', async (request) => { 16 const { userdata, verificationtype, usertoken, userinstallationid } = 17 request params; 18 let verification check = await client verify 19 services('your twilio verify service id here') 20 verificationchecks create({ to userdata, code usertoken }); 21 // status can be 'approved' if correct or 'pending' if incorrect 22 if (verification check status === 'approved') { 23 try { 24 // get user to login 25 let user = null; 26 if (verificationtype === 'sms') { 27 user = await new parse query(parse user) 28 equalto('phonenumber', userdata) 29 first({ usemasterkey true }); 30 } else { 31 user = await new parse query(parse user) 32 equalto('email', userdata) 33 first({ usemasterkey true }); 34 } 35 // create new session for login use in 36 // manually create session (without using parse session because of it's update restrictions) 37 // adapted from https //stackoverflow\ com/a/67432715 38 let session = new parse object(' session', { 39 user user, 40 installationid userinstallationid, 41 sessiontoken `r ${uuidv4()}`, 42 }); 43 session = await session save(undefined, { usemasterkey true }); 44 return { sessionid session get('sessiontoken') }; 45 } catch (error) { 46 console log(error); 47 return { error `${error}` }; 48 } 49 } 50 return { error 'could not validate your token or account! try again!' }; 51 }); stellen sie sicher, dass sie diese funktionen in ihrem parse server bereitstellen, bevor sie zum nächsten schritt übergehen 3 erstellung einer otp funktion in react native lass uns nun dasselbe projektbeispiel aus der benutzer e mail verifizierung verwenden leitfaden https //www back4app com/docs/react native/parse sdk/working with users/react native email verification als grundlage und einige änderungen vornehmen, um die neue otp funktion zu aktivieren wir empfehlen, das projektbeispiel herunterzuladen und es einzurichten, bevor sie mit dem leitfaden fortfahren zuerst, um benutzern zu ermöglichen, sich mit ihrer telefonnummer anzumelden, fügen sie ein neues eingabefeld hinzu und fügen sie den wert zur methode zum speichern der benutzerregistrierung in der userregistration js userregistration js (oder userregistration tsx userregistration tsx ) datei hinzu javascript 1 import react, {usestate} from 'react'; 2 import { 3 alert, 4 image, 5 text, 6 textinput, 7 touchableopacity, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import {usenavigation} from '@react navigation/native'; 12 import {stackactions} from '@react navigation/native'; 13 import styles from ' /styles'; 14&#x9; 15 export const userregistration = () => { 16 const navigation = usenavigation(); 17&#x9; 18 const \[username, setusername] = usestate(''); 19 const \[password, setpassword] = usestate(''); 20 const \[email, setemail] = usestate(''); 21 const \[phonenumber, setphonenumber] = usestate(''); 22&#x9; 23 const dousersignup = async function () { 24 // note that this values come from state variables that we've declared before 25 const usernamevalue = username; 26 const passwordvalue = password; 27 const emailvalue = email; 28 const phonenumbervalue = phonenumber; 29 try { 30 // since the signup method returns a promise, we need to call it using await 31 // note that now you are setting the user email value as well 32 let createduser = await parse user signup(usernamevalue, passwordvalue, { 33 email emailvalue, 34 phonenumber phonenumbervalue, 35 }); 36&#x9; 37 // parse user signup returns the already created parseuser object if successful 38 alert alert( 39 'success!', 40 `user ${createduser get( 41 'username', 42 )} was successfully created! verify your email to login`, 43 ); 44 // since email verification is now required, make sure to log out 45 // the new user, so any session created is cleared and the user can 46 // safely log in again after verifying 47 await parse user logout(); 48 // go back to the login page 49 navigation dispatch(stackactions poptotop()); 50 return true; 51 } catch (error) { 52 // signup can fail if any parameter is blank or failed an uniqueness check on the server 53 alert alert('error!', error message); 54 return false; 55 } 56 }; 57&#x9; 58 return ( 59 \<view style={styles login wrapper}> 60 \<view style={styles form}> 61 \<textinput 62 style={styles form input} 63 value={username} 64 placeholder={'username'} 65 onchangetext={(text) => setusername(text)} 66 autocapitalize={'none'} 67 keyboardtype={'email address'} 68 /> 69 \<textinput 70 style={styles form input} 71 value={email} 72 placeholder={'email'} 73 onchangetext={(text) => setemail(text)} 74 autocapitalize={'none'} 75 keyboardtype={'email address'} 76 /> 77 \<textinput 78 style={styles form input} 79 value={phonenumber} 80 placeholder={'phone (international format +15017122661)'} 81 onchangetext={(text) => setphonenumber(text)} 82 autocapitalize={'none'} 83 keyboardtype={'phone pad'} 84 /> 85 \<textinput 86 style={styles form input} 87 value={password} 88 placeholder={'password'} 89 securetextentry 90 onchangetext={(text) => setpassword(text)} 91 /> 92 \<touchableopacity onpress={() => dousersignup()}> 93 \<view style={styles button}> 94 \<text style={styles button label}>{'sign up'}\</text> 95 \</view> 96 \</touchableopacity> 97 \</view> 98 \<view style={styles login social}> 99 \<view style={styles login social separator}> 100 \<view style={styles login social separator line} /> 101 \<text style={styles login social separator text}>{'or'}\</text> 102 \<view style={styles login social separator line} /> 103 \</view> 104 \<view style={styles login social buttons}> 105 \<touchableopacity> 106 \<view 107 style={\[ 108 styles login social button, 109 styles login social facebook, 110 ]}> 111 \<image 112 style={styles login social icon} 113 source={require(' /assets/icon facebook png')} 114 /> 115 \</view> 116 \</touchableopacity> 117 \<touchableopacity> 118 \<view style={styles login social button}> 119 \<image 120 style={styles login social icon} 121 source={require(' /assets/icon google png')} 122 /> 123 \</view> 124 \</touchableopacity> 125 \<touchableopacity> 126 \<view style={styles login social button}> 127 \<image 128 style={styles login social icon} 129 source={require(' /assets/icon apple png')} 130 /> 131 \</view> 132 \</touchableopacity> 133 \</view> 134 \</view> 135 <> 136 \<touchableopacity onpress={() => navigation navigate('login')}> 137 \<text style={styles login footer text}> 138 {'already have an account? '} 139 \<text style={styles login footer link}>{'log in'}\</text> 140 \</text> 141 \</touchableopacity> 142 \</> 143 \</view> 144 ); 145 };1 import react, {fc, reactelement, usestate} from 'react'; 2 import { 3 alert, 4 image, 5 text, 6 textinput, 7 touchableopacity, 8 view, 9 } from 'react native'; 10 import parse from 'parse/react native'; 11 import {usenavigation} from '@react navigation/native'; 12 import {stackactions} from '@react navigation/native'; 13 import styles from ' /styles'; 14&#x9; 15 export const userregistration fc<{}> = ({}) reactelement => { 16 const navigation = usenavigation(); 17&#x9; 18 const \[username, setusername] = usestate(''); 19 const \[password, setpassword] = usestate(''); 20 const \[email, setemail] = usestate(''); 21 const \[phonenumber, setphonenumber] = usestate(''); 22&#x9; 23 const dousersignup = async function () promise\<boolean> { 24 // note that this values come from state variables that we've declared before 25 const usernamevalue string = username; 26 const passwordvalue string = password; 27 const emailvalue string = email; 28 const phonenumbervalue string = phonenumber; 29 try { 30 // since the signup method returns a promise, we need to call it using await 31 // note that now you are setting the user email value as well 32 let createduser = await parse user signup(usernamevalue, passwordvalue, { 33 email emailvalue, 34 phonenumber phonenumbervalue, 35 }); 36&#x9; 37 // parse user signup returns the already created parseuser object if successful 38 alert alert( 39 'success!', 40 `user ${createduser get( 41 'username', 42 )} was successfully created! verify your email to login`, 43 ); 44 // since email verification is now required, make sure to log out 45 // the new user, so any session created is cleared and the user can 46 // safely log in again after verifying 47 await parse user logout(); 48 // go back to the login page 49 navigation dispatch(stackactions poptotop()); 50 return true; 51 } catch (error object) { 52 // signup can fail if any parameter is blank or failed an uniqueness check on the server 53 alert alert('error!', error message); 54 return false; 55 } 56 }; 57&#x9; 58 return ( 59 \<view style={styles login wrapper}> 60 \<view style={styles form}> 61 \<textinput 62 style={styles form input} 63 value={username} 64 placeholder={'username'} 65 onchangetext={(text) => setusername(text)} 66 autocapitalize={'none'} 67 keyboardtype={'email address'} 68 /> 69 \<textinput 70 style={styles form input} 71 value={email} 72 placeholder={'email'} 73 onchangetext={(text) => setemail(text)} 74 autocapitalize={'none'} 75 keyboardtype={'email address'} 76 /> 77 \<textinput 78 style={styles form input} 79 value={phonenumber} 80 placeholder={'phone (international format +15017122661)'} 81 onchangetext={(text) => setphonenumber(text)} 82 autocapitalize={'none'} 83 keyboardtype={'phone pad'} 84 /> 85 \<textinput 86 style={styles form input} 87 value={password} 88 placeholder={'password'} 89 securetextentry 90 onchangetext={(text) => setpassword(text)} 91 /> 92 \<touchableopacity onpress={() => dousersignup()}> 93 \<view style={styles button}> 94 \<text style={styles button label}>{'sign up'}\</text> 95 \</view> 96 \</touchableopacity> 97 \</view> 98 \<view style={styles login social}> 99 \<view style={styles login social separator}> 100 \<view style={styles login social separator line} /> 101 \<text style={styles login social separator text}>{'or'}\</text> 102 \<view style={styles login social separator line} /> 103 \</view> 104 \<view style={styles login social buttons}> 105 \<touchableopacity> 106 \<view 107 style={\[ 108 styles login social button, 109 styles login social facebook, 110 ]}> 111 \<image 112 style={styles login social icon} 113 source={require(' /assets/icon facebook png')} 114 /> 115 \</view> 116 \</touchableopacity> 117 \<touchableopacity> 118 \<view style={styles login social button}> 119 \<image 120 style={styles login social icon} 121 source={require(' /assets/icon google png')} 122 /> 123 \</view> 124 \</touchableopacity> 125 \<touchableopacity> 126 \<view style={styles login social button}> 127 \<image 128 style={styles login social icon} 129 source={require(' /assets/icon apple png')} 130 /> 131 \</view> 132 \</touchableopacity> 133 \</view> 134 \</view> 135 <> 136 \<touchableopacity onpress={() => navigation navigate('login')}> 137 \<text style={styles login footer text}> 138 {'already have an account? '} 139 \<text style={styles login footer link}>{'log in'}\</text> 140 \</text> 141 \</touchableopacity> 142 \</> 143 \</view> 144 ); 145 }; lass uns jetzt eine neue datei erstellen, die den neuen userotp userotp bildschirm enthält, der alle otp prozesse verwaltet der bildschirm wird zwei eingabefelder haben, wobei das erste für den benutzer gedacht ist, um die mittel zur erhalt des otp anzugeben (e mail adresse oder telefonnummer) das andere eingabefeld, das vor dem absenden der otp anfrage verborgen ist, wird das vom benutzer erhaltene token enthalten hier ist der vollständige userotp js userotp js (oder userotp tsx userotp tsx ) code javascript 1 import react, {usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6&#x9; 7 export const userotp = () => { 8 const navigation = usenavigation(); 9&#x9; 10 const \[userdata, setuserdata] = usestate(''); 11 const \[usertoken, setusertoken] = usestate(''); 12 const \[tokenrequested, settokenrequested] = usestate(false); 13&#x9; 14 const requestotp = async function () { 15 // note that this values come from state variables that we've declared before 16 const userdatavalue = userdata; 17 // check if value is an email if it contains @ note that in a real 18 // app you need a much better validator for this field 19 const verificationtype = 20 userdatavalue includes('@') === true ? 'email' 'sms'; 21 // we need to call it using await 22 try { 23 await parse cloud run('requestotp', { 24 userdata userdatavalue, 25 verificationtype verificationtype, 26 }); 27 // show token input field 28 settokenrequested(true); 29 alert alert('success!', `token requested via ${verificationtype}!`); 30 return true; 31 } catch (error) { 32 alert alert('error!', error message); 33 return false; 34 } 35 }; 36&#x9; 37 const verifyotp = async function () { 38 // note that this values come from state variables that we've declared before 39 const userdatavalue = userdata; 40 const usertokenvalue = usertoken; 41 // check if value is an email if it contains @ note that in a real 42 // app you need a much better validator for this field 43 const verificationtype = 44 userdatavalue includes('@') === true ? 'email' 'sms'; 45 // we need the installation id to allow cloud code to create 46 // a new session and login user without password 47 const parseinstallationid = await parse getinstallationid(); 48 // we need to call it using await 49 try { 50 // verify otp, if successful, returns a sessionid 51 let response = await parse cloud run('verifyotp', { 52 userdata userdatavalue, 53 verificationtype verificationtype, 54 usertoken usertokenvalue, 55 parseinstallationid parseinstallationid, 56 }); 57 if (response sessionid !== undefined) { 58 // use generated sessionid to become a user, 59 // logging in without needing to inform password and username 60 await parse user become(response sessionid); 61 const loggedinuser= await parse user currentasync(); 62 alert alert( 63 'success!', 64 `user ${loggedinuser get('username')} has successfully signed in!`, 65 ); 66 // navigation navigate takes the user to the home screen 67 navigation navigate('home'); 68 return true; 69 } else { 70 throw response; 71 } 72 } catch (error) { 73 alert alert('error!', error message); 74 return false; 75 } 76 }; 77&#x9; 78 return ( 79 \<view style={styles login wrapper}> 80 {tokenrequested === false ? ( 81 \<view style={styles form}> 82 \<textinput 83 style={styles form input} 84 value={userdata} 85 placeholder={'email or mobile phone number'} 86 onchangetext={(text) => setuserdata(text)} 87 autocapitalize={'none'} 88 keyboardtype={'email address'} 89 /> 90 \<touchableopacity onpress={() => requestotp()}> 91 \<view style={styles button}> 92 \<text style={styles button label}>{'request otp'}\</text> 93 \</view> 94 \</touchableopacity> 95 \</view> 96 ) ( 97 \<view style={styles form}> 98 \<text>{'inform the received token to proceed'}\</text> 99 \<textinput 100 style={styles form input} 101 value={usertoken} 102 placeholder={'token (6 digits)'} 103 onchangetext={(text) => setusertoken(text)} 104 autocapitalize={'none'} 105 keyboardtype={'default'} 106 /> 107 \<touchableopacity onpress={() => verifyotp()}> 108 \<view style={styles button}> 109 \<text style={styles button label}>{'verify'}\</text> 110 \</view> 111 \</touchableopacity> 112 \<touchableopacity onpress={() => requestotp()}> 113 \<view style={styles button}> 114 \<text style={styles button label}>{'resend token'}\</text> 115 \</view> 116 \</touchableopacity> 117 \</view> 118 )} 119 \</view> 120 ); 121 };1 import react, {fc, reactelement, usestate} from 'react'; 2 import {alert, text, textinput, touchableopacity, view} from 'react native'; 3 import parse from 'parse/react native'; 4 import {usenavigation} from '@react navigation/native'; 5 import styles from ' /styles'; 6&#x9; 7 export const userotp fc<{}> = ({}) reactelement => { 8 const navigation = usenavigation(); 9&#x9; 10 const \[userdata, setuserdata] = usestate(''); 11 const \[usertoken, setusertoken] = usestate(''); 12 const \[tokenrequested, settokenrequested] = usestate(false); 13&#x9; 14 const requestotp = async function () promise\<boolean> { 15 // note that this values come from state variables that we've declared before 16 const userdatavalue string = userdata; 17 // check if value is an email if it contains @ note that in a real 18 // app you need a much better validator for this field 19 const verificationtype string = 20 userdatavalue includes('@') === true ? 'email' 'sms'; 21 // we need to call it using await 22 try { 23 await parse cloud run('requestotp', { 24 userdata userdatavalue, 25 verificationtype verificationtype, 26 }); 27 // show token input field 28 settokenrequested(true); 29 alert alert('success!', `token requested via ${verificationtype}!`); 30 return true; 31 } catch (error) { 32 alert alert('error!', error message); 33 return false; 34 } 35 }; 36&#x9; 37 const verifyotp = async function () promise\<boolean> { 38 // note that this values come from state variables that we've declared before 39 const userdatavalue string = userdata; 40 const usertokenvalue string = usertoken; 41 // check if value is an email if it contains @ note that in a real 42 // app you need a much better validator for this field 43 const verificationtype string = 44 userdatavalue includes('@') === true ? 'email' 'sms'; 45 // we need the installation id to allow cloud code to create 46 // a new session and login user without password; this is obtained 47 // using a static method from parse 48 const parseinstallationid string = await parse getinstallationid(); 49 // we need to call it using await 50 try { 51 // verify otp, if successful, returns a sessionid 52 let response object = await parse cloud run('verifyotp', { 53 userdata userdatavalue, 54 verificationtype verificationtype, 55 usertoken usertokenvalue, 56 parseinstallationid parseinstallationid, 57 }); 58 if (response sessionid !== undefined) { 59 // use generated sessionid to become a user, 60 // logging in without needing to inform password and username 61 await parse user become(response sessionid); 62 const loggedinuser parse user = await parse user currentasync(); 63 alert alert( 64 'success!', 65 `user ${loggedinuser get('username')} has successfully signed in!`, 66 ); 67 // navigation navigate takes the user to the home screen 68 navigation navigate('home'); 69 return true; 70 } else { 71 throw response; 72 } 73 } catch (error) { 74 alert alert('error!', error message); 75 return false; 76 } 77 }; 78&#x9; 79 return ( 80 \<view style={styles login wrapper}> 81 {tokenrequested === false ? ( 82 \<view style={styles form}> 83 \<textinput 84 style={styles form input} 85 value={userdata} 86 placeholder={'email or mobile phone number'} 87 onchangetext={(text) => setuserdata(text)} 88 autocapitalize={'none'} 89 keyboardtype={'email address'} 90 /> 91 \<touchableopacity onpress={() => requestotp()}> 92 \<view style={styles button}> 93 \<text style={styles button label}>{'request otp'}\</text> 94 \</view> 95 \</touchableopacity> 96 \</view> 97 ) ( 98 \<view style={styles form}> 99 \<text>{'inform the received token to proceed'}\</text> 100 \<textinput 101 style={styles form input} 102 value={usertoken} 103 placeholder={'token (6 digits)'} 104 onchangetext={(text) => setusertoken(text)} 105 autocapitalize={'none'} 106 keyboardtype={'default'} 107 /> 108 \<touchableopacity onpress={() => verifyotp()}> 109 \<view style={styles button}> 110 \<text style={styles button label}>{'verify'}\</text> 111 \</view> 112 \</touchableopacity> 113 \<touchableopacity onpress={() => requestotp()}> 114 \<view style={styles button}> 115 \<text style={styles button label}>{'resend token'}\</text> 116 \</view> 117 \</touchableopacity> 118 \</view> 119 )} 120 \</view> 121 ); 122 }; werfen sie einen genaueren blick auf die requestotp requestotp und verifyotp verifyotp funktionen, die dafür verantwortlich sind, die jeweiligen cloud code funktionen aufzurufen und deren antwort zu validieren weitere details dazu, wie sie funktionieren, können in den code kommentaren eingesehen werden nachdem sie den neuen bildschirm erstellt haben, importieren und deklarieren sie ihn in ihrer app js app js (oder app tsx app tsx ) danach fügen sie einen neuen button in ihre userlogin js userlogin js (oder userlogin tsx userlogin tsx ) datei ein, damit ihr benutzer zum otp bildschirm navigieren kann 4 testen der neuen otp funktion lass uns jetzt unsere änderungen an der app testen zuerst registriere einen neuen benutzer mit einer gültigen e mail adresse und telefonnummer stelle sicher, dass du das internationale notationsformat (e 164) für die telefonnummer verwendest (z b +14155552671) navigiere jetzt vom anmeldebildschirm zum otp bildschirm und gib dieselbe e mail adresse oder telefonnummer wie zuvor ein klicke auf die anforderungs schaltfläche und du solltest eine nachricht wie diese erhalten, die die aktive eingabe auf deinem bildschirm ändert wenn du eine e mail adresse angegeben hast, solltest du eine e mail mit dem otp token erhalten; wenn eine telefonnummer angegeben wurde, erhältst du eine sms nachricht auf deinem mobiltelefon die e mail sollte eine nachricht wie diese enthalten, abhängig davon, wie du die sendgrid vorlage eingerichtet hast gib den otp token ein und klicke auf überprüfen wenn alles gut gelaufen ist, solltest du jetzt auf dem startbildschirm mit der folgenden nachricht sein fazit am ende dieses leitfadens hast du gelernt, wie man parse cloud code funktionen verwendet, um drittanbieter dienste in deiner react native anwendung zu integrieren im nächsten leitfaden wirst du lernen, wie man mit benutzern in parse arbeitet