Angular Firebase - 사용자 인증 (이메일)

개요

이번에는 이메일을 이용하여 회원가입 및 로그인 기능을 구현하도록 하겠습니다. 이메일을 통한 회원가입 및 로그인 기능은 SNS를 통한 인증과 크게 다르지 않으므로 간단히 진행할 수 있습니다.

파이어베이스에서 이메일/암호 인증 활성화

이메일/암호 인증을 사용할 수 있도록 파이어베이스의 이메일/암호인증 기능을 활성화합니다.

▲  파이어베이스  이메일/암호 인증 활성화

 

Auth Service 추가

앞선 과정에서 사용하였던 auth 서비스를 기반으로 내용을 작성하도록 하겠습니다.

▼ /src/app/auth.service.ts

... 생략 ...

@Injectable()  
export class AuthService {
	authState: FirebaseAuthState = null;  

	constructor(public afAuth: AngularFireAuth) {
		this.user =  this.afAuth.authState;
	}
	... 생략 ...
	▼ 추가
	fnCreateEmailUser(email, password) {
		this.afAuth.auth.createUserWithEmailAndPassword(email, password);
	}
	
	▼ 추가
	fnEmailLogin(email, password) {
		this.afAuth.auth.signInWithEmailAndPassword(email, password);
	}	
}

로그인 폼 연결

작성한 메서드를 로그인 폼의 버튼과 각각 연결해주도록 합니다. 폼의 button 항목을 클릭 시 로그인 및 회원가입 메서드가 호출되도록 설정합니다.

▼ /src/app/app.component.html

... 생략 ...
<form>
	<div  fxLayout="column"  fxLayoutAlign="space-around">
		<mat-form-field>
			<input  #email  matInput  placeholder="이메일">
		</mat-form-field>
		<mat-form-field>
			<input  #passwd  matInput  placeholder="암호"  [type]="hide ? 'password' : 'text'">
			<mat-icon  matSuffix  (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
		</mat-form-field>
		<!-- ▼ 수정 -->
		<button  (click)="auth.fnEmailLogin(email.value, passwd.value)"  mat-button  color="primary">로그인</button>
	</div>
</form>

... 생략 ...
<form>
	<div  fxLayout="column"  fxLayoutAlign="space-around">
		<mat-form-field>
			<input #email  matInput  placeholder="이메일">
		</mat-form-field>
		<mat-form-field>
			<input #password  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 #verification  matInput  placeholder="암호확인" [type]="hide ? 'password' : 'text'">
			<mat-icon  matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
		</mat-form-field>
		<!-- ▼ 수정 -->
		<button (click)="auth.fnCreateEmailUser(email.value, passwd.value)"  mat-button  color="primary">계정만들기</button>
	</div>
</form>
... 생략 ...

동작확인

완성된 폼을 이용하여 사용자 계정을 생성해보겠습니다. 결과는 다음과 같이 파이어베이스 콘솔을 통해서 생성된 사용자 정보를 확인할 수 있습니다.

▲ 이메일 계정 만들기

 

▲ 이메일 로그인  성공 화면

 

▲  파이어베이스  사용자  추가 결과

 

결론

파이어베이스에서 제공해주는 사용자 인증기능의 기본 항목을 구현해 보았습니다. 지금까지 완성한 파이어베이스 로그인 기능의 동작 및 소스코드는 다음의 링크에서 확인해 볼 수 있습니다.

이후에는 로그인 후 접근할 수 있는 영역을 만들고, 로그인 사용자의 상세 정보를 데이터베이스에 저장하는 과정을 진행해보도록 하겠습니다.

참고

• Firebase Sample Source Code for Web