Знание личности пользователя необходимо для создания безопасных экосистем приложений, поскольку оно позволяет пользователям безопасно хранить данные в облаке и обеспечивать согласованный персонализированный опыт на всех устройствах.
Зачем использовать аутентификацию в моем приложении?
✅Аутентификация — важная мера безопасности для любого приложения. Это помогает гарантировать, что только авторизованные пользователи могут получить доступ к приложению, защищая конфиденциальные данные и предотвращая доступ злоумышленников.
✅ Аутентификация также помогает предотвратить внесение изменений в приложение или данные неавторизованными пользователями и может помочь защитить ваше приложение от вредоносных атак.
Почему реагировать?
✅Декларативный. React упрощает процесс создания интерактивных пользовательских интерфейсов, позволяя создавать простые представления для каждого состояния вашего приложения. Затем React будет эффективно обновлять и отображать необходимые компоненты при изменении ваших данных, делая ваш код более предсказуемым и легким для отладки.
✅На основе компонентов. Создавайте компоненты с собственным состоянием, а затем объединяйте их для создания сложных пользовательских интерфейсов. JavaScript позволяет передавать данные более эффективно, чем шаблоны, избавляя от необходимости хранить состояние в DOM.
React расширяет возможности приложений с помощью React Native и может запускаться на сервере с помощью node.
Почему аутентификация Firebase?
Firebase Authentication предлагает комплексные серверные службы, удобные SDK и готовые библиотеки пользовательского интерфейса для аутентификации пользователей в вашем приложении.
Он поддерживает аутентификацию с помощью паролей, номеров телефонов и популярных сторонних поставщиков удостоверений, таких как Google, Facebook и Twitter. Сервисы Firebase основаны на стандартных отраслевых протоколах, таких как OAuth 2.0 и OpenID Connect, что обеспечивает простую интеграцию с вашим пользовательским сервером.
Firebase AUTH с реакцией на электронную почту и пароль (ШАГИ)
Создайте проект Firebase
Перейдите на https://console.firebase.google.com и нажмите: Добавить проект.
Создайте React-приложение
Запустите эти команды на терминале, напишите в «my-new-app» название вашего приложения.
npx create-react-app my-new-app cd my-new-app npm start
Включить аутентификацию по электронной почте и паролю Firebase
Как работает простое веб-приложение, которое мы создаем сегодня?
Я использую не CSS, чтобы сосредоточиться только на логике и коде JavaScript.
firebase.js — файл
Получите конфигурацию Firebase в разделе Настройки проекта, добавив новое веб-приложение, чтобы получить собственные учетные данные.
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app;
App.js — Файл
Мы создаем профиль с основными поставщиками AUTH, а также используем обмен сообщениями и Firestore. В этом примере вы будете использовать только Firebase AUTH.
import './App.css';
import { getAnalytics } from "firebase/analytics";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import {getAuth, signInAnonymously, onAuthStateChanged, signOut, signInWithEmailAndPassword} from "firebase/auth"
import {ToastContainer, toast} from 'react-toastify'
import app from './firebase';
import "react-toastify/dist/ReactToastify.css"
import React from 'react';
import { Timestamp} from '@firebase/firestore';
//firestore dependencies
import { doc, FieldValue, getDoc, getFirestore, serverTimestamp, setDoc, updateDoc, deleteDoc } from "firebase/firestore";
import { async } from '@firebase/util';
import SignIn from './SignIn';
import SignUp from './SignUp';
const analytics = getAnalytics(app);
function App() {
const [uid, setUid] = React.useState("");
const [signMode, setSignMode] = React.useState("signIn")
const [validLogin, setValidLogin] = React.useState(false)
const singUpAnonymously= ()=>{
signInAnonymously(getAuth(app)).then(
user=> (setUid(user.user.uid), console.log(user.providerId))
)
}
const db = getFirestore(app);
const messaging = getMessaging(app);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);
React.useEffect(()=>{
//singUpAnonymously();
console.log(uid)
onMessage(messaging, message=>{
console.log("your message: ", message)
toast(message.notification.title)
// console.log("payload.data.url"+message.data.url)
//window.location.replace("http://localhost:3000/"+message.data.url)
})
if (uid!= "")
{
//CREATE DATA
//setUserDoc(uid)
//UPDATE DATA
//updateUserDoc(uid)
//READ DATA
//getUserDoc(uid)
//DELETE DATA
}else{
console.log("not user uid")
}
},[validLogin])
function setSignModeF1 (){
setSignMode("signUp")
}
function setSignModeF2 (){
setSignMode("signIn")
}
function checkIfValidLogin(){
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
const uid = user.uid;
//console.log(user.isAnonymous)
if (validLogin == false){
setValidLogin(prevState => !prevState)
}
// ...
} else {
// User is signed out
// ...
}
});
}
checkIfValidLogin();
function signOutF(){
signOut(getAuth(app)).then(
(validLogin == true?
setValidLogin(prevState => !prevState)
:console.log("ee")
)
)
}
return (
<div>
<h1>Firebase Cloud Firestore</h1>
<button onClick={setSignModeF1}>Sign Up</button>
<button onClick={setSignModeF2}>Sign In</button>
<br/>
{signMode=="signIn"? <SignIn mode="Sign In"></SignIn>: <SignUp mode="Sign Up"></SignUp>}
<ToastContainer/>
{validLogin?<div><h2>Logged in</h2><button onClick={signOutF}>Sign Out</button></div>: <h2>Not logged in</h2> }
</div>
);
}
export default App;
SignIn.js — Файл
import React, {Component} from "react";
import {getAuth, signInWithEmailAndPassword} from 'firebase/auth'
import app from './firebase'
function SignIn (props) {
const auth = getAuth(app);
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
function signInWEAP(){
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.log(userCredential.user.uid)
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
}
const onChangeHandlerP = event => {
setPassword(event.target.value);
};
const onChangeHandlerE = event => {
setEmail(event.target.value);
};
return(
<div><h1> {props.mode}</h1>
<input onChange={onChangeHandlerE} value={email} type="email" placeholder="email"></input>
<br></br>
<input onChange={onChangeHandlerP} value={password} type="password" placeholder="password"></input>
<br/>
<button onClick={signInWEAP}>Sign In</button>
</div>)
}
export default SignIn;
SignUp.js — Файл
import React, {Component} from "react";
import app from './firebase';
import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth'
function SignUp (props) {
const auth = getAuth(app);
const [email, setEmail] = React.useState("");
const [password, setPassword] = React.useState("");
function createUserWithEmailAndPasswordF(){
// if password is more than 8 characters long
if (password.length>=8){
console.log("password lenght correct")
}else{
console.log("password should be at least 8 characters long")
return
}
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
console.log("user created"+ userCredential.user.uid)
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
}
const onChangeHandlerP = event => {
setPassword(event.target.value);
};
const onChangeHandlerE = event => {
setEmail(event.target.value);
};
// Initialize Firebase Authentication and get a reference to the service
return(<div><h1> {props.mode}</h1>
<input onChange={onChangeHandlerE} value={email} type="email" placeholder="email"></input>
<br></br>
<input onChange={onChangeHandlerP} value={password} type="password" placeholder="password"></input>
<br/>
<button onClick={createUserWithEmailAndPasswordF}>Sign Up</button>
</div> );
}
export default SignUp;
Проверьте мой полный репозиторий GitHub для Firebase AUTH с адресом электронной почты и паролем здесь.
Это моя первая книга, которую я написал в научной фантастике для своей видеоигры:
Спасибо за прочтение!
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
