안녕하세요!! 점심식사들은 하셨나요?!?
어제는 이런 일이 있었어요,,,,
크롬에서는 잘 작동하지만, 일렉트론에서는 잘 작동하지 않는 코드때문에 애를 먹었습니다.
크롬에서 잘 돌아가면 당연히 일렉트론에서도 돌아가야지!! 를 굳게 믿고 있었는데... 아직 일렉트론에 대한 공부가 부족한 것 같습니다.
일렉트론에서 alert를 사용하면, input타입이 읽기 전용이 되어버립니다.
로그인 화면을 일렉트론으로 이식하며 발견한 이슈인데요, 원래의 웹에서는 로그인 정보가 잘못되면 alert창으로 경고를 띄웠었습니다. 그러나,,,, 일렉트론은 alert창을 한번 띄우면 입력창이 모두 읽기 전용이 되어버립니다. 사용자의 오타 한번을 용납하지 않는 앱이 되어버리죠!
그래서 일렉트론에서는 Dialog 사용을 권장합니다,,,만
생각해보니 로그인 정보가 틀렸다고 경고창을 띄우는 앱은 초큼 올드하다는 생각이 들어, 읽기전용 라벨을 생성하고, JS로 경고 메시지를 출력하는 식으로 프로그램을 작성해보았습니다.
AWS cognito를 활용한 회원가입과정과 로그인 과정을 살펴보겠습니다.
[회원가입 & 로그인]
[html]
<html>
<head>
<title>다아라 로그인</title>
<link rel="stylesheet" href="style.css">
<!-- Javascript SDKs-->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/amazon-cognito-auth.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.7.16.min.js"></script>
<script src="js/amazon-cognito-identity.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="daAra-logo">
<img src="img/daARA logo 1.png" style="max-width: 100%; height: auto;">
</div>
<div id = "ID_form-wrap" class="form-wrap">
<div class="button-wrap">
<div id="btn"></div>
<button type="button" class="togglebtn" onclick="login()">로그인</button>
<button type="button" class="togglebtn" onclick="register()">회원가입</button>
</div>
<form id="login" action="" class="input-group">
<input type="text" class="input-field" id="inputUsername" placeholder="이메일 주소" name="username" required autofocus>
<input type="password" class="input-field" id="inputPassword" placeholder="비밀번호" name="password" onkeyup="enterKey();" required>
<button class="submit" type="button" id = "sign_in_BTN" onclick="loginButton()">로그인</button>
<input type="text" class="submitErrMSG" id="loginErr" style="color: red;" readonly></textarea>
</form>
<form id="register" action="" class="input-group">
<input type="personalname" class="input-field" id="personalnameRegister" placeholder="아이디" pattern=".*" required>
<input type="email" class="input-field" id="emailInputRegister" placeholder="이메일" pattern=".*" required>
<input type="password" class="input-field" id="passwordInputRegister" placeholder="비밀번호(영문, 숫자, 특수문자)" pattern=".*" required>
<input type="password" class="input-field" id="confirmationpassword" placeholder="비밀번호 재입력" pattern=".*" required>
<button id="mainbutton" class="submit" id = "register_BTN" type="button" onclick="registerButton()">회원가입</button>
<input type="text" class="submitErrMSG" id="registerErr" style="color: red;" readonly></textarea>
</form>
</div>
</div>
<script src="index.js"></script>
<script src = 'js/loginForm.js'> </script>
</body>
</html>[JS]
var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");
var form_wrap = document.getElementById("ID_form-wrap");
var username;
var password;
var personalname;
var poolData;
var cognitoUser = userPool.getCurrentUser()
if (cognitoUser != null)
{
cognitoUser.getSession(function(err, result)
{
if (result)
{
console.log('You are now logged in.');
// Add the User's Id Token to the Cognito credentials login map.
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'YOUR_IDENTITY_POOL_ID',
Logins:
{
'개인정보': result.getIdToken().getJwtToken()
}
});
}
});
}
function login()
{
x.style.left = "50px";
y.style.left = "450px";
z.style.left = "0";
form_wrap.style.height = "290px";
}
function register()
{
x.style.left = "-400px";
y.style.left = "50px";
z.style.left = "110px";
form_wrap.style.height = "390px";
}
function loginButton()
{
var authenticationData =
{
Username : document.getElementById("inputUsername").value,
Password : document.getElementById("inputPassword").value,
};
var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
var poolData =
{
UserPoolId : '개인정보', // Your user pool id here
ClientId : '개인정보', // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var userData =
{
Username : document.getElementById("inputUsername").value,
Pool : userPool,
};
var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
cognitoUser.authenticateUser(authenticationDetails,
{
onSuccess: function (result)
{
var accessToken = result.getAccessToken().getJwtToken();
console.log(accessToken);
location.href='daARA_choice.html'
},
onFailure: function(err)
{
//alert(err.message || JSON.stringify(err));
//location.reload();
document.getElementById("loginErr").value = "아이디/비밀번호를 확인해주세요.";
button = document.getElementById('sign_in_BTN');
},
});
}
function registerButton()
{
personalnamename = document.getElementById("personalnameRegister").value;
username = document.getElementById("emailInputRegister").value;
console.log(personalname)
console.log(username)
if (document.getElementById("passwordInputRegister").value != document.getElementById("confirmationpassword").value)
{
document.getElementById("registerErr").value = "비밀번호가 동일하지 않습니다";
BrowserWindow.getCurrentWindow().reload();
throw "Passwords Do Not Match!"
}
else
{
password = document.getElementById("passwordInputRegister").value;
}
poolData =
{
UserPoolId : '개인정보', // Your user pool id here
ClientId : '개인정보' // Your client id here
};
var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var attributeList = [];
var dataEmail =
{
Name : 'email',
Value : username, //get from form field
};
var dataPersonalName =
{
Name : 'name',
Value : personalname, //get from form field
};
var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);
var attributePersonalName = new AmazonCognitoIdentity.CognitoUserAttribute(dataPersonalName);
attributeList.push(attributeEmail);
attributeList.push(attributePersonalName);
userPool.signUp(username, password, attributeList, null, function(err, result)
{
if (err)
{
//alert(err.message || JSON.stringify(err));
//location.reload();
document.getElementById("registerErr").value = "아이디/비밀번호를 확인해주세요.";
return;
}
cognitoUser = result.user;
//console.log('user name is ' + cognitoUser.getUsername());
document.getElementById("registerErr").value = "확인 이메일을 전송했습니다.";
//change elements of page
//alert('이메일을 전송했습니다. 확인 링크를 클릭해주세요.');
});
}
function enterKey()
{
if (window.event.keyCode == 13)
{
loginButton();
}
}
'다아라 개발기' 카테고리의 다른 글
| [다아라 개발기] 5. 일렉트론 실시간 화면 캡쳐 (2) | 2021.04.16 |
|---|---|
| [다아라 개발기] 3. 파이큐티야 안녕..... (0) | 2021.04.07 |
| [다아라 개발기] 2. PyQt에서 다중 레이아웃 넘나들기 (3) | 2021.03.21 |
| [다아라 개발기] 1. 듀얼 모니터 자동 캡쳐 구현하기 (0) | 2021.03.21 |
| [다아라 개발기] 0. 다아라 프로젝트 (0) | 2021.03.21 |
