and_181204

1. config.xml  id 수정 

2. 파이어베이스 구글 로그인  https://firebase.google.com/docs/web/setup?hl=ko

3.상단에  콘솔로 이동 ->프로젝트를 만든다  Authentication로이동해서 add 유저 더미유저

처음 로그인할 유저를 만든다 . 

웹설정 (web 설정을 누른다 )

3.app.component.ts (타입 스크립트)에 설정 

 var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);

cmd창으로 

npm install firebase@4.8.1 --save

설치

import * as firebase from "firebase"

추가

인증 상태 관찰자 설정 및 사용자 데이터 가져오기

https://firebase.google.com/docs/auth/web/start?authuser=0

firebase.auth().onAuthStateChanged(function(user) {

if (user) {

// User is signed in.

var displayName = user.displayName;

var email = user.email;

var emailVerified = user.emailVerified;

var photoURL = user.photoURL;

var isAnonymous = user.isAnonymous;

var uid = user.uid;

var providerData = user.providerData;

// ...

} else {

// User is signed out.

// ...

}

ionic g page login 

로그인 페이지만들기

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

import { LoginPage } from '../pages/login/login';

추가

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { LoginPage } from '../pages/login/login';

@NgModule({

declarations: [

MyApp,

HomePage,

LoginPage

],

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

],

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

LoginPage

],

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

디클러레이션 이랑 부트스트랩에 페이지 추가 및 임포트 

오류발생

Typescript Error

Cannot find module '@firebase/app-types/private'.

...tbank/helloWorld4/node_modules/@firebase/database/dist/esm/src/api/Database.d.ts

	import { FirebaseApp } from '@firebase/app-types';
	import { FirebaseService } from '@firebase/app-types/private';
	/**

Typescript Error

Cannot find module '@firebase/app-types/private'.

...oWorld4/node_modules/@firebase/database/dist/esm/src/core/AuthTokenProvider.d.ts

	getToken(forceRefresh: boolean): Promise<FirebaseAuthTokenData>;
	addTokenChangeListener(listener: (token: string | null) => void): void;
	removeTokenChangeListener(listener: (token: string | null) => void): void;

export class MyApp {

rootPage:any;

위  부분을 이렇게날리고 저장하고 아레 auth부분 자체를 날렸다가 저장하고 다시 붙이고 저장하면  인식한다. 

firebase.auth().onAuthStateChanged((user)=> {

if (user) {

this.rootPage = HomePage;

} else {

this.rootPage = LoginPage;

}

});

https://ionicframework.com/docs/components/#floating-labels

로그인 화면

<!--

Generated template for the LoginPage page.

See http://ionicframework.com/docs/components/#navigation for more info on

Ionic pages and navigation.

-->

<ion-header>

<ion-navbar color="primary">

<ion-title>로그인</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item>

<ion-label floating>Email</ion-label>

<ion-input type="email" [(ngModel)]="account.email" ></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Password</ion-label>

<ion-input type="password" [(ngModel)]="account.password"></ion-input>

</ion-item>

<div class='divider' style="width: 100%; height: 30px;">

<button ion-button full (click)="login()" color="primary" >로그인</button>

<button ion-button full (click)="signup()" color="primary" >회원가입</button>

</div>

</ion-content>

로그인.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import * as firebase from "firebase";

import { SignupPage } from '../signup/signup';

@IonicPage()

@Component({

selector: 'page-login',

templateUrl: 'login.html',

})

export class LoginPage {

private account : any ={

email : '',

password : ''

};

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad LoginPage');

}

login(){

}

signup(){

//intent 역할

this.navCtrl.push(SignupPage);

}

}

ionic g page signup

회원가입화면

 <!--

Generated template for the SignupPage page.

See http://ionicframework.com/docs/components/#navigation for more info on

Ionic pages and navigation.

-->

<ion-header>

<ion-navbar>

<ion-title>signup</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-item>

<ion-label floating>이 름</ion-label>

<ion-input type="text" [(ngModel)]="account.name" ></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Email</ion-label>

<ion-input type="email" [(ngModel)]="account.email" ></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Password</ion-label>

<ion-input type="password" [(ngModel)]="account.password"></ion-input>

</ion-item>

<div padding>

<span style="color:red">

비밀번호는 6자리 이상이여야 합니다.

</span>

</div>

<div class='divider' style="width: 100%; height: 30px;">

<button ion-button full (click)="signup()" color="danger">확 인</button>

<button ion-button full >취 소</button>

</div>

</ion-content>

회원가입.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import * as firebase from "firebase";

/**

* Generated class for the SignupPage page.

*

* See https://ionicframework.com/docs/components/#navigation for more info on

* Ionic pages and navigation.

*/

@IonicPage()

@Component({

selector: 'page-signup',

templateUrl: 'signup.html',

})

export class SignupPage {

private account : any ={

name : '',

email : '',

password : ''

};

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad SignupPage');

}

signup(){

}

}

오류 

Cannot read property 'forRoot' of undefined

아까 위 방식으로 다시 컴파일하면 됨

뭔가 못불러온다 css 이름이 틀려있어서 고침 

고쳤는데 이 오류가 또남 

cannot read property 'call' of undefine

동적 css를 기본값으로 바꾸고 다시 ionic serve

회원가입 화면

신규 사용자 가입

https://firebase.google.com/docs/auth/web/start?authuser=0

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import * as firebase from "firebase";

/**

* Generated class for the SignupPage page.

*

* See https://ionicframework.com/docs/components/#navigation for more info on

* Ionic pages and navigation.

*/

@IonicPage()

@Component({

selector: 'page-signup',

templateUrl: 'signup.html',

})

export class SignupPage {

private account : any ={

name : '',

email : '',

password : ''

};

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad SignupPage');

}

signup(){

firebase.auth()

.createUserWithEmailAndPassword(this.account.email, this.account.password)

.then((result)=>{

console.log(result);

var user = firebase.auth().currentUser;

var user = firebase.auth().currentUser;

user.updateProfile({

displayName: "Jane Q. User",

photoURL: "https://example.com/jane-q-user/profile.jpg"

}).then(()=> {

// Update successful.

console.log('회원가입성공')

}).catch((error)=> {

// An error happened.

console.log(error.message);

});

})//프로미스 패턴

.catch((error)=> {

// Handle Errors here.

console.log(error.message);

var errorCode = error.code;

var errorMessage = error.message;

// ...

});

}

}

자바스크립트 프로미스 패턴 

https://poiemaweb.com/es6-promise

사용자 프로필 업데이트하기

https://firebase.google.com/docs/auth/web/manage-users?authuser=0

ionic 카카오톡 로그인