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

개요

대부분의 웹 애플리케이션(웹 앱)은 어떠한 유형이라도 사용자 인증 기능이 공통적으로 사용됩니다.

많은 웹 앱은 외부 SNS 서비스 또는 이메일을 통한 로그인 기능을 제공합니다. 또한 사용자와의 커뮤니케이션 및 상호작용을 통해 콘텐츠를 생성하는 웹 앱은 이러한 사용자의 정보를 저장할 필요가 있습니다.

사용자 인증 서비스를 직접적으로 개발을 하는 것은 최소의 개발인력 또는 1인 개발자로 구성된 웹 어플리케이션의 개발에는 적합하지 않을 수 있습니다. 다행히도 파이어베이스는 모바일 및 웹 앱 모두에서 사용 가능한 사용자 인증 서비스를 제공하기 때문에 이를 직접 개발할 필요 없이 쉽게 Angular 프로젝트에 설정하여 적용할 수 있습니다.

이번 포스트에서는 파이어베이스의 사용자 인증 서비스를 사용하여 여러분의 애플리케이션에 회원가입과 로그인 기능을 제공해보도록 하겠습니다.

이번 포스트 및 다음 포스트를 통해 소개할 사용자 인증 방법은 다음과 같습니다.

• 페이스북
• 구글
• 이메일, 암호

이를 위한 사전작업은 아래와 같습니다. (각 포스트를 참고하여 진행하도록 합니다.)

• Angular 개발환경을 구성합니다.
• Angular Project 를 생성합니다.
• Angular Material 라이브러리를 설치합니다.
• (아이콘의 사용을 위한) 폰트 어썸 폰트를 설치합니다.
• Flex Layout 설치
• Firebase 프로젝트를 생성 및 설정합니다.

화면 구성

우선 로그인을 위한 화면을 구성하도록 하겠습니다. 완성해 볼 화면은 다음과 같습니다.

최종 구현한 로그인 화면

 

Angular Material 모듈 추가

Angular Material 은 화면을 구성하는 다양한 컴포넌트(모듈)로 구성이 되어 있으며, 이를 사용하기 위해서는 필요한 모듈을 Angular 모듈에 Import 해야 합니다. 이번 로그인 화면을 구성하기 위해 /src/app/app.module.ts 에 MatButton, MatInput, MatTollbar, MatIcon, MatCard, MatTabs 모듈을 Import 하였습니다.

▼ /src/app/app.module.ts

import  { NgModule }  from  '@angular/core';
import  { BrowserModule }  from  '@angular/platform-browser';
import  { FormsModule }  from  '@angular/forms';
import  { BrowserAnimationsModule }  from  '@angular/platform-browser/animations';

// Angular Material
// ▼ 이하의 내용 추가
import  { MatButtonModule }  from  '@angular/material';
import  { MatInputModule }  from  '@angular/material/input';
import  { MatToolbarModule }  from  '@angular/material/toolbar';
import  { MatIconModule }  from  '@angular/material/icon';
import  { MatCardModule }  from  '@angular/material/card';
import  { MatTabsModule }  from  '@angular/material/tabs';

// FlexLayout
import  { FlexLayoutModule }  from  '@angular/flex-layout';  

// FontAwesome
import  { FontAwesomeModule }  from  '@fortawesome/angular-fontawesome';
import  { AppComponent }  from  './app.component';  

@NgModule({
  imports:  [ BrowserModule, FormsModule, BrowserAnimationsModule, 
              MatButtonModule, 		// ← 추가
              MatCheckboxModule,	// ← 추가 
              MatToolbarModule,		// ← 추가
              MatIconModule,		// ← 추가
              MatInputModule,		// ← 추가
              MatCardModule,		// ← 추가
              MatTabsModule,		// ← 추가
              FontAwesomeModule,
              FlexLayoutModule ],
  declarations:  [ AppComponent ],
  bootstrap:  [ AppComponent ]
})

export  class AppModule {  }

