인증 (가입/로그인)

Firebase 인증 튜토리얼

지금까지 만든 애플리케이션은 별도의 인증 과정 없이 누구나 백엔드(Firebase)에 접근하여 데이터를 변경 조작할 수 있습니다. 하지만 제공되는 서비스에서는 인증을 통해 사용자를 식별하고, 권한을 부여할 수 있도록 해야 합니다.

Firebase 인증

Firebase 프로젝트 Authentication 메뉴를 선택한 후, 로그인 방법 설정 버튼을 누릅니다.

이메일 사용 설정을 체크한 후, 저장 버튼을 눌러 서비스에 이메일로 가입, 로그인 할 수 있도록 설정합니다.

이메일 외에도 인증할 수 있는 다양한 방법을 Firebase는 제공하고 있습니다.

가입 인증 API

Firebase에서 제공하는 이메일 / 패스워드로 가입하기 API를 참고하여 프로젝트에 인증 코드를 추가합니다.

Endpoint URL에 HTTP POST 요청 하여 인증 signupNewUser를 시도할 수 있다고 안내하고 있습니다.

Firebase Sign up Endpoint
https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=[API_KEY]

폼 이벤트 핸들링

관리자 인증 페이지(client/pages/admin/auth/index.vue)를 열어 폼 전송 이벤트의 기본 동작을 차단하고, onSubmit 메서드를 연결하는 코드를 작성합니다. 메서드 내부에서 @nuxtjs/axios 모듈 코드를 사용해 엔드포인트 URL로 POST 요청을 보내는 코드를 추가하고, 서비스를 사용하기 위해 필요한 API 키를 입력해야 합니다.

client/pages/admin/auth/index.vue
<template lang="pug">
.page-admin-auth.container
form.auth-form(@submit.prevent="onSubmit")
<!-- ... -->
</template>
<script>
export default {
methods: {
onSubmit() {
const API_KEY = '' // API 키 필요
this.$axios.$post(`https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=${API_KEY}`)
}
}
}
</script>

API 키(Key)

Firebase Authentication 페이지에서 웹 설정 버튼을 누르면 웹 앱에 Firebase 추가 모달 창이 화면에 표시됩니다.

화면에 표시된 모달 창에서 config.apiKey 값을 복사합니다.

보안 이슈

복사한 API 키를 onSubmit 메서드 내부 API_KEY 상수에 할당할 수 있습니다. 하지만 이렇게 프론트 엔드 코드에 보안과 관련된 중요한 키 값을 남겨두면 안됩니다.

nuxt.config.js 파일을 열어 env 객체에 APIKey 속성을 추가한 후, Firebase API 키 값을 설정합니다.

onSubmit 메서드로 돌아와 API_KEY 값을 process.env.APIKey 로 설정합니다. 이렇게 하면 프론트 엔드 코드에 보안과 관련된 코드를 노출 시키지 않을 수 있습니다.

client/pages/admin/auth/index.vue
<script>
export default {
methods: {
onSubmit() {
// nuxt.config.js > env.APIKey 값을 API_KEY로 사용
const API_KEY = process.env.APIKey
this.$axios.$post(`https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=${API_KEY}`)
}
}
}
</script>

@nuxtjs/dotenv 모듈을 사용하여.env파일에서 보안과 관련된 중요한 정보를 보관하는 방법으로 보안을 향상 시킬 수 있습니다.

인증 요청

API 문서를 보면 인증 절차에 필요한 POST 요청 시, 요구되는 전송 값은 3가지(email, password, token) 입니다.

폼 인풋 컨트롤에 v-model 디렉티브를 추가해 식별 가능한 데이터 값(email, password)을 각각 설정합니다.

client/pages/admin/auth/index.vue
<template lang="pug">
.page-admin-auth.container
form.auth-form(@submit.prevent="onSubmit")
ui-input(
type="email",
uniqueId="email",
v-model="email") 이메일 주소
ui-input(
type="password",
uniqueId="password",
v-model="password") 비밀번호
<!-- ... -->
</template>

컴포넌트의 dataemail, password 속성을 추가한 후, 기본 값을 설정합니다. 그리고 onSubmit 메서드 내 axios 요청 코드에 전송할 객체(payload)를 설정하고 then, catch 구문을 추가하여 통신 성공/실패를 출력하는 코드를 추가합니다.

client/pages/admin/auth/index.vue
<script>
export default {
// ...
data() {
return {
isLogin: true,
email: '',
password: ''
}
},
methods: {
onSubmit() {
const API_KEY = process.env.APIKey
this.$axios.$post(
`https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=${API_KEY}`,
{
email: this.email,
password: this.password,
returnSecureToken: true
}
)
.then(result => console.log(result))
.catch(e => console.error(e))
}
}
}
</script>

인증 확인

관리자 인증 페이지(localhost:3000/admin/auth)로 이동하여 이메일, 비밀번호 입력 후 회원가입 버튼을 눌러 Firebase 서비스에 인증 요청을 보냅니다. Firebase와의 통신이 성공하면 Console 패널에 결과 값이 출력됩니다.

그리고 Firebase 프로젝트 Authentication 사용자에 회원가입 한 사용자 정보가 등록된 것을 볼 수 있습니다.

로그인 인증 API

이메일/패스워드 로그인 인증 API 문서를 참고해 로그인 인증을 진행해봅니다.

Endpoint URL이 다른 점 외에는 앞서 다룬 가입 인증과 거의 유사합니다.

Firebase Sign in Endpoint
https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=[API_KEY]

인증 요청 코드 수정

로그인 상태에 따라 Firebase에 요청하는 Endpoint가 달라지도록 authURL 코드를 작성합니다.

methods: {
onSubmit() {
const API_KEY = process.env.APIKey
// 로그인 상태(isLogin)에 따라 Firebase에 요청하는 Endpoint 경로를 변경
// 가입 인증일 경우(비 로그인): signupNewUser
// 로그인 인증일 경우: verifyPassword
const authURL = `https://www.googleapis.com/identitytoolkit/v3/relyingparty/${
!this.isLogin ? 'signupNewUser' : 'verifyPassword'
}?key=${API_KEY}`
this.$axios
.$post(authURL, {
email: this.email,
password: this.password,
returnSecureToken: true
})
.then(result => console.log(result))
.catch(e => console.error(e))
}
}

로그인 인증 확인

가입 인증 과정에서 가입한 계정 정보를 입력한 후, 로그인 버튼을 누르면 Firebase에서 유효한 사용자 정보를 반환합니다. Console 패널에 출력된 사용자 정보를 확인할 수 있습니다.

이미 가입된 계정 정보를 입력한 후, 회원가입 버튼을 누르면 오류 처리 결과가 화면에 출력됩니다.

참고

Firebase Auth REST API : 이메일 / 패스워드 가입 인증
Firebase Auth REST API : 이메일 / 패스워드 로그인 인증