Angular Firebase - 사용자 인증 (2/2)

개요

앞선 포스트에서는 Angular Material, Flex Layout의 사용법을 습득하여 로그인 기능 구현을 위한 화면을 구성하였습니다.

이번 포스트에서는 본격적으로 Firebase에서 제공해주는 사용자 인증 API를 사용하여 회원가입 및 로그인 서비스를 구현하도록 하겠습니다.

본문

사전 준비

Firebase 연결하기

포스트의 내용을 참고하여 앞서 생성한 로그인 프로젝트를 Firebase 프로젝트와 연결합니다.

추가로 파이어베이스의 사용자 인증 기능을 사용할 예정이므로 라이브러리의 인증모듈(AngularFireAuthModule)도 import 합니다.

▼ /src/app/app.module.ts

import { NgModule } from '@angular/core';  
// ... 생략  
// Angular Fire
import  { AngularFireModule }  from  '@angular/fire';
import  { AngularFireAuthModule }  from  '@angular/fire/auth';  // ← 추가
import  { environment }  from  '../environments/environment';

@NgModule({  
  imports:  [ 
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatToolbarModule, 
    MatIconModule,
    MatInputModule,
    MatDividerModule,
    MatCardModule,
    MatTabsModule,
    FontAwesomeModule,
    FlexLayoutModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule  // ← 추가
],

기능 추가

구글 아이디로 로그인

Client API ID 및 Client API Secrete Key를 요구하지 않는 가장 간단한 구글 로그인을 먼저 설정해 보도록 하겠습니다.

최종적으로 구글, 페이스북, 트위터를 통한 로그인 기능을 Angular 애플리케이션에서 사용해보도록 하겠습니다.

Firebase 소셜 로그인 설정

파이어베이스 프로젝트에서 사용자 인증을 사용할 수 있도록 설정할 필요가 있습니다.

(1) 파이어베이스 콘솔에서 생성한 프로젝트로 이동합니다.
(2) 개발 => Authentication 으로 이동합니다.

▲ 콘솔 → (우측)메뉴 → 인증

(3) 로그인 방법 설정 탭을 선택합니다.

▲ 파이어베이스 로그인방법

 

로그인 제공업체 항목에서 Google을 선택합니다. 사용 설정을 활성화합니다.
프로젝트 지원 이메일에 자신의 이메일 주소를 입력 후 설정을 저장합니다.

▲ 파이어베이스 구글로그인설정

 

※ 만약 local 환경에서 진행하지 않고 있다면(예를 들어 stackblitz.com) 승인된 도메인 항목에 해당하는 주소를 추가해 줄 필요가 있습니다.

auth 서비스

이제 다시 Angular 프로젝트로 돌아와 해당 기능을 연결하도록 합니다. 로그인 기능은 여러 컴포넌트에서 공통적으로 사용하게 되는 기능이므로 Angular의 서비스를 사용하여 작성합니다.

다음의 Angular-Cli 명령어를 사용하여 Angular 서비스를 생성합니다.

$ ng g service auth

생성한 Service가 app.module의 provider 항목으로 추가됩니다.

▼ /src/app/app.module.ts

import { NgModule } from '@angular/core';  
// ... 생략  
import  { AuthService } from './auth.service';  // ← 추가되었습니다.
@NgModule({  
  imports:  [ 
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatToolbarModule, 
    MatIconModule,
    MatInputModule,
    MatDividerModule,
    MatCardModule,
    MatTabsModule,
    FontAwesomeModule,
    FlexLayoutModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
],
  declarations:  [ AppComponent ],
  bootstrap:  [ AppComponent ],
  providers:  [AuthService]	  // ← 추가되었습니다.
})  
export class AppModule { }  

지금부터 구현할 auth 서비스는 파이어 베이스 사용자 인증 기능의 핵심으로 다음과 같은 일을 합니다.

• 로그인/로그아웃을 진행합니다.
• 현재 로그인한 사용자 정보를 프로퍼티로 저장합니다.
• (추후) 회원정보를 파이어베이스의 데이터베이스(RealTime DataBase 또는 Cloud FireStore)에 저장합니다.

생성된 auth 서비스에 다음과 같이 코드를 작성합니다.

▼ /src/app/auth.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

import { Observable } from 'rxjs';
import firebase from 'firebase/app';

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

  constructor(public afAuth: AngularFireAuth) {
    this.user = this.afAuth.authState;
  }

  fnlogin() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  fnlogout() {
    this.afAuth.auth.signOut();
  }  
}

페이스북 아이디로 로그인

페이스북의 아이디를 사용한 사용자 인증을 Angular 애플리케이션에서 사용하기 위해서는 Facebook 애플리케이션을 Facebook 개발자 페이지에서 생성해야 합니다. 해당 페이지에 제시된 절차에 따라 새로운 어플리케이션을 만듭니다.

새로운 애플리케이션을 만들고 나면 어플리케이션과 Id 와 어플리케이션 시크릿 키를 받게 되는데 이를 Firebase 프로젝트에 기입합니다.

파이어베이스의 사용자 인증 항목으로 돌아와서 이번에는 페이스북 항목을 설정하도록 합니다. 이 때 앞선 구글의 로그인 설정 과정과 달리 App ID 와 App secret 키를 입력하는 항목이 있으며 여기에 앞서 받아 놓은 값을 기입하도록 합니다.

▲ 파이어베이스 페이스북로그인설정

 

 

파이어베이스의 페이스북 로그인 설정 화면의 하단에 표시된 OAuth redirect URI 를 페이스북 애플리케이션 설정 페이지에 복사하여 붙여 넣도록 합니다.

▲ 페이스북 로그인 URI설정

 

이제 앞서 만들었던 구글 로그인 기능과 페이스북의 로그인 기능을 동시에 사용할 수 있도록 auth 서비스의 코드를 조금 수정하도록 하겠습니다.

▼ /src/app/auth.service.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

import { Observable } from 'rxjs';
import firebase from 'firebase/app';

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

  constructor(public afAuth: AngularFireAuth) {
    this.user = this.afAuth.authState;
  }

  // 이름변경 (fnLogin → fnGoogleLogin)
  fnGoogleLogin() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }
  // ▼ 추가
  fnFacebookLogin() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }
  fnlogout() {
    this.afAuth.auth.signOut();
  }  
}

