and_181204

Android

and_181204

tmxhsk99 2018. 12. 4. 22:17

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 {}

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

오류발생

...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';
	/**

...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 카카오톡 로그인