پیاده سازی reCaptcha در react native
Captcha یک کد غیرقابل پیش بینی از ترکیب اعداد، حروف و نماد است که برای جلوگیری از حملات ربات ها و تشخیص انسان بودن کاربران استفاده می شود.Captcha تنها توسط چشم انسان ها قابل خواندن است و فقط انسان ها می توانند به عبارت درست یا جواب درست را تشخیص دهند.کد امنیتی یا همون Captcha از حملات ربات ها، کامنت spam جلوگیری می کند.Captcha علاوه بر وب سایت ها در اپلیکیشن ها نیز استفاده می شود.در این آموزش متنی قصد داریم یاد بگیریم که چجوری reCaptcha رو در react native پیاده سازی کنیم.
1.ایمپورت کامپوننت های StyleSheet, Text, View, TouchableOpacity, TextInput, Image و Alert در فایل App.js.
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Alert } from 'react-native'; |
2.تعریف constructor در کلاس اصلی و ایجاد 4 state به نام های textInput_text_holder, sum_holder, random_number_1 و random_number_2 درون آن.
textInput_text_holder : برای نگه داری کد امنیتی وارد شده توسط کاربر استفاده می شود.
random_number_1 : برای نگه داری عدد random اولی استفاده می شود.
random_number_2 : برای نگهداری عدد random n دومی استفاده می شود.
sum_holder : برای نگه داری جمع دو عدد random استفاده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor() { super() this.state = { textInput_text_holder: , sum_holder: , random_number_1: , random_number_2: , } } |
3.تعریف componentDidMount() method در کلاس اصلی و فراخوانی تابع generate_captcha() که در گام بعدی اون رو تعریف خواهیم کرد.
1 2 3 4 |
componentDidMount() { this.generate_captcha(); } |
4.تعریف یک تابع به نام generate_captcha().در این تابع ما 2 عدد random بین 0 تا 100ایجاد می کنیم.این تابع نقش اصلی در ایجاد captcha را دارد.
1 2 3 4 5 6 7 8 9 10 11 12 |
generate_captcha = () => { var number_1 = Math.floor(Math.random() * 100) + 1; var number_2 = Math.floor(Math.random() * 100) + 1; var sum = number_1 + number_2; this.setState({ random_number_1: number_1, random_number_2: number_2 }); this.setState({ sum_holder: sum }); } |
5.تعریف یک تابع به اسم run_captcha_function(). در این تابع ما بررسی می کنیم که آیا کاربر کد امنیتی را به درستی وارد کرده است یا نه و بر اساس آن پیغام مناسب رو بهش میدیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
run_captcha_function =()=>{ var temp = this.state.random_number_1 + this.state.random_number_2 ; if(this.state.textInput_text_holder == temp) { //Write Your Code Here Which you want to execute on RIGHT Captcha Entered. Alert.alert("Captcha Metched"); } else{ //Write Your Code Here Which you want to execute on WRONG Captcha Entered. Alert.alert("Captcha NOT Matched"); } // Calling captcha function, So each time new captcha number generates on button clicks. this.generate_captcha(); } |
6.ایجاد نمای ظاهری Captcha در بلاک render’s return
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
render() { return ( <View style={styles.MainContainer}> <View style={styles.captcha_view}> <Text style={{ fontSize: 22, textAlign: 'center', color: '#000' }}> {this.state.random_number_1} {"+"} {this.state.random_number_2} {"= "} </Text> <TextInput placeholder="Enter Sum of Numbers Here" onChangeText={data => this.setState({ textInput_text_holder: data })} style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TouchableOpacity onPress={this.generate_captcha} > <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/08/reload_image.jpg' }} style={{ width: 42, height: 42, resizeMode: 'contain', margin: 5 }} /> </TouchableOpacity> </View> <TouchableOpacity style={styles.button} onPress={this.run_captcha_function} > <Text style={styles.text}>Check Captcha Result</Text> </TouchableOpacity> </View> ); } |
7.ایجاد استایل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, captcha_view: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', margin: 10, borderColor: '#000', width: '90%', height: 100, borderWidth: 1, borderRadius: 7, padding: 5, backgroundColor: '#fff' }, textInputStyle: { textAlign: 'center', height: 40, width: 200, borderWidth: 1, borderColor: '#4CAF50', borderRadius: 7, }, button: { width: '80%', paddingTop: 2, paddingBottom: 2, backgroundColor: '#BF360C', borderRadius: 3, marginTop: 20 }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5 } }); |
8.کد کامل برنامه در فایل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Alert } from 'react-native'; export default class App extends Component { constructor() { super() this.state = { textInput_text_holder: , sum_holder: , random_number_1: , random_number_2: , } } componentDidMount() { this.generate_captcha(); } generate_captcha = () => { var number_1 = Math.floor(Math.random() * 100) + 1; var number_2 = Math.floor(Math.random() * 100) + 1; var sum = number_1 + number_2; this.setState({ random_number_1: number_1, random_number_2: number_2 }); this.setState({ sum_holder: sum }); } run_captcha_function =()=>{ var temp = this.state.random_number_1 + this.state.random_number_2 ; if(this.state.textInput_text_holder == temp) { //Write Your Code Here Which you want to execute on RIGHT Captcha Entered. Alert.alert("Captcha Metched"); } else{ //Write Your Code Here Which you want to execute on WRONG Captcha Entered. Alert.alert("Captcha NOT Matched"); } // Calling captcha function, So each time new captcha number generates on button clicks. this.generate_captcha(); } render() { return ( <View style={styles.MainContainer}> <View style={styles.captcha_view}> <Text style={{ fontSize: 22, textAlign: 'center', color: '#000' }}> {this.state.random_number_1} {"+"} {this.state.random_number_2} {"= "} </Text> <TextInput placeholder="Enter Sum of Numbers Here" onChangeText={data => this.setState({ textInput_text_holder: data })} style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TouchableOpacity onPress={this.generate_captcha} > <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/08/reload_image.jpg' }} style={{ width: 42, height: 42, resizeMode: 'contain', margin: 5 }} /> </TouchableOpacity> </View> <TouchableOpacity style={styles.button} onPress={this.run_captcha_function} > <Text style={styles.text}>Check Captcha Result</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, captcha_view: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', margin: 10, borderColor: '#000', width: '90%', height: 100, borderWidth: 1, borderRadius: 7, padding: 5, backgroundColor: '#fff' }, textInputStyle: { textAlign: 'center', height: 40, width: 200, borderWidth: 1, borderColor: '#4CAF50', borderRadius: 7, }, button: { width: '80%', paddingTop: 2, paddingBottom: 2, backgroundColor: '#BF360C', borderRadius: 3, marginTop: 20 }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5 } }); |
اگر می خواهید React Native (ری اکت نیتیو) را به صورت کامل و در قالب پروژه های مختلف یاد بگیرید پیشنهاد می کنیم در دوره آموزش جامع و پروژه محور React native شرکت کنید.
اسکرین شات:
دیدگاهتان را بنویسید