رمزگذاری و رمزگشایی password در react native
Password (رمز عبور) یک سری کاراکتر و symbols محرمانه هستند که برای دستیابی به یک بخش یا مکان خاص مورد استفاده قرار میگیرند.معمولا قبل استفاده از تکنیک encryption (رمزگذاری) رمز عبور به همان فرم تایپ شده، ذخیره می شود که به راحتی با چشم انسان قابل خواندن است که برای کاربران امن نیست.امروزه password توسط روش های متفاوتی رمز گذاری می شوند که توسط چشم انسان قابل خواندن است اما برای ورود کاربردی ندارند زیرا تبدیل به یک سری عباراتی شده است که رمز عبور اصلی نیست.یکی از مشهورترین روش های رمزگذاری رمزعبور Base64 encryption است که توسط صدها وب سایت و اپلیکیشن های موبایل برای نگهداری password استفاده می شود.در این آموزش متنی قصد داریم یاد بگیریم که چجوری با استفاده از Base64 رمز عبور رو در react native رمزگذاری و رمزگشایی کنیم.
1.قبل از اینکه شروع به کدنویسی کنیم باید کتابخانه js-base64 را نصب کنیم.این کتابخانه 4.6 میلیون دانلود در هفته داره که نشون میده بین برنامه نویسان طرفدار زیادی داره.بنابراین دایرکتوری پروژه رو در command prompt یا Terminal باز کنید و دستور زیر رو برای نصب کتابخانه js-base64 اجرا کنید.کتابخانه base64 با کدهای pure جاوا اسکریپت نوشته شده است بنابراین نیازی به link شدن بعد از نصب ندارد.
|
1 |
npm install --save js-base64 |
2.فایل App.js رو باز کنید و کامپوننت های StyleSheet, Text, View, TouchableOpacity و TextInput رو ایمپورت کنید.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native'; |
3.کامپوننت Base64 رو از کتابخانه js-base64 ایمپورت کنید
|
1 |
import { Base64 } from 'js-base64'; |
4.در کلاس اصلی constructor() رو تعریف کنید و دو state به نام های Password_Holder و update_data تعریف کنید.
Password_Holder : برای ذخیره کردن رمز عبور وارد شده در کامپوننت TextInput استفاده می شود.
update_data : برای نگه داری رمز عبور بعد از رمزگذاری شدن استفاده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor() { super() this.state = { Password_Holder: '', update_data: '', } } |
5. تعریف یک تابع به نام encrypt_password().در این تابع ما از کامپوننت Base64 برای رمز گذاری password وارد شده استفاده می کنیم و بعد از تبدیل اون رو درون state ذخیره می کنیم.
|
1 2 3 4 5 6 |
encrypt_password = () => { var temp = Base64.encode(this.state.Password_Holder); this.setState({ update_data: temp }); } |
6.تعریف یک تابع به نام decrypt_password().درون این تابع ما مجددا از کامپوننت Base64 استفاده می کنیم اما این مرتبه password رمزگذاری شده رو رمزگشایی می کنیم.
|
1 2 3 4 5 6 |
decrypt_password = () => { var temp2 = Base64.decode(this.state.update_data); this.setState({ update_data: temp2 }); } |
7.اضافه کردن یک TextInput و دو تا Buttons و یک Text در بلاک 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 |
render() { return ( <View style={styles.MainContainer}> <TextInput placeholder="Enter Password Here" onChangeText={data => this.setState({ Password_Holder: data })} style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TouchableOpacity style={styles.button} onPress={this.encrypt_password} > <Text style={styles.text}>Click Here to Encode Password</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={this.decrypt_password} > <Text style={styles.text}>Click Here to Decode Password</Text> </TouchableOpacity> <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}> {this.state.update_data} </Text> </View> ); } |
8.ایجاد استایل سفارشی.
|
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 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { width: '80%', paddingTop: 2, paddingBottom: 2, backgroundColor: '#01579B', borderRadius: 3, marginTop: 20 }, textInputStyle: { textAlign: 'center', height: 42, width: '80%', borderWidth: 1, borderColor: '#4CAF50', borderRadius: 7, }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5 } }); |
9.کد کامل برنامه در فایل 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 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native'; import { Base64 } from 'js-base64'; export default class App extends Component { constructor() { super() this.state = { Password_Holder: '', update_data: '', } } encrypt_password = () => { var temp = Base64.encode(this.state.Password_Holder); this.setState({ update_data: temp }); } decrypt_password = () => { var temp2 = Base64.decode(this.state.update_data); this.setState({ update_data: temp2 }); } render() { return ( <View style={styles.MainContainer}> <TextInput placeholder="Enter Password Here" onChangeText={data => this.setState({ Password_Holder: data })} style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TouchableOpacity style={styles.button} onPress={this.encrypt_password} > <Text style={styles.text}>Click Here to Encode Password</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={this.decrypt_password} > <Text style={styles.text}>Click Here to Decode Password</Text> </TouchableOpacity> <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}> {this.state.update_data} </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { width: '80%', paddingTop: 2, paddingBottom: 2, backgroundColor: '#01579B', borderRadius: 3, marginTop: 20 }, textInputStyle: { textAlign: 'center', height: 42, width: '80%', borderWidth: 1, borderColor: '#4CAF50', borderRadius: 7, }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5 } }); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید