JavaScript 로그인 구현 - JavaScript logeu-in guhyeon

웹 연동 자격 증명 예제

다음은 웹 연동 자격 증명을 사용하여 브라우저 JavaScript에서 인증 자격 증명을 얻는 몇 가지 예제입니다. 이러한 예제는 자격 증명 공급자가 애플리케이션으로 리디렉션할 수 있도록 http:// 또는 https:// 호스트 체계에서 실행해야 합니다.

Login with Amazon 예제

다음 코드에서는 Login with Amazon을 자격 증명 공급자로 사용하는 방법을 보여 줍니다.

<a href="#" id="login">
  <img border="0" alt="Login with Amazon"
    src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png"
    width="156" height="32" />
</a>
<div id="amazon-root"></div>
<script type="text/javascript">
  var s3 = null;
  var clientId = 'amzn1.application-oa2-client.1234567890abcdef'; // client ID
  var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

  window.onAmazonLoginReady = function() {
    amazon.Login.setClientId(clientId); // set client ID

    document.getElementById('login').onclick = function() {
      amazon.Login.authorize({scope: 'profile'}, function(response) {
        if (!response.error) { // logged in
          AWS.config.credentials = new AWS.WebIdentityCredentials({
            RoleArn: roleArn,
            ProviderId: 'www.amazon.com',
            WebIdentityToken: response.access_token
          });

          s3 = new AWS.S3();

          console.log('You are now logged in.');
        } else {
          console.log('There was a problem logging you in.');
        }
      });
    };
  };

  (function(d) {
    var a = d.createElement('script'); a.type = 'text/javascript';
    a.async = true; a.id = 'amazon-login-sdk';
    a.src = 'https://api-cdn.amazon.com/sdk/login1.js';
    d.getElementById('amazon-root').appendChild(a);
  })(document);
</script>

Facebook 로그인 예제

다음 코드에서는 Facebook 로그인을 자격 증명 공급자로 사용하는 방법을 보여 줍니다.

<button id="login">Login</button>
<div id="fb-root"></div>
<script type="text/javascript">
var s3 = null;
var appId = '1234567890'; // Facebook app ID
var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

window.fbAsyncInit = function() {
  // init the FB JS SDK
  FB.init({appId: appId});

  document.getElementById('login').onclick = function() {
    FB.login(function (response) {
      if (response.authResponse) { // logged in
        AWS.config.credentials = new AWS.WebIdentityCredentials({
          RoleArn: roleArn,
          ProviderId: 'graph.facebook.com',
          WebIdentityToken: response.authResponse.accessToken
        });

        s3 = new AWS.S3;

        console.log('You are now logged in.');
      } else {
        console.log('There was a problem logging you in.');
      }
    });
  };
};

// Load the FB JS SDK asynchronously
(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/all.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
</script>

Google+ 로그인 예제

다음 코드에서는 Google+ 로그인을 자격 증명 공급자로 사용하는 방법을 보여 줍니다. Google의 웹 자격 증명 연동에 사용되는 액세스 토큰은 다른 자격 증명 공급자와 마찬가지로 access_token 대신에 response.id_token에 저장됩니다.

<span
  id="login"
  class="g-signin"
  data-height="short"
  data-callback="loginToGoogle"
  data-cookiepolicy="single_host_origin"
  data-requestvisibleactions="http://schemas.google.com/AddActivity"
  data-scope="https://www.googleapis.com/auth/plus.login">
</span>
<script type="text/javascript">
  var s3 = null;
  var clientID = '1234567890.apps.googleusercontent.com'; // Google client ID
  var roleArn = 'arn:aws:iam::<AWS_ACCOUNT_ID>:role/<WEB_IDENTITY_ROLE_NAME>';

  document.getElementById('login').setAttribute('data-clientid', clientID);
  function loginToGoogle(response) {
    if (!response.error) {
      AWS.config.credentials = new AWS.WebIdentityCredentials({
        RoleArn: roleArn, WebIdentityToken: response.id_token
      });

      s3 = new AWS.S3();

      console.log('You are now logged in.');
    } else {
      console.log('There was a problem logging you in.');
    }
  }

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/client:plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
 </script>

오늘은 HTML&JS 예제를 하나 들고 왔는데요, 바로 로그인 아이디 패스워드 폼입니다.

저는 어제 HTML, CSS, JavaScript로 로그인 폼을 만들었습니다. 이제 그 스크립트와 파일을 공개할 건 데요,

아, 그리고 이건 절대로!!!!!! 실제로 로그인 폼을 만들 때 이렇게 하시면 안 됩니다. <script>에 아이디와 비밀번호가 나와있기 때문인데요, 다른 파일에 저장을 했다 하더라도 브라우저 개발자 창에서 다 볼 수 있기 때문에 실제로는 절대 이렇게 응용하시면 안 돼요. 이걸 이용해서 간단히 친구와 놀거나 아니면 그냥 CSS 아이디어로 보시는 걸 추천드려요.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @font-face { font-family: 'font'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu//BBTreeGB.woff') format('woff'); font-weight: normal; font-style: normal; } h2 { font-family: 'font', sans-serif; font-size: 25px; } html { text-align: center; } input { width: 80%; height: 50px; border: 2px solid black; padding-left: 10px; } #id_ { font-size: 20px; } #pass_ { font-size: 20px; } #submit { width: 200px; height: 75px; background-color: green; color: white; font-size: 30px; font-family: 'font', sans-serif; transition-duration: 0.5s; cursor: pointer; } #submit:hover { background-color:lightgreen; } </style> </head> <body> <h2 style="font-size:4em;">로그인 폼 예시</h2> <h2>아이디</h2> <form id="idform"> <input type="id" name="id" id="id_" placeholder="아이디를 입력해주세요..."> </form> <h2>패스워드</h2> <form id="passform"> <input type="password" name="pass" id="pass_" placeholder="비밀번호를 입력해주세요..."> </form> <br> <br> <button id="submit">로그인</button> <!--JAVASCRIPT START--> <script> //JS document.getElementById('submit').onclick = function() { var ID = document.getElementById('id_').value; var pass = document.getElementById('pass_').value; if (ID === "1234" && pass === "1234") { alert("로그인 성공!"); } else { alert("로그인 실패!"); } } </script> </body> </html>

제가 여기서 #submit:hover을 했죠? 이건 pseudo classes라고 하는 건데 hover는 마우스를 이 요소 위에 올렸을 때 어떻게 반응할지 정하는 거고 transition은 약간 애니메이션 같은 건데 몇 초에 걸쳐서 바뀔 건지 정하는 거예요.

그리고 em 단위는 쉽게 말해 배수? 제곱수? 약간 이런 개념이에요.

이거는 php와 연동할 때 쓸려고 만들어진 거라고 생각해요. 하지만 자바스크립트와 연동이 되기 때문에 한 번 넣어봤는데 제가 초기에 오류가 나서 안 되나 보다 하고 무시해 버렸습니다.

input 이란 입력을 말하는데요, 입력 태그이고, type은 기본이 text인데 바꿔도 특별한 예약어가 아닌 이상 상관없습니다.

이도 역시 php와 연동을 위한 속성명입니다. 제가 이를 넣은 이유는 자바스크립트(이하 'JS')에서 폼을 지정하고, 점 찍고, 네임 속성을 입력하면 input에서 입력한 게 잡히기 때문에 이렇게 한 거예요.(하지만 마찬가지로 form가 같은 이유로 무산되었습니다.)

input에 입력을 안 했을 때, 텍스트가 잡히도록 만들어진 속성입니다.

이렇게 보이는데요, 이건 제가 CSS로 커스터마이징 한 것입니다.

<!--JAVASCRIPT START--> & //JS

이건 comment라고 하는데요, 개발자들 사이에서 이 코드가 어느 역할을 하는지 알기 위해 약간 메모나 노트 같은 것입니다.

<!-- --> 이건 HTML comment고, // 이건 JS 한 줄 코멘트, /* */는 JS 여러 줄 코멘트입니다.

document.getElementById(elementId)

이건 JS에서 document (보이는 영역) 중 특정한 ID를 가진 요소를 찾는 메서드입니다.

저는 버튼에 'submit' ID를 부여했으니 document.getElementById('submit') 이렇게 했습니다. 참고로 HTML&CSS&JS는 모두 case sensitive입니다. 대문자 소문자를 따로 구별하니 유의하시기 바랍니다.

case sensitive가 아니라고 해도 브라우저에서 혼용할 수 있으니 같은 이름의 ID이지만 대소문자가 다른 그런 ID는 삼가주세요.

var variableName = variableValue

변수를 뜻하는 variable의 약자로 변수를 정의할 때 사용됩니다.

if (argument) { run when argument is true } else if (argument2) { run when argument is false, argument2 is true } else { run when any of arguments are false }

if 문입니다. 만약이라는 뜻이죠. if 한 뒤 괄호 열고 argument을 입력해 줍니다. 이 argument가 참이면 바로 중괄호 열었죠? 첫 번째 중괄호에 담긴 내용을 실행합니다.

else if (argument2) - 만약 첫째 argument가 성립하지 않았고, argument2가 참이면 두 번째 중괄호에 담긴 내용을 실행합니다.

else if는 무한정 만들 수 있습니다.

else - 위 argument가 모두 성립하지 않을 때 (argument1 = 거짓, argument2 = 거짓 ....) 실행합니다.

​

추가 - ID = '1234'를 왜 ID === '1234'라고 할까?

먼저 1234를 "1234" 또는 '1234'라고 하는 이유는 자바스크립트를 포함한 거의 모든 프로그래밍 언어는 1234와 "1234"를 다르게 취급하기 때문입니다. 1234는 숫자, "1234"는 숫자가 아니라 문자로 취급하기 때문이죠. 물론 parseInt()라고 해서 사용자의 아이디와 비밀번호를 숫자로 바꾼 뒤, if 문을 작성해도 되지만 사용자가 입력한 정보가 숫자라는 보장이 없고 문자를 숫자로 바꾸려 노력할 경우(parseInt()는 바꾸지 않고 바꾸려 노력한다고 표현하겠습니다) NaN(Not a Number)이라고 나오기 때문에 오류와 익셉션이 나기 굉장히 쉽습니다. 따라서 그냥 문자열 그대로 if 문을 작성하는 것입니다. 그리고 =를 == 또는 ===로 쓰는 이유는 브라우저가 이걸 정의하는 거라고 생각할 수 있기 때문입니다.

생각해 보세요. var i = 0 여기서는 =를 하나만 사용했죠? 하지만 비교할 때와 정의할 때를 헷갈릴 수 있습니다.

if ( i = 1)이라고 하면 브라우저는 진짜로 i에다가 1을 정의해야 한다고 생각할 수 있으므로 차라리 ==와 ===를 만들어 비교와 정의를 나눠났습니다. 주의하세요. 비교와 정의는 완전히 다릅니다.

​

​

브라우저를 메시지 박스를 띄우게 해서 특정한 내용을 알려줍니다.

비슷한 걸로는 prompt, confirm 등이 있습니다.

​

참고로 string은 실이 아니라 문자열이라는 뜻을, integer은 숫자열이라는 의미를 갖고 있습니다.

​

제가 만든 로그인 패스워드 폼은

위에 올려놨으니 눌러서 다운로드해서 쓰시면 되겠습니다.

여러분이 오늘 배운 걸로 아이디와 비밀번호를 바꿔보고, 지난 시간 배웠던 걸로 나만의 사이트를 만들어보세요! 오직 나만 들어갈 수 있게요.

​

이상 |나무|였습니다.

긴 글 읽어주셔서 감사합니다.