Captcha is a type of unpredictable challenge text code written in alphanumeric characters used to make difference between Virus(SPAM) and real humans. Captcha can only be readable by human eyes and only humans can answer the right captcha. It’ll stop spam attacks on Log-In, Sing-Up and Comment pages in web applications. Right now the Captcha is also used in mobile applications to make them secure against SPAM bots. So in this tutorial we would Implement Custom reCaptcha in Android iOS React Native Application Example Tutorial.
Contents in this project Implement Custom reCaptcha in React Native Android iOS App Example Tutorial:
1. Import StyleSheet, Text, View, TouchableOpacity, TextInput, Image and Alert components in your project’s App.js file.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Alert } from ‘react-native’;
|
2. Create constructor() function in your app’s main export default class and inside the constructor() we would make 4 States named as textInput_text_holder, sum_holder, random_number_1 and random_number_2.
- textInput_text_holder : Holds the Text Input entered text.
- random_number_1 : Holds the generated random number 1.
- random_number_2 : Holds the generated random number 2.
- sum_holder : Holds the Sum total of both 2 random numbers.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
constructor() {
super()
this.state = {
textInput_text_holder: 0,
sum_holder: 0,
random_number_1: 0,
random_number_2: 0,
}
}
|
3. Create inbuilt componentDidMount() method in your main class and call the generate_captcha() function which we would create in next step.
|
1
2
3
4
|
componentDidMount() {
this.generate_captcha();
}
|
4. Create a function named as generate_captcha(). Inside this function we would generate 2 random numbers between 1 to 100. This function is our main function which generates 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. Create a function named as run_captcha_function(). Inside this function we would match the user entered captcha with auto generated captcha text. In this function you can put your own code which you want to execute on right captcha entered.
|
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. Creating the Captcha view in render’s return block.
|
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: ‘/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. Creating style.
|
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. Complete source code for App.js File :
|
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: 0,
sum_holder: 0,
random_number_1: 0,
random_number_2: 0,
}
}
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: ‘/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
}
});
|
Screenshots:
