[IONIC] Firebase Login

Firebase 목록

ionic 차례

 

[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>

 

 

 

Firebase 목록

ionic 차례