При создании веб-приложения или мобильного приложения вы захотите узнать личность пользователей. Основной способ выполнить эту задачу - получить адрес электронной почты и пароль пользователя с помощью функции входа.
Firebase Authentication предоставляет серверные службы, SDK и готовые библиотеки пользовательского интерфейса для аутентификации пользователей в вашем приложении. Он поддерживает аутентификацию с использованием паролей, номеров телефонов, популярных федеративных поставщиков удостоверений, таких как Google, Facebook и Twitter и других. Вы также можете сохранить данные пользователя в базе данных Firebase Real-Time.
В этом блоге мы обсудим, как создать систему аутентификации по электронной почте и паролю в приложении Ionic, пользователь сможет создать новое приложение и войти в существующую учетную запись. Я считаю, что вы уже создали работающее приложение Ionic,
Создание приложения Firebase
Сначала вам нужно создать приложение Firebase, открыть браузер и перейти на https://console.firebase.google.com. Вам будет предложено войти в систему с вашей учетной записью Google, при успешном входе вы будете перенаправлены на панель управления firebase.
Нажмите кнопку «Создать новое приложение» и заполните форму, это перенаправит вас на панель управления вашего приложения. Нажмите кнопку с надписью «Добавить Firebase в веб-приложение», это даст вам объект конфигурации, который будет использоваться вашим приложением Ionic для подключения к нашей базе данных Firebase.
Мы собираемся создать систему AngularFire2 Authentication для эффективного управления системой аутентификации Firebase.
Установите нужные пакеты
Откройте терминал в папке проекта и выполните следующее:
$ npm install firebase angularfire2 --save
Создание страниц и поставщиков:
Теперь мы можем начать генерировать страницы и провайдеров, которые понадобятся приложению; выполните следующее в терминале внутри каталога
$ ionic generate page Login $ ionic generate page Signup $ ionic generate provider Auth
Импорт и инициализация
Теперь поработаем с файлом app / app.module.ts, сначала импортируем все необходимые модули.
import { AuthProvider } from '../providers/auth/auth'
//Importing the AF2 module
import { AngularFireModule } from 'angularfire2'
import { AngularFireAuthModule } from 'angularfire2/auth
//Importing the pages an the providers
import { LoginPage } from '../pages/login/login';
import { AuthProvider } from '../providers/auth/auth';
import { SignupPage } from '../pages/signup/signup'
import { ForgetPage } from '../pages/forget/forget'
//AF2 setting
export const firebaseCredential = {
apiKey: '',
authDomain: '',
databaseURL: '',
storageBucket: '',
messagingSenderId: '',
}
// Initialize the @NgModule
@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
SignupPage,
ForgetPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseCredential),
AngularFireAuthModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
SignupPage,
ForgetPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AuthProvider
]
})
export class AppModule {}
Вы можете найти значение данных firebaseCredential в Консоли Firebase. Вы можете найти окончательный код здесь: app.module.ts.
Создание наблюдателя при проверке подлинности
Теперь мы будем использовать и настраивать прослушиватель аутентификации, чтобы AngularFire2 мог прослушивать состояние пользователя и знать, вошел ли он в систему. Если вошедший в систему пользователь захочет снова открыть приложение, ему не придется снова проходить процесс обучения.
Для этого перейдите на app / app.component.ts, сначала мы импортируем AF2:
import { AngularFireAuth } from 'angularfire2/auth'
Нам нужно увидеть, аутентифицирован ли пользователь, если пользователь аутентифицирован, мы отправим его на домашнюю страницу, а если нет, мы отправим его на LoginPage. . Что-то вроде этого;
constructor(platform: Platform, afAuth: AngularFireAuth, ....){
afAuth.authState.subscribe(user =>{
if(user) {
this.rootPage = HomePage;
} else {
this.rootPage = LoginPage;
}
})
}
Полный код файла находится здесь: app.component.ts
Создание поставщика аутентификации
Провайдер похож на модуль, он централизует функцию в одном файле и помогает повторно использовать. В Provider / auth / auth.ts первое, что нужно сделать, - это импортировать все необходимые модули.
import * as firebase from 'firebase';
Теперь мы введем AF2 в конструктор, а затем создадим все функции AuthFunction в файле,
//Email and Password Login
loginUser(email: string, password: string ): Promise<any> {
return firebase.auth().signInWithEmailAndPassword(email, password);
}
// Reset Password Link
resetPassword(email: string): Promise<void> {
return firebase.auth().sendPasswordResetEmail(email);
}
// Log the user out
logoutUser(): Promise<void> {
return firebase.auth().signOut();
}
Вы можете найти весь код здесь: auth.ts
Создание страницы входа
login.html
login.html будет иметь две формы ввода (адрес электронной почты и пароль) и кнопку для входа пользователя в систему, мы будем использовать проверку формы с помощью Angular2 FormBuilder. Поскольку здесь я сконцентрирован на бэкэнде, вы можете найти его код здесь: login.html
login.ts
//Importing everything that is required
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { AuthProvider } from '../../providers/auth/auth';
import { HomePage } from '../../pages/home/home';
import { SignupPage } from '../../pages/signup/signup';
import { ForgetPage } from '../../pages/forget/forget'
//variables for form validation
public loginForm: FormGroup;
public loading: Loading;
form: boolean = true;
//Injecting everything in our constructor and adding validation rules constructor(loadingCtrl: LoadingController,public alertCtrl: AlertController,public authProvider: AuthProvider,public formBuilder: FormBuilder....) {
this.loginForm = formBuilder.group({
email: [''],
password: [''],
});
}
// function to reset password
forget(){
this.navCtrl.push(ForgetPage);
}
// function to redirect to signup page
signup(){
this.navCtrl.push(SignupPage);
}
Это позволит вашему пользователю перейти на
ResetPasswordPage, если он забыл свой пароль и не может войти в систему, или наSignupPage, чтобы создать новую учетную запись.
Теперь давайте сделаем функцию входа в систему,
loginUser(): void {
this.authProvider.loginUser(this.loginForm.value.email, this.loginForm.value.password)
.then( authData =>{
this.loading.dismiss().then( () =>{
this.navCtrl.setRoot(HomePage);
});
}, error =>{
this.loading.dismiss().then( () => {
let alert = this.alertCtrl.create({
message: error.message,
buttons: [
{
text: "Ok",
role: 'cancel'
}
]
});
alert.present();
});
});
this.loading = this.loadingCtrl.create({
content: 'Searching.. please wait',
});
this.loading.present();
}
Это ссылка на полный login.ts.
Создание страницы сброса пароля
Forgot.html
Это похоже на файл login.html, он также будет содержать один вход, который будет полем электронной почты. Код для файла можно найти здесь: забудьте.html
Forgot.ts
// Getting all the imports ready
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {AuthProvider} from '../../providers/auth/auth';
import { LoginPage } from '../../pages/login/login';
// Adding the form variables
public forgotForm: FormGroup;
public loading: Loading;
// Injecting the constructor and
constructor(public formBuilder: FormBuilder, public loadingCtrl: LoadingController, public alertCtrl: AlertController...) {
this.forgotForm = formBuilder.group({
email: [''],
})
}
//the resetPassword() function
forgotPassword(){
this.authProvider.resetPassword(this.forgotForm.value.email)
.then(() => {
this.loading.dismiss().then( () => {
this.navCtrl.setRoot(LoginPage);
});
}, (error) => {
let alert = this.alertCtrl.create({
message: error.message,
buttons: [
{
text: 'OK',
role: 'cancel'
}
]
})
});
this.loading = this.loadingCtrl.create();
}
Полный код этого файла: Forgot.ts
Создание страницы регистрации
signup.html
Как вы понимаете, между шаблоном регистрации и шаблоном входа нет никакой разницы, кроме их имен и имен форм, поэтому код очень похож: signup.html
signup.ts
//Importing everything we need
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthProvider } from '../../providers/auth/auth';
import { AngularFireAuth } from 'angularfire2/auth';
// Adding the form variables
public signupForm: FormGroup;
public loading: Loading;
//Injecting in the constructor
constructor(public navCtrl: NavController, public afAuth: AngularFireAuth ....) {
this.signupForm = formBuilder.group({
email: [''],
password: ['']
});
}
// the signup function
signupUser(){ this.afAuth.auth.createUserWithEmailAndPassword(this.signupForm.value.email, this.signupForm.value.password)
.then(() => {
this.loading.dismiss().then( () => {
this.navCtrl.setRoot(HomePage);
});
}, (error) => {
this.loading.dismiss().then( () =>{
let alert = this.alertCtrl.create({
message: error.message,
buttons: [
{
text: 'OK',
role: 'cancel'
}
]
});
});
});
this.loading = this.loadingCtrl.create({
content: "Creating your account! Please wait"
});
this.loading.present();
}
Код этого файла: signup.ts
Уф !! это был большой блог, но теперь у нас будет рабочий процесс авторизации, и пользователь сможет войти в ваше приложение, создать новую учетную запись и сбросить пароль вашей учетной записи. Но самое главное, вы должны лучше понимать, как работает аутентификация в Firebase / AF2.
Вы можете найти весь код здесь: firebase-authentication-ionic