▼ /src/app/app.component.ts

import  { Component }  from  '@angular/core';
import  { faFacebookF, faGooglePlusG, faTwitter }  from  '@fortawesome/free-brands-svg-icons';	// ← 추가

@Component({
  selector:  'my-app',
  templateUrl:  './app.component.html',
  styleUrls:  [  './app.component.css'  ]
})

export  class AppComponent {
  hide =  true;										// ← 추가
  logos =  [faFacebookF, faGooglePlusG, faTwitter];	// ← 추가
}

각 SNS의 로고를 사용하기 위하여 FontAwesome의 모듈을 import하였습니다. import한 각 로고 아이콘은 속성(logos)에 저장하였습니다.

암호 입력란의 암호 보이기/감추기 기능을 위한 속성(hide)를 Component에 추가합니다.

import 한 모듈을 이용하도록 합니다.

▼ /src/app/app.component.html

<mat-card>
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <span>Login</span>
      <span class="spacer"></span>
      <button mat-icon-button>
        <mat-icon class="icon" aria-label="Close">close</mat-icon>
      </button>
    </mat-toolbar-row>
  </mat-toolbar>
  <mat-tab-group mat-stretch-tabs>
    <mat-tab label="Log In">
      <div class="padding">
      </div>
      <mat-card-content>
        <div fxLayout="row" fxLayoutAlign="space-around center">
          <div fxFlax>
          <button mat-fab class="google">
            <fa-icon [icon]="logos[1]"></fa-icon>
          </button>
          </div>
          <div fxFlax>
          <button mat-fab class="fb">
            <fa-icon [icon]="logos[0]" ></fa-icon>
          </button>
          </div>
          <div fxFlax>
          <button mat-fab class="twitter">
            <fa-icon [icon]="logos[2]" ></fa-icon>
          </button>
          </div>
        </div>

        <hr class="hr-text" data-content="OR">

        <form>
          <div fxLayout="column" fxLayoutAlign="space-around">
            <mat-form-field>
              <input matInput placeholder="이메일">
            </mat-form-field>

            <mat-form-field>
              <input matInput placeholder="암호" [type]="hide ? 'password' : 'text'">
              <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
            </mat-form-field>

            <button mat-button color="primary">로그인</button>
          </div>
        </form>  
      </mat-card-content>
    </mat-tab>
    <mat-tab label="Sign Up">
      <div class="padding">
      </div>
      <form>
        <div fxLayout="column" fxLayoutAlign="space-around">
          <mat-form-field>
            <input matInput placeholder="이메일">
          </mat-form-field>

          <mat-form-field>
            <input matInput placeholder="암호" [type]="hide ? 'password' : 'text'">
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
          </mat-form-field>
                    
          <mat-form-field>
            <input matInput placeholder="암호확인" [type]="hide ? 'password' : 'text'">
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
          </mat-form-field>

        
          <button mat-button color="primary">계정만들기</button>
        </div>
      </form>  

    </mat-tab>
  </mat-tab-group>  
</mat-card>

Angular Material 에 없는 SNS 로고의 사용을 위하여 CSS를 추가합니다.

▼ /src/app/app.component.css

.spacer {
  flex: 1 1 auto;
}

.padding {
  padding: 10px 0px;
}

/* add appropriate colors to fb, twitter and google buttons */
.fb {
  background-color: #3B5998;
  color: white;
}

.twitter {
  background-color: #55ACEE;
  color: white;
}

.google {
  background-color: #dd4b39;
  color: white;
}

.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: .5;
}

.hr-text:before {
  content: '';
  /* background: linear-gradient(to right, transparent, #818078, transparent); */
  background: black;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.hr-text:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 .5em;
  line-height: 1.5em;
  /* color: #818078; */
  background-color: #fcfcfa;
}

이를 통하여 완성된 로그인 폼은 앞서 보았던 화면과 동일합니다. 동작 및 화면은 아래의 데모를 통해 확인할 수 있습니다.