Angular + @angular/fire로 로그인, 가입, 로그아웃할 수 있는 페이지 만들기

Angular 및 Firebase에서 로그인/회원/로그아웃할 수 있는 페이지를 만듭니다. Angular는 1계 이외 전혀 괴롭힌 적이 없는 초보자입니다.

이번 완성품은

htps : // 기주 b. 이 m / hbs의 w 씨 d 보 x / 앙구 ぁ r ふぃ

여기 있습니다.

Angular에서 Firebase를 좋은 느낌으로 사용하는 라이브러리에는 몇 가지 있는 것 같지만, @angular/fire가 공식적으로 유지보수되고 있는 것과 같기 때문에, 이쪽을 사용하기로 합니다(이전은 angularfire2 같은 이름이었던 것 같다).

ng new angular-firebase-auth
npm i -S @angular/fire
touch src/environments/environment.local.ts

Firebase

htps : // 푹 빠져라. 오, ぇ. 코m/

위에서 계정을 만들고 콘솔로 이동한 후, 적당히 프로젝트를 만들고, 앱을 추가에서 웹 플랫폼을 추가한다.

메뉴에서 Authentication을 선택하고 로그인 방법의 탭을 선택합니다. 이번에는 로그인 방법에 이메일 주소와 Google을 채용했습니다.



그런 다음 필요한 apiKey와 같은 정보를 touch src/environments/environment.local.ts 에 copipe.

export const environment = {
  production: false,
  firebase: {
    apiKey: "",
    ...
  }
};

이런 느낌. environment.local.ts 는 .gitignore 에 포함시켜 git에서 제외해 두었지만, 실제로 사용하는 경우에 어떻게 하는 것이 일반적인 것인지는 조금 조사해 봐도 잘 몰랐다.

나머지는 angular.json에 만든 파일의 설정이 local에서 런타임에 반영되도록

"configurations": {
  "local": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.local.ts"
      }
    ]
  },
  ...
}

추가하여 Firebase 설정이 끝났습니다. ng serve --configuration=local로 실행하면이 설정이 반영됩니다.

Angular

환경 변수의 설정까지는 끝나고 있지만, 몇 가지 설정이 많지 않기 때문에 아래를 보고 부족한 기술을 추가한다. 주로 app.module.ts가 된다고 생각한다.

1. Installation and Setup

다음에 인증용의 코드를 써 갑니다

ng g s shared/authentication

여기에서는 아래의 문서대로가 아니라 인증용 서비스를 만든다

5. Getting started with Firebase Authentication

Firebase API 를 참고로 하면서, 코드를 다음과 같이 했다

import { Injectable } from '@angular/core';
import { AngularFireAuth } from "@angular/fire/auth";
import { Observable } from 'rxjs';
import { auth } from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  user: Observable<firebase.User>;

  constructor(private angularFireAuth: AngularFireAuth) {
    this.user = angularFireAuth.authState;
  }

  SignUp(email: string, password: string) {
    this.angularFireAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.error(err);
      });
  }

  SignIn(email: string, password: string) {
    this.angularFireAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.error(err);
      });
  }

  SignInGoogle() {
    this.angularFireAuth
      .auth
      .signInWithPopup(new auth.GoogleAuthProvider())
      .then((response) => {
        console.log(response);
      })
      .catch((err) => {
        console.error(err);
      });
  }

  SignOut() {
    this.angularFireAuth
      .auth
      .signOut();
  }
}

나중에 SignInGoogle() 는 인수에 firebase.auth.AuthProvider 의 형을 건네줄 수 있도록(듯이) 하는 것이 좋았을지도, 라고 생각했지만 다른 사람이 로그인에 무엇을 사용하는지 조사하고 있지 않기 때문에 실제로 좋은 방법인가 어떨지는 조금 모른다.

우선 에러는 콘솔에 딱 하고 있습니다, 우선 움직이면 좋다.

다음 HTML과 TS.

<div *ngIf="authenticationService.user | async as user; else showLogin">
  <p>{{ user?.email }} でログイン中</p>
  <button (click)="signOut()" *ngIf="user">ログアウト</button>
</div>

<ng-template #showLogin>
  <p><label>email: <input type="text" [(ngModel)]="email" placeholder="email"></label></p>
  <p><label>password: <input type="password" [(ngModel)]="password" placeholder="password"></label></p>

  <p><button (click)="signUp()">サインアップ</button></p>
  <p><button (click)="signIn()">サインイン</button></p>
  <p><button (click)="signInGoogle()">Googleでサインイン</button></p>
</ng-template>

import { Component } from '@angular/core';
import { AuthenticationService } from './shared/authentication.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-firebase-auth';
  email: string;
  password: string;

  constructor(public authenticationService: AuthenticationService) {}

  signUp() {
    this.authenticationService.SignUp(this.email, this.password);
  }

  signIn() {
    this.authenticationService.SignIn(this.email, this.password);
  }

  signInGoogle() {
    this.authenticationService.SignInGoogle();
  }

  signOut() {
    this.authenticationService.SignOut();
  }
}

이 부근은 Firebase 똥보다 압도적 Angular 힘의 낮음에 의해, 어쨌든 Angular에 고전했다. async pipe라든지 as 는 좋은 배움이 되었다고 생각한다.

as에 대해서는 [Angular 4.0] 새로운 ngIf 사용법 가 알기 쉬웠다.