Frontend/angular
[IONIC] Firebase Login
romeoh
2020. 2. 12. 23:32
반응형
[FIREBASE] AUTHENTICATION 로그인 - GOOGLE, FACEBOOK, EMAIL
Firebase Console 설정은 위 포스트를 참조하세요.
프로젝트 생성
$ ionic start firstProject blank --type=angular
$ npm install firebase angularfire2 --save
src/app/app.module.ts
....
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth'
var firebaseConfig = {
apiKey: "xxxx",
authDomain: "xxxx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx",
measurementId: "xxxx"
};
@NgModule({
....
imports: [
....
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule
],
....
})
....
회원가입 페이지 등록
$ ionic generate page Register
src/app/register.page.ts
import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { AngularFireAuth } from 'angularfire2/auth';
export class User {
email: string;
password: string;
}
@Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
public user:User = new User();
constructor(
public navCtrl: NavController,
public fAuth: AngularFireAuth
) { }
ngOnInit() {
}
async register() {
try {
var r = await this.fAuth.auth.createUserWithEmailAndPassword(
this.user.email,
this.user.password
);
if (r) {
console.log('회원가입 성공');
this.navCtrl.navigateRoot('login');
}
} catch (err) {
console.error(err);
}
}
}
src/app/register.page.html
<ion-header>
<ion-toolbar>
<ion-title>회원가입</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Email Address</ion-label>
<ion-input type="text" [(ngModel)]="user.email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" [(ngModel)]="user.password"></ion-input>
</ion-item>
<button ion-button (click)="register()">Register</button>
</ion-content>
로그인페이지 구현
$ ionic generate page Login
src/app/login.page.ts
import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { AngularFireAuth } from 'angularfire2/auth';
export class User {
email: string;
password: string;
}
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
public user:User = new User();
constructor(
public navCtrl: NavController,
public fAuth: AngularFireAuth
) { }
ngOnInit() {
}
async login() {
try {
var r = await this.fAuth.auth.signInWithEmailAndPassword(
this.user.email,
this.user.password
);
if (r) {
console.log("로그인 성공");
this.navCtrl.navigateRoot('home');
}
} catch (err) {
console.error(err);
}
}
}
src/app/login.page.html
<ion-header>
<ion-toolbar>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Email Address</ion-label>
<ion-input type="text" [(ngModel)]="user.email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" [(ngModel)]="user.password"></ion-input>
</ion-item>
<button ion-button (click)="login()">Login</button>
</ion-content>
로그아웃 구현
src/app/home.page.ts
import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { AngularFireAuth } from 'angularfire2/auth';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(
public navCtrl: NavController,
public fAuth: AngularFireAuth
) {}
logout() {
this.fAuth.auth.signOut();
}
}
src/app/home.page.html
<ion-header translucent>
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<button ion-button (click)="logout()">Logout</button>
</ion-content>
Facebook / Google 로그인 구현
src/app/login.page.ts
import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { auth } from 'firebase/app';
export class User {
email: string;
password: string;
}
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
public user:User = new User();
constructor(
public navCtrl: NavController,
public fAuth: AngularFireAuth
) { }
ngOnInit() {
}
async login() {
try {
var r = await this.fAuth.auth.signInWithEmailAndPassword(
this.user.email,
this.user.password
);
if (r) {
console.log("로그인 성공");
this.navCtrl.navigateRoot('home');
}
} catch (err) {
console.error(err);
}
}
async googleLogin() {
this.fAuth.auth.signInWithPopup(new auth.GoogleAuthProvider())
}
async facebookLogin() {
this.fAuth.auth.signInWithPopup(new auth.FacebookAuthProvider())
}
}
src/app/login.page.html
<ion-header>
<ion-toolbar>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Email Address</ion-label>
<ion-input type="text" [(ngModel)]="user.email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" [(ngModel)]="user.password"></ion-input>
</ion-item>
<button ion-button (click)="login()">Login</button>
<button ion-button (click)="googleLogin()">Goolge Login</button>
<button ion-button (click)="facebookLogin()">Facebook Login</button>
</ion-content>
반응형