Skip to content

S
sejong25
You need to sign in or sign up before continuing.
Commit b3647b9e authored by 18신대성's avatar 18신대성 Committed by 18류지석
Browse files
Options

이메일 가입, 이메일로그인, 구글로그인 구현 

(아직 기능은 없음)
parent 9b13860d
Hide whitespace changes
Inline Side-by-side
Showing with 221 additions and 1 deletion
index.html
View file @ b3647b9e
......@@ -15,9 +15,45 @@
<script src="js/SelectWord.js"></script>
<script src="js/BGMsound.js"></script>
<script src="js/Enums.js"></script>
<style>
img { position: relative; width: 100%; height: 100%; z-index: 0;}
#dvLogin { position: absolute; left: 65%; top: 35%; width: 30%; height: 30%; background: black; z-index: 1;}
</style>
</head>
<body>
<main id="mainTitle">
<img id="titleImg" src="assets/image/background/title.png" alt="title">
<div id="dvLogin">
<input id="userEmail" type="email" placeholder="email" style="width: 100%; height: 10%;"></br>
<input id="userPassword" type="password" placeholder="password" maxlength="17" style="width: 100%; height: 10%;"></br>
<button id="joinBtn" style="width: 100%; height: 10%;">이메일로 가입하기</button></br>
<button id="emailBtn" style="width: 100%; height: 10%;">이메일로 로그인</button></br>
<button id="googleBtn" style="width: 10%; height: 10%;"><img src="assets/title/googleBtn.png" style="object-fit: contain"></button></br>
</div>
</main>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCJIQjnJyQg54MRAmIzKVanYyiLNq628rI",
authDomain: "sejongio.firebaseapp.com",
databaseURL: "https://sejongio.firebaseio.com",
projectId: "sejongio",
storageBucket: "sejongio.appspot.com",
messagingSenderId: "57247216553",
appId: "1:57247216553:web:faa4183e9b0a2614"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="js/Client.js"></script>
<script src="js/Main.js"></script>
<script src="js/FirebaseClient.js"></script>
</body>
</html>
\ No newline at end of file
js/FirebaseClient.js 0 → 100644
View file @ b3647b9e
function FirebaseClient()
{
this.init();
this.initEvent();
}
FirebaseClient.prototype.init = function()
{
this.auth = firebase.auth();
this.googleBtn = document.getElementById('googleBtn');
this.emailBtn = document.getElementById('emailBtn');
this.joinBtn = document.getElementById('joinBtn');
}
FirebaseClient.prototype.initEvent = function()
{
this.auth.onAuthStateChanged(this.onAuthChange.bind(this));
this.googleBtn.addEventListener('click', this.onGoogleBtnClick.bind(this));
this.emailBtn.addEventListener('click', this.onEmailBtnClick.bind(this));
this.joinBtn.addEventListener('click', this.createEmailUser.bind(this));
}
FirebaseClient.prototype.logOut = function()
{
if (confirm('Logout?'))
{
if (this.database)
{
this.database.goOffline();
}
this.auth.signOut();
}
}
FirebaseClient.prototype.onAuthChange = function(user)
{
if (user)
{
console.log('user로그인');
this.setLogin();
}
else
{
console.log('로그아웃');
this.setLogOut();
}
}
FirebaseClient.prototype.setLogin = function()
{
this.database = firebase.database();
this.database.goOnline();
document.getElementById('mainTitle').style.display = 'none';
document.getElementById('titleImg').style.display = 'none';
game = new Phaser.Game(config);
}
FirebaseClient.prototype.setLogOut = function()
{
}
FirebaseClient.prototype.onEmailBtnClick = function()
{
var email = document.getElementById('userEmail').value.trim();
var password = document.getElementById('userPassword').value.trim();
if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) && password.length > 0)
{ // 유효성 체크
var cbSignInEmail = function()
{
return this.auth.signInWithEmailAndPassword(email, password)
.then(function()
{
console.log('이메일 로그인 성공');
})
.catch(function(error)
{
console.error('이메일 로그인 과정 에러', error);
switch(error.code)
{
case "auth/invalid-email":
alert('유효하지 않은 메일입니다');
break;
case "auth/user-disabled":
alert('사용이 정지된 유저 입니다.')
break;
case "auth/user-not-found":
alert('사용자를 찾을 수 없습니다.')
break;
case "auth/wrong-password":
alert("잘못된 패스워드 입니다.");
break;
}
});
}
this.auth.setPersistence(firebase.auth.Auth.Persistence.NONE)
.then(cbSignInEmail.bind(this));
}
}
FirebaseClient.prototype.createEmailUser = function()
{
var email = document.getElementById('userEmail').value.trim();
var password = document.getElementById('userPassword').value.trim();
// 유효성 검증
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
{
var cbCreateUserWithEmail = function(user){
console.log('이메일 가입 성공 : ', JSON.stringify(user));
//프로필 업데이트 - 이메일 가입시 유저이름 파라미터를 보내지 않으므로 가입 성공 후 처리
firebase.auth().currentUser.updateProfile({
displayName: email,
}).then(function() {
console.log('userName 업데이트 성공')
}).catch(function(error) {
console.error('userName 업데이트 실패 : ', error );
});
/*
//인증 메일 발송
this.auth.useDeviceLanguage(); // 이메일 기기언어로 세팅
user.sendEmailVerification().then(function() {
console.log('인증메일 발송 성공')
}).catch(function(error) {
console.error('인증메일 발송 에러', error);
});*/
}
var cbAfterPersistence = function(){
return this.auth.createUserWithEmailAndPassword(email, password)
.then(cbCreateUserWithEmail.bind(this))
.catch(function(error) {
console.error('이메일 가입시 에러 : ', error);
switch(error.code){
case "auth/email-already-in-use":
alert('이미 사용중인 이메일 입니다.');
break;
case "auth/invalid-email":
alert('유효하지 않은 메일입니다');
break;
case "auth/operation-not-allowed":
alert('이메일 가입이 중지되었습니다.');
break;
case "auth/weak-password":
alert("비밀번호를 6자리 이상 필요합니다");
break;
}
});
}
this.auth.setPersistence(firebase.auth.Auth.Persistence.NONE)
.then(cbAfterPersistence.bind(this))
.catch(function(error) {
console.error('인증 상태 설정 중 에러 발생' , error);
});
}
}
FirebaseClient.prototype.onGoogleBtnClick = function()
{
var googleProvider = new firebase.auth.GoogleAuthProvider();
this.auth.setPersistence(firebase.auth.Auth.Persistence.NONE)
.then(this.signInWithPopup.bind(this, googleProvider))
.catch(function(error)
{
console.error('인증 상태 설정 중 에러 발생', error);
});
}
FirebaseClient.prototype.signInWithPopup = function(provider)
{
return this.auth.signInWithPopup(provider).then(function(result)
{
console.log('로그인 성공')
}).catch(function(error)
{
alert('로그인에 실패하였습니다');
console.error('로그인 에러',error);
});
}
document.addEventListener('DOMContentLoaded', function()
{
window.fbClient = new FirebaseClient();
console.log('done load');
});
\ No newline at end of file
js/main.js
View file @ b3647b9e
......@@ -17,7 +17,7 @@ var config = {
scene: [ menuScene, roomScene, gameScene ]
};
var game = new Phaser.Game(config)
var game = null;
//플레이어 정보, 서버 통신시 필요할 듯
//테스트용이므로 차후 수정 요망
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment