Существуют различные способы аутентификации пользователя с помощью Facebook, Google, Twitter, LinkedIn, электронной почты и т. Д. Но аутентификация по электронной почте по-прежнему остается самым популярным методом аутентификации. В этом руководстве мы расскажем, как создать аутентификацию электронной почты с помощью React native и Firebase.
оригинал статьи опубликовать в моем блоге
Использование React Native с firebase упрощает реализацию. Итак, не теряя времени, давайте начнем
Прежде всего, c создайте новый проект React Native с выставкой.
Аутентификация электронной почты с помощью React native и Firebase с использованием Expo:
В этом посте мы используем expo, не касаясь Xcode или Android studio. Откройте свой терминал или командную строку и введите:
expo init fb-react-native-firebase
После нажатия клавиши ВВОД вы увидите экран, показанный ниже, где вы можете ввести имя приложения и ярлык. После этого снова нажмите Enter
По завершении процесса установки вы увидите экран, показанный ниже.
Затем перейдите в папку проекта, как показано выше, используя cd app-name. После этого вы можете напрямую запустить приложение, просто используя простую команду.
yarn start
Мы собираемся развивать этот проект с помощью VS Code. Так что откройте это в коде Visual Studio и в их открытом терминале run yarn start
.
Выставка откроет новое окно в браузере, как показано ниже. Там вы можете увидеть варианты запуска приложения с помощью эмулятора Android или устройства, симулятора iOS и с помощью сканера QR-кода. Мы используем эмулятор Android, чтобы продемонстрировать это приложение.
После этого откройте свой эмулятор и используйте его, чтобы открыть приложение expo.
Эмуляторы используют очень много места в памяти вашей системы в зависимости от вашего устройства или ОС. Я пытаюсь использовать Android на Mac, но он занимает так много места.
Итак, теперь мы готовы писать код.
Быстрая форма Bootstrap с нативной базой
Чтобы разрабатывать наш интерфейс быстрее и плавнее, мы используем Native base для разработки этого приложения. Вы можете проверить собственную базу для получения дополнительной информации. Итак, перейдем к следующему шагу
Откройте новый терминал, запустите npm i native-base
Следующий шаг для импорта необходимого базового компонента Native в App.js
import { Container, Item, Form, Input, Button, Label } from "native-base";
И построить интерфейс формы
render() { return ( <Container> <Form> <Item floatingLabel> <Label>Email</Label> <Input autoCapitalize="none" autoCorrect={false} /> </Item> <Item floatingLabel> <Label>Password</Label> <Input secureTextEntry={true} autoCapitalize="none" autoCorrect={false} /> </Item> <Button full rounded success> <Text>Login</Text> </Button> </Form> </Container> ); }
Когда вы сохраняете результат, вы можете сразу увидеть его на экране. Эта функция называется горячей перезагрузкой.
Форма появится вверху.
Теперь дизайн формы готов. Перейдем к основной программной части.
Добавить firebase в собственный проект React
Давайте добавим firebase with npm i firebase
и импортируем firebase в App.js, а затем импортируем это в наш проект.
import * as firebase from "firebase";
На следующем этапе вам нужно создать проект firebase. Перейдите в консоль firebase и сделайте ее, как показано ниже:
Теперь возьмите конфигурационный apikey, который очень важен для доступа к данным из базы данных.
И вставьте в App.js, как показано ниже в структуре кода.
import * as firebase from "firebase"; import { Container, Item, Form, Input, Button, Label } from "native-base"; var config = { apiKey: "AIzaSyDFdsjQWG8IFLXmviNqSiVZMw_ADFl5tpo", authDomain: "react-native-firebase-3bde9.firebaseapp.com", databaseURL: "https://react-native-firebase-3bde9.firebaseio.com", projectId: "react-native-firebase-3bde9", storageBucket: "react-native-firebase-3bde9.appspot.com", messagingSenderId: "269398778466" }; firebase.initializeApp(config);
Теперь мы успешно добавили firebase в наш проект.
Зарегистрироваться
Для аутентификации по электронной почте нам необходимо активировать аутентификацию по электронной почте в консоли Firebase.
Вернемся к VS Code и добавим к нему кнопку регистрации.
<Button full rounded success style={{ marginTop: 20 }}> <Text>Signup</Text> </Button>
Просмотр результатов должен быть
Теперь нам нужно добавить код регистрации.
export default class App extends React.Component { constructor(props) { super(props); this.state = { email: "", password: "" }; } SignUp = (email, password) => { try { firebase .auth() .createUserWithEmailAndPassword(email, password) .then(user => { console.log(user); }); } catch (error) { console.log(error.toString(error)); } };
Мы создаем состояние для обработки электронной почты и пароля от. Мы создали форму и функцию SignUp для обработки кода firebase.
Затем добавьте значение формы в состояние с помощью onChangeText.
<Item floatingLabel> <Label>Email</Label> <Input autoCapitalize="none" autoCorrect={false} onChangeText={email => this.setState({ email })} /> </Item> <Item floatingLabel> <Label>Password</Label> <Input secureTextEntry={true} autoCapitalize="none" autoCorrect={false} onChangeText={password => this.setState({ password })} />
И мы запускаем функцию SignUp с событием onPress из кнопки регистрации.
onPress={() => this.SignUp(this.state.email, this.state.password)}
Сохраните и попробуйте отправить форму.
После отправки данных перейдите в консоль firebase и убедитесь, что введенные вами данные поступают туда или нет.
Теперь мы успешно добавили данные в Firebase в качестве нового пользователя.
Авторизоваться
Для входа мы используем код из метода регистрации и меняем функцию firebase.
Login = (email, password) => { try { firebase .auth() .signInWithEmailAndPassword(email, password) .then(res => { console.log(res.user.email); }); } catch (error) { console.log(error.toString(error)); } };
После вам нужно использовать метод onAuthStateChanged для получения пользовательских данных. Затем добавьте метод onPress в кнопку входа.
onPress={() => this.LogIn(this.state.email, this.state.password)}
Попробуем войти.
Привет, наконец-то мы сделали это. Мы получили данные из пользовательской базы данных firebase.
Вывод
В этом руководстве вы узнали о том, как настроить собственный проект React с expo и firebase. Вы также узнали, как начать создание пользовательского интерфейса с помощью NativeBase? Затем после этого мы создали базовую аутентификацию электронной почты с использованием React Native, Firebase и expo.
Надеемся, вы что-то поняли. Если да, то пожалуйста, с друзьями и с теми, кто нужен. Не стесняйтесь спрашивать любой вопрос.