auth 서비스 수정사항을 Angular에 반영하도록 하겠습니다.

트위터 아이디로 로그인

트위터 아이디로 로그인하는 과정 역시 페이스북을 통한 로그인 과정과 동일하기 때문에 이에 대한 상세한 기술은 생략하겠습니다.

 

통합

이제 작성한 로그인 기능(매서드)을 UI와 연결하도록 합니다. 이제 작성한 로그인 기능(매서드)을 앞선 포스트에서 작성해 놓았던 UI 와 연결하도록 합니다.

▼ /src/app/app.component.html

...
      <mat-card-content>
        <div fxLayout="row" fxLayoutAlign="space-around center">
          <div fxFlax>
          <!-- ▼ 추가 하였습니다. -->
          <button mat-fab class="google" (click)="auth.fnGoogleLogin()">	
            <fa-icon [icon]="logos[1]" [fixedWidth]="true"></fa-icon>
          </button>
          </div>
          <div fxFlax>
		  <!-- ▼ 추가 하였습니다. -->
          <button mat-fab class="fb" (click)="auth.fnFacebookLogin()">
            <fa-icon [icon]="logos[0]" [fixedWidth]="true"></fa-icon>
          </button>
          </div>
          <div fxFlax>
		  <!-- ▼ 추가 하였습니다. -->
          <button mat-fab class="twitter" (click)="auth.fnTwitterLogin()">
            <fa-icon [icon]="logos[2]" [fixedWidth]="true"></fa-icon>
          </button>
          </div>
        </div>
...

 

기능 확인

로그인 화면에서 자신이 사용하는 SNS의 버튼을 이용하면 팝업창이 발생하며, 자신의 SNS 계정을 사용하여 로그인할 수 있습니다.

▲ 앞서 작성했던 로그인 UI

 

 

로그인 성공 시 다음과 같이 자신의 이름이 화면에 표시되는 것을 확인할 수 있습니다.

▲ 로그인 성공화면

 

결론

간단한 설정을 통해 파이어베이스의 소셜 아이디를 활용한 사용자 인증 방법을 살펴보았습니다. 이와 관련된 코드 및 동작은 본 포스트의 가장 하단의 stackblitz 링크를 통해서 확인할 수 있습니다.

다음은 파이어베이스의 기본 인증 기능인 이메일을 통한 사용자 인증 기능을 살펴보도록 하겠습니다.

※ SNS 별로 동일한 이메일 주소를 계정으로 사용할 경우, 첫 번째 로그인(가입 시 사용한)한 SNS를 통해서만 로그인이 가능합니다. 이에 대한 수정은 다른 포스트에서 진행하도록 하겠습니다.

참고

• 웹 사이트에서 Firebase 인증 시작하기
• 자바스크립트 프로젝트에 Firebase 추가
• 자바스크립트에서 Google 로그인으로 인증하기
• Getting started with Firebase Authentication