파이어 베이스는 각종 앱을 쉽게 만들기 위해 제공되는 프로젝트 플랫폼입니다. OAuth2 로그인, 데이터베이스, 기계학습과 호스팅 등을 제공합니다. 파이어 베이스를 잘 활용하면 비용 없이 앱 서비스를 제공이 가능합니다. 또한, 구글에서 제공되는 다양한 확장 기능을 통합할 수 있습니다.
필자는 AWS 기반으로 개인적인 프로젝트를 진행한 적이 있는데 이때 서버의 운영비용이 개인적으로 부담하기에는 지불해야 할 비용이 높았습니다. 물론 제공되는 서버의 사양도 낮아서 간혹 메모리 부족으로 죽는 현상도 발생하였습니다.
이번 연재에서는 파이어 베이스 기반의 OAuth2 로그인과 데이터베이스를 사용하는 예제를 위주로 설명합니다. 그리고 추가적으로 카카오와 네이버의 OAuth2를 파이어 베이스에 확장 적용하는 방법에 대해서도 구현할 예정입니다.
연재는 아래와 같은 순서로 작업할 연재할 예정이며 순서는 달라질 수 있습니다.
프로젝트 생성
인증
이 번 글에서는 페이스북과 연동하는 방법에 대해서 설명합니다.
페이스북 앱 생성하기
앱 프로젝트 생성하기
페이스북 앱 개발자에 접속하여 신규 프로젝트를 생성합니다.
https://developers.facebook.com/apps/
용도 선택하기
저는 로그인만 사용할 계획으로 기타를 선택하였습니다.
앱 ID 만들기
표시 할 앱 이름을 입력합니다. 연락처는 기본값으로 현재 로그인한 계정 정보가 입력됩니다.
앱 제품 추가
아래의 화면에서 Facebook 로그인의 설정을 클릭합니다.
플랫폼 연결
웹을 클릭하여 필요한 정보를 설정합니다.
앱 시크릿 코드 확인하기
[프로젝트 메뉴 > 설정 > 기본 설정]으로 이동하여 프로젝트 정보를 확인합니다. 아래의 화면에서 앱 시크릿코드의 보기를 클릭하여 앱 시크릿코드 정보를 확인합니다. 앱 ID와 앱 시크릿코드는 파이어 베이스 프로젝트에서 사용합니다.
파이어 베이스 프로젝트 수정하기
페이스북 로그인 활성화
페이스북 프로젝트 설정 > Authentication > Sign-in method에서 페이스북 로그인을 사용 설정합니다. 이때 페이스북 앱 ID와 앱 시크릿코드가 필요합니다. 그리고 파이어 베이스 OAuth 리디렉션 URI를 복사합니다.
페이스북 로그인 설정 변경
[페이스북 프로젝트 메뉴 > 제품 > Facebook 로그인 > 설정]에서 유효한 OAuth 리디렉션 URI부분에 파이어베이스 설정에서 복사한 값을 넣고 설정을 저장합니다.
프로젝트 수정하기
로그인 버튼 추가
페이스북 로그인 버튼을 아래 화면과 같이 추가합니다.
버튼 클릭 이벤트 처리
페이지 전환 방식 : 현재의 페이지가 페이스북으로 접속한 다음 로그인 완료시 앱으로 돌아온 후 콜백을 처리합니다.
팝업 창 방식 : 페이스북 로그인 화면을 팝업창으로 띄우고 로그인 완료시 창을 닫고 현재 페이지에 콜백을 처리합니다.
facebook() {
// Sign in using a redirect. 페이지 전환 방식
firebase.auth().getRedirectResult().then(function(result) {
if (result.credential) {
// This gives you a Google Access Token.
var token = result.credential.accessToken;
}
var user = result.user;
console.log(user);
})
// Start a sign in process for an unauthenticated user.
var provider = new firebase.auth.FacebookAuthProvider();
// provider.addScope('user_birthday');
firebase.auth().signInWithRedirect(provider);
// Sign in using a popup. 팝업창 방식
var provider = new firebase.auth.FacebookAuthProvider();
// provider.addScope('user_birthday');
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Facebook Access Token.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log(user);
});
},
로그인 테스트
페이지 전환 방식 페이스북 로그인
팝업창 방식 페이스북 로그인
오류 처리
유효하지 않은 리디렉션 URI 오류
아래와 같은 메시지가 표시되는 경우는 페이스북앱에 유효한 리디렉트 URI를 지정하지 않은 경우입니다. 윗부분의 유효한 리디렉션 URI부분을 참고하십시오.
auth/account-exists-with-different-credential 오류
전자우편 주소가 다른 인증방식에서 이미 사용중인 경우에 나타나는 오류입니다. 이때는 지금의 인증방식과 이미 사용중인 인증방식을 병합하여 로그인이 되도록 처리해야 합니다.
수정방법
// Sign in using a popup.
var provider = new firebase.auth.FacebookAuthProvider();
// provider.addScope('user_birthday');
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Facebook Access Token.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
console.log(user);
_this.isSignin = true;
_this.$router.push("/profile");
})..catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
// ...
console.log(error);
// console.log(errorCode, errorMessage);
if(errorCode === "auth/account-exists-with-different-credential") {
// User's email already exists.
// Get sign-in methods for this email.
firebase.auth().fetchSignInMethodsForEmail(email).then(function(methods) {
console.log(methods);
// Step 3.
// If the user has several sign-in methods,
// the first method in the list will be the "recommended" method to use.
if (methods[0] === 'password') {
// Asks the user their password.
// In real scenario, you should handle this asynchronously.
// TODO: implement promptUserForPassword.
// var password = promptUserForPassword();
var password = prompt(email + "계정의 암호를 입력하십시오.");
firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {
return user.linkWithCredential(credential);
}).then(function() {
// account successfully linked to the existing Firebase user.
_this.isSignin = true;
_this.$router.push("/profile");
});
return;
}
// All the other cases are external providers.
// Construct provider object for that provider.
// TODO: implement getProviderForProviderId.
var provider = _this.getProviderForProviderId(methods[0]);
// At this point, you should let the user know that they already has an account
// but with a different provider, and let them validate the fact they want to
// sign in with this provider.
// Sign in to provider. Note: browsers usually block popup triggered asynchronously,
// so in real scenario you should ask the user to click on a "continue" button
// that will trigger the signInWithPopup.
firebase.auth().signInWithPopup(provider).then(function(result) {
// Remember that the user may have signed in with an account that has a different email
// address than the first one. This can happen as Firebase doesn't control the provider's
// sign in flow and the user is free to login using whichever account they own.
// Link to Google credential.
// As we have access to the pending credential, we can directly call the link method.
result.user.linkAndRetrieveDataWithCredential(credential).then(function(usercred) {
// Account successfully linked to the existing Firebase user.
_this.isSignin = true;
_this.$router.push("/profile");
});
});
});
}
참고자료
파이어 베이스 페이스북 연동 가이드
https://firebase.google.com/docs/reference/js/firebase.auth.FacebookAuthProvider
페이스북 앱 관리
https://developers.facebook.com/apps/
여러 공급업체를 하나의 계정에 연결하기
https://cloud.google.com/identity-platform/docs/link-accounts?hl=ko
소스코드
본 포스트 관련 소스코드는 여기에서 다운로드 가능합니다.
