Angular의 Firebase 인증

Firebase는 앱에서 인증을 설정하는 쉬운 방법을 제공합니다. 여기에서는 AngularFire2 라이브러리를 사용하여 Angular 2+ 애플리케이션에 대한 간단한 이메일/비밀번호 등록 및 인증 워크플로를 설정하는 방법을 살펴보겠습니다.

첫 번째 단계는 새 Firebase 프로젝트를 만들고 Firebase 콘솔의 인증 섹션에서 이메일/비밀번호 로그인 방법을 활성화하는 것입니다.

npm을 사용하여 필요한 패키지 설치를 시작해 보겠습니다. 그러면 프로젝트에 Firebase SDK, AngularFire2 및 promise-polyfill 종속성이 추가됩니다.

$ npm install firebase angularfire2 --save

$ npm install promise-polyfill --save-exact

이제 프로젝트의 환경 변수에 Firebase API 및 프로젝트 자격 증명을 추가해 보겠습니다. 웹 앱에 Firebase 추가를 클릭하면 Firebase 콘솔에서 다음 값을 찾을 수 있습니다.

src/environments/environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'XXXXXXXXXXX',
    authDomain: 'XXXXXXXXXXX',
    databaseURL: 'XXXXXXXXXXX',
    projectId: 'XXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXX'
  }};

그런 다음 AngularFireModule 및 AngularFireAuthModule을 사용하여 앱 모듈을 구성합니다. 또한 AuthService를 가져오고 제공하고 있습니다. 다음으로 서비스를 생성하겠습니다:

app.module.ts

// ...

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { AuthService } from './auth.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

인증 서비스 생성

우리 서비스는 사용자 로그인, 등록 또는 로그아웃을 가능하게 하는 중앙 위치가 될 것입니다. 이 3가지 작업 정의 방법을 만듭니다. 모든 인증 로직이 서비스에 포함되므로 인증 로직을 구현할 필요가 없는 구성 요소를 생성하고 구성 요소를 단순하게 유지하는 데 도움이 됩니다.

이 명령을 사용하면 Angular CLI를 사용하여 서비스용 프레임워크를 만들 수 있습니다.

$ ng g s auth

이것은 AngularFireAuth를 활용하는 서비스 구현입니다.

auth.service.ts

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

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;

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

  signup(email: string, password: string) {
    this.firebaseAuth
      .auth
      .createUserWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Success!&#39;, value);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });    
  }

  login(email: string, password: string) {
    this.firebaseAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        console.log(&#39;Nice, it worked!&#39;);
      })
      .catch(err => {
        console.log(&#39;Something went wrong:&#39;,err.message);
      });
  }

  logout() {
    this.firebaseAuth
      .auth
      .signOut();
  }

}

사용 가능한 방법을 확인할 수 있습니다. on AngularFireAuth.auth 둘 다 약속을 반환하므로 then과 catch를 사용하여 각각 성공 및 오류 상태를 처리할 수 있습니다.

여기서는 이메일/비밀번호 인증을 설정하기 때문에 createUserWithEmailAndPassword 및 signInWithEmailAndPassword를 사용하고 있지만 동일한 방법을 사용하여 Twitter, Facebook 또는 Google을 통해 인증할 수 있습니다.

구성 요소 클래스 및 템플릿

이제 인증 서비스가 구현되었으므로 로그인, 등록 또는 로그아웃을 허용하는 구성 요소를 만드는 것은 매우 간단합니다.

app.comComponent.ts

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({ ... })
export class AppComponent {
  email: string;
  password: string;

  constructor(public authService: AuthService) {}

  signup() {
    this.authService.signup(this.email, this.password);
    this.email = this.password = '';
  }

  login() {
    this.authService.login(this.email, this.password);
    this.email = this.password = '';    
  }

  logout() {
    this.authService.logout();
  }
}

구성 요소의 생성자 인증 서비스에 서비스를 삽입한 다음 인증 서비스에서 동등한 메서드를 호출하는 기본 메서드를 정의합니다. 템플릿에서도 직접 서비스 속성에 액세스할 수 있도록 private 대신 public 키워드를 사용하는 서비스에 중점을 둡니다.

템플릿은 매우 간단하며 authService의 사용자 개체에 비동기 파이프를 사용하여 로그인한 사용자가 있는지 확인합니다.

app.comComponent.html

<h1 *ngIf="authService.user | async">Welcome {{ (authService.user | async)?.email }}!</h1>

<div *ngIf="!(authService.user | async)">
  <input type="text" [(ngModel)]="email" placeholder="email">
  <input type="password" [(ngModel)]="password" placeholder="email">

  <button (click)="signup()" [disabled]="!email || !password">
    Signup
  </button>

  <button (click)="login()" [disabled]="!email || !password">
    Login
  </button>
</div>

<button (click)="logout()" *ngIf="authService.user | async">
  Logout
</button>

입력 필드는 프레임워크 구문에서 ngModel과 바나나를 사용합니다. , 양방향 바인딩 컴포넌트 클래스에 이메일 및 비밀번호 값을 정의합니다.

완료! Firebase 인증을 사용하여 앱에 인증을 추가하는 것은 매우 쉽습니다!

위 내용은 Angular의 Firebase 인증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!