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

인증 서비스 만들기

저희 서비스는 로그를 허용하는 서비스입니다. in, 사용자의 Register 또는 Logout을 위한 중앙 위치이므로 이 세 가지 작업에 대한 메서드를 정의합니다. 모든 인증 로직이 서비스에 포함되므로 인증 로직을 구현할 필요가 없는 구성 요소를 생성하고 구성 요소를 단순하게 유지하는 데 도움이 됩니다.

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();
  }

}

메서드를 보면 알 수 있습니다. AngularFireAuth.auth에서 사용할 수 있는 것은 모두 Promise를 반환하므로 then 및 catch를 사용하여 각각 성공 및 오류 상태를 처리할 수 있습니다.

여기에서는 createUserWithEmailAndPassword 및 signInWithEmailAndPassword를 사용합니다.

구성 요소 클래스 및 템플릿

이제 인증 서비스가 준비되었으므로 로그인, 등록 또는 로그아웃을 허용하는 구성 요소를 만드는 것은 간단합니다. 그런 다음 생성자에서 인증 서비스에 대해 동등한 메서드를 호출하는 로컬 메서드를 정의합니다. 템플릿에서 직접 서비스 속성에 액세스할 수도 있도록 private 대신 public 키워드를 사용하여 서비스를 주입합니다.

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

app.comComponent.html

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();
  }
}

입력 필드는 프레임워크 구문에서 ngModel과 바나나를 사용합니다. 구성 요소 클래스의 이메일 및 비밀번호 값에 대한 양방향 바인딩.

관련 추천: "angularjs 튜토리얼"

이 글은 Firebase 인증에 대한 관련 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

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