Вопрос или проблема
Может кто-нибудь помочь мне войти и зарегистрироваться в приложении reactnative
У меня есть сайт на WordPress, и я хочу связать свой сайт WordPress с приложением reactnative.
Я искал много решений, но никто не помог мне. Я использую плагин jwt auth, но не знаю, как интегрировать его в reactapp.?
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Alert,
Text,
StatusBar,
Image,
TextInput,
TouchableOpacity,
ImageBackground,
ActivityIndicator,
FlatList,
Button,
Linking
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);
const userInfo = {username:'demo',password:'demo'};
class HomeScreen extends React.Component {
static navigationOptions = {
header: null
};
constructor( props ) {
super( props );
this.state = {
username:'',
password:''
}
}
_onPressButton() {
Alert.alert('Вход','Социальный вход');
}
_signin = async()=> {
await AsyncStorage.setItem('logged', '1');
if( userInfo.username===this.state.username && userInfo.password===this.state.password) {
this.props.navigation.navigate('Dashboard');
}
else {
alert('Неверное имя пользователя / пароль');
}
}
_retrieveData = async () => {
const logged = await AsyncStorage.getItem('logged');
this.props.navigation.navigate( logged !== '1' ? 'Auth' : 'App' );
}
render() {
const {navigate} = this.props.navigation;
return (
<>
<StatusBar backgroundColor="#22a86d" barStyle="light-content" />
<ImageBackground source={require('./images/login_background.png')} style={styles.MainContainer}>
<View style={styles.body}>
<Image
style={{width:230, height: 80,marginBottom:30,resizeMode: 'contain'}}
source={require('./images/logo.png')}
/>
<TextInput
style={styles.input}
placeholder="Имя пользователя"
placeholderTextColor="#fff"
value={this.state.username}
onChangeText={(username)=>this.setState({username})}
/>
<TextInput
style={styles.input}
placeholder="Пароль"
placeholderTextColor="#fff"
value={this.state.password}
onChangeText={(password)=>this.setState({password})}
secureTextEntry={true}
/>
<Text style={styles.forgot}>Забыли пароль?</Text>
<TouchableOpacity style={styles.userBtn} activeOpacity={0.9}
onPress={this._signin}>
<Text style={styles.btnTxt}>Войти</Text>
</TouchableOpacity>
<Text style={styles.account}>Нет учетной записи?
<Text style={styles.bold} onPress={() => navigate('Profile')}> Создать учетную запись</Text>
</Text>
<Text style={styles.signUp}>Зарегистрироваться с</Text>
<View style={{flexDirection: 'row',marginTop:20}}>
<TouchableOpacity activeOpacity={0.9}
onPress={this._onPressButton}>
<Image
style={{width:70, height: 60, resizeMode: 'contain'}}
source={require('./images/fb.png')}
/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.9}
onPress={this._onPressButton}>
<Image
style={{width:70, height: 60,resizeMode: 'contain'}}
source={require('./images/twitter.png')}
/>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.9}
onPress={this._onPressButton}>
<Image
style={{width:70, height: 60,resizeMode: 'contain'}}
source={require('./images/google.png')}
/>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</>
);
};
}
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
Dashboard: {screen: DashboardScreen},
CampaignList: {screen: CampaignScreen},
DonorList: {screen:DonorScreen},
});
const App = createAppContainer(MainNavigator);
export default App;
Пожалуйста, используйте Axios для отправки POST-запроса к WordPress. Единственный способ соединиться с WordPress — это API, вам нужно создать POST-запрос к WordPress, как это
axios.post(‘http://your-wordpress-website/api/’,()=>{
})
.
Ответ или решение
Для интеграции функции входа и регистрации в приложении на React Native с использованием WordPress и плагина JWT Authentication, вам потребуется выполнить несколько ключевых шагов. Давайте детализируем процесс, чтобы облегчить вам задачу.
1. Установка плагина JWT Authentication
Первым делом необходимо убедиться, что ваш сайт на WordPress настроен для работы с JWT Authentication. Установите и активируйте плагин JWT Authentication for WP REST API. После установки выполните следующие настройки:
-
Добавьте секретный ключ в файл
wp-config.php:define('JWT_AUTH_SECRET_KEY', 'ваш_секретный_ключ'); -
Проверьте конфигурацию REST API:
Убедитесь, что настройки REST API позволяют доступ для аутентификации.
2. Установка зависимостей
В вашем проекте React Native вам понадобится использовать библиотеку Axios для выполнения HTTP-запросов. Установите её с помощью следующей команды:
npm install axios3. Настройка логики аутентификации
В вашем компоненте входа добавьте код для выполнения POST-запроса на ваш WordPress сайт с использованием библиотек Axios. Ниже представлен пример того, как это сделать:
import React from 'react';
import {
SafeAreaView,
StatusBar,
TextInput,
TouchableOpacity,
Text,
Alert,
} from 'react-native';
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
class LoginScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
};
}
handleLogin = async () => {
try {
const response = await axios.post('http://your-wordpress-site/wp-json/jwt-auth/v1/token', {
username: this.state.username,
password: this.state.password,
});
// Сохранение токена в AsyncStorage
await AsyncStorage.setItem('userToken', response.data.token);
// Переход на следующий экран
this.props.navigation.navigate('Dashboard');
} catch (error) {
Alert.alert('Ошибка', 'Неправильное имя пользователя или пароль.');
}
};
render() {
return (
<SafeAreaView>
<StatusBar barStyle="dark-content" />
<TextInput
placeholder="Имя пользователя"
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })}
/>
<TextInput
placeholder="Пароль"
value={this.state.password}
onChangeText={(text) => this.setState({ password: text })}
secureTextEntry
/>
<TouchableOpacity onPress={this.handleLogin}>
<Text>Войти</Text>
</TouchableOpacity>
</SafeAreaView>
);
}
}
export default LoginScreen;4. Регистрация пользователя
Для функции регистрации можно создать другой метод, который отправляет данные на соответствующий endpoint на вашем сайте. Предположим, что у вас есть endpoint для регистрации, например wp-json/wp/v2/users/register.
handleSignup = async () => {
try {
const response = await axios.post('http://your-wordpress-site/wp-json/wp/v2/users/register', {
username: this.state.username,
password: this.state.password,
});
Alert.alert('Успех', 'Пользователь успешно зарегистрирован!');
this.props.navigation.navigate('Login'); // Переход на экран входа
} catch (error) {
Alert.alert('Ошибка', error.response.data.message || 'Произошла ошибка. Попробуйте снова.');
}
};5. Защита маршрутов
Чтобы защитить ваши маршруты, вы должны проверять наличие токена в AsyncStorage и направлять пользователя на экран входа, если токен не найден.
Заключение
Таким образом, интеграция функций входа и регистрации в React Native приложении с использованием WordPress и плагина JWT Authentication может быть выполнена с помощью простых HTTP-запросов. С помощью Axios вы сможете управлять токенами и аутентификацией, делая ваше приложение безопасным и удобным. Не забывайте тестировать каждую часть вашего приложения для обеспечения его корректной работы.
Для дальнейшего изучения рекомендуем ознакомиться с документацией по WordPress REST API и Axios.