네이버 로그인에 이어서 카카오 로그인 예제도 진행해보자

카카오 로그인 구현의 흐름은 다음과 같다.

1. API 신청 및 설정
2. 본인 서비스 웹페이지에 카카오 로그인 버튼 생성
3. 로그인을 진행하여 접근 인가 코드 받기
4. 접근 인가 코드를 활용하여 엑세스 토큰 받기
5. 엑세스 토큰을 활용하여 사용자 정보 받기

카카오 로그인 구현은 네이버 로그인보다 좀 복잡하다.

네이버는 로그인을 하면 인증 처리를 내부적으로 실행하여 바로 사용자 정보를 건네줬지만,

카카오는 사용자 정보를 주기 전에 엑세스 토큰(Access Token)을 준다.

이 엑세스 토큰을 가지고 사용자 정보를 한번 더 요청을 해야한다.

1. 애플리케이션 추가

https://developers.kakao.com/

• 카카오 개발자 센터로 접속한다.

• 로그인 API를 이용할 애플리케이션을 추가한다.

• 생성된 애플리케이션을 선택하여 좌측 상단 메뉴에서 앱 키로 이동하면 API 키가 있다.
• 이 JavaScript 키를 잘 보관해둔다.

2. 애플리케이션 설정

• 다음과 같이 카카오 로그인 API를 이용할 내 서비스 도메인 주소를 등록한다.

• 애플리케이션을 등록하면 본인이 사용할 API를 활성화 해야한다.
• 카카오 로그인을 활성화 해준다.
• 로그인 이후 사용자 정보에 대한 접근이 이루어질 Redirect(Callback) URL도 등록한다.

• 로그인하는 사용자가 정보제공에 동의하게끔 하여 서비스에서 사용자들의 해당 정보를 제공받을 수 있다.
• 제공받길 원하는 개인정보를 선택하여 활성화 한다.
• 여러 정보를 제공받기 위해서는 개인정보 동의항목 심사를 받아야한다. 과정이 복잡하니 따로 설명하지 않겠다.

3. 카카오 로그인 SDK 로드 및 초기 설정

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js" integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous"></script>

• 카카오 로그인 API를 사용하기 위해서는 SDK 라이브러리를 임포트 해야한다.
• 카카오 로그인 버튼이 들어갈 HTML에 넣어주자.

<a id="kakao-login-btn" href="javascript:loginWithKakao()">
    <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="190" alt="카카오 로그인 버튼" />
</a>

• 다음과 같이 카카오 로그인 버튼을 생성해 준다.

Kakao.init('본인의 JavaScript 키'); // 카카오 로그인 SDK 초기화 함수
Kakao.isInitialized();

function loginWithKakao() {
    Kakao.Auth.authorize({
        redirectUri: 'http://localhost:8045/login/oauth2/code/kakao',
    });
}

• 애플리케이션의 JavaScript 키와 등록했던 리다이렉트를 넣어 초기화한다.
• 카카오 로그인 SDK 초기화하는 코드를 다음과 같이 스크립트에 넣는다.

4. 엑세스 토큰 및 사용자 정보 가져오기

저 로그인 버튼을 누르면 카카오 로그인창이 출력될 것이다.

로그인이 잘 완료가 되면 설정해줬던 Redirect URL로 인가 코드가 전달이 된다.

그 인가코드로 엑세스 토큰을 요청하면 된다.

인가코드 Redirect URL 전달  ->  Redriect URL에서 인가코드로 엑세스 토큰 요청  ->  그대로 이어서 사용자 정보 요청

필자같은 경우에는 스프링 서버를 끼고서 작업했기 때문에 리다이렉트 URL 매핑 메소드를 하나 만들어줬다.

@GetMapping("/login/oauth2/code/kakao")
public String kakaoLoginCallback(@RequestParam String code, Model model) {
    model.addAttribute("kakaoAuthCode", code);
    return "login/kakaoLoginCallback"; // kakaoLoginCallback.html 리턴
}

• 인가코드를 받아서 HTML 페이지에 다시 전달하는 기능만 구현된 매핑 메소드이다.

    function requestToken() {
        $.ajax({
            type: 'POST',
            url: 'https://kauth.kakao.com/oauth/token',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8")
            },
            data: {
                grant_type : 'authorization_code',
                code : `[[${kakaoAuthCode}]]`,
                redirect_uri : 'http://localhost:8045/login/oauth2/code/kakao',
                client_id : '본인의 Client ID',
            },
            success: function(result) {
                getKakaoUserInfo(result.access_token)
            },
            error: function() {
                console.log("토큰 에러");
            }
            
        })
    }

    function getKakaoUserInfo(accessToken) {
        Kakao.Auth.setAccessToken(accessToken);
        Kakao.API.request({
            url: '/v2/user/me',
            data: {
                property_keys: ['kakao_account.profile.nickname', 'kakao_account.email']
            },
        }).then(function(response) {
            let nickname = response.kakao_account.profile.nickname
            let email = response.kakao_account.email
            console.log(nickname)
            console.log(email)
        }).catch(function(err) {
            alert('실패 '+JSON.stringify(err))
            
        });
    }

• 다음과 같이 엑세스 토큰을 받아 사용자 정보를 요청하는 함수를 작성한다.
• 다행히도 사용자 정보 요청 기능은 SDK에 구현이 되어 있으니 Kakao.API.request 형태로 코드를 작성하면 된다.
• property_keys: ['kakao_account.profile.nickname', 'kakao_account.email']: 제공받고 싶은 사용자 정보를 적어서 요청할 수 있다.
• 프로퍼티 요청 양식은 다음 사이트의 '사용자 정보 가져오기' 가이드를 참고한다.
• https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

※ 결과

자바스크립트로 네이버 로그인 API를 구현하는 예제를 진행해보자

전체적인 흐름은 다음과 같다.

1. 네이버 개발자센터에서 API 등록
2. 본인 서비스 웹 페이지에 로그인 버튼 생성
3. 리다이렉트 URL을 이용하여 사용자 정보 로드

1. 애플리케이션 등록

https://developers.naver.com/main/

• 네이버 개발자 센터 홈페이지로 접속한다.

• 좌측 상단 메뉴에서 Application -> 애플리케이션 등록 메뉴로 이동하여 다음과 같이 등록한다.
• 사용 API: API로 부터 받고싶은 사용자 정보를 체크한다.
• 네이버 로그인 Callback URL: 로그인 후 이동하여 사용자 정보를 받아서 이용할 URL을 입력한다.

• 애플리케이션을 생성하면 다음과 같이 Client ID를 확인할 수 있는데 잘 기억해둔다.

2. 내 웹페이지에 네이버 로그인 버튼 생성

<!-- 네이버 로그인 라이브러리 CDN -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

• 다음과 같이 네이버에서 제공하는 로그인 라이브러리를 CDN 방식으로 로드한다.
• jQuery 라이브러리도 필요하기 때문에 제이쿼리도 로드한다.
• 이 스크립트 임포트 문을 본인의 HTML에 붙여넣는다.

  <!-- 네이버 로그인 버튼 노출 영역 -->
  <div id="naver_id_login"></div>
  
  <!-- 로그인 버튼 설정 --> 
  <script type="text/javascript">
  	var naver_id_login = new naver_id_login("API 클라이언트 ID", "본인의 콜백 URL");
  	var state = naver_id_login.getUniqState();
  	naver_id_login.setButton("green", 3,40);
  	naver_id_login.setDomain("본인의 서비스 URL");
  	naver_id_login.setState(state);
  	naver_id_login.setPopup();
  	naver_id_login.init_naver_id_login();
  </script>

• <div id="naver_id_login"></div>: 로그인 버튼이 생성될 div 태그이다. 자리하고 싶은 위치에 해당 코드를 넣는다.
• <script type="text/javascript">: 네이버 로그인 API를 스크립트 상에서 이용하기 위해 클라이언트 ID, 콜백 URL 등의 정보를 넣고 생성된 객체를 이용하여 로그인 버튼을 내맘대로 커스텀해본다. 필자는 초록색으로 설정했다.

버튼이 잘 생성되었는지 결과를 확인해보자

• 로그인 버튼에 콜백 URL을 설정했기 때문에 버튼 클릭 후 로그인창이 나오면 로그인 후 해당 URL로 넘어간다.
• 해당 URL에서 로그인 정보를 지지고 볶고할 수 있다.

3. Callback URL을 통한 페이지에서 사용자 정보 받기

<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

• 콜백 URL 페이지에서도 역시나 네이버 로그인 라이브러리와 jQuery를 임포트한다.

<script type="text/javascript">
  var naver_id_login = new naver_id_login("API 클라이언트 ID", "본인의 콜백 URL");
  // 접근 토큰 값 출력
  alert(naver_id_login.oauthParams.access_token);
  // 네이버 사용자 프로필 조회
  naver_id_login.get_naver_userprofile("naverSignInCallback()");
  // 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
  function naverSignInCallback() {
	let userId = naver_id_login.getProfileData("email");
	let name = naver_id_login.getProfileData("name");
	let gender = naver_id_login.getProfileData("gender");
	let birthMonth = String(naver_id_login.getProfileData("birthday")).split("-")[0];
	let birthDay = String(naver_id_login.getProfileData("birthday")).split("-")[1];
	alert(`${userId}, ${name}, ${gender}, ${birthMonth}, ${birthDay}`);
  }
</script>

•  다음과 같이 로그인 정보 값을 받아와 alert으로 출력한다.

※ 결과

웹에서는 기본적으로 마우스 휠을 이용하여 스크롤하지만,

모바일웹에서는 터치 드래그를 이용하여 스크롤을 한다.

이처럼 웹에서도 비슷하게 마우스 클릭 드래그를 이용하여 스크롤기능을 만들어보자.

텍스트나 이미지 등의 콘텐츠가 그것을 담는 div 태그보다 콘텐츠의 사이즈가 큰 경우,

해당 태그는 overflow 속성을 사용하기 때문에 스크롤이 생기게 된다.

이 때 해당 브라우저에서 자바스크립트의 스크롤을 하는 기능과 마우스의 여러 이벤트를 적절히 조합해서 클릭 드래그 기능을 구현 할 수 있다.

사용할 마우스의 이벤트로는 mousedown, mousemove, mouseup 3가지가 있다.

코드 부분을 간략하게 보자

var dragFlag = false;
var x, y, pre_x, pre_y;

$(function () {
    $('.content-right').mousedown(
        function (e) {
            dragFlag = true;
            var obj = $(this);
            x = obj.scrollLeft();
            y = obj.scrollTop();

            pre_x = e.screenX;
            pre_y = e.screenY;
        }
    );

    $('.content-right').mousemove(
        function (e) {
            if (dragFlag) {
                var obj = $(this);
                obj.scrollLeft(x+ 2.2*(pre_x-e.screenX));
                obj.scrollTop(y - e.screenY + pre_y);
                return false;
            }
        }
    );

    $('.content-right').mouseup(
        function () {
            dragFlag = false;
        }
    );
});

먼저, 클릭으로 인해 mousedown 이벤트가 발생하면  특정 boolean 값의 변수, dragFlag를 true로 변경하여,

드래그 상태임을 나타낸다.

두 번째로, mousemove 이벤트에서는 드래그 상태인지 아닌지를 판별하여 드래그 상태에서만

스크롤이 될 수 있도록 로직이 담겨있다. 

mousemove 이벤트가 발생하면서 드래그 상태라면, 즉 마우스를 꾹 누르고 있는 상태에서 마우스가 움직이면 스크롤을 진행하는 로직을 담는다.

마지막으로, mouseup 이벤트를 통해, 마우스 클릭 상태가 풀리면 드래그 상태를 false로 변경하여 더 이상 마우스를 움직여도 스크롤이 되지 않는다.

암스테르담의 기적

특정 화면을 로드할 때 해당 화면에 들어가는 컨텐츠(이미지, 텍스트)를 서버에서 가져와야 하는 경우가 있다.

이럴 때 보통 ajax 기법을 사용.

하지만, ajax 요청을 보낸 후 서버에서 데이터를 처리하는 작업량이 많을 경우,

요청에서 응답까지의 시간이 꽤 걸리는 일이 생긴다.

그렇게 사용자를 페이지에 노출되기 까지 흰색 바탕의 화면만 보고 있게 할수는 없으니

이때 ajax에서 제공해주는 ajaxStart, ajaxStop을 한번 사용해보자.

$(document).ajaxStart(function() {
  // 로딩화면을 보여줄 코드
});

$(document).ajaxStop(function() {
  // 로딩화면을 숨기는 코드
});

워낙 제공 코드가 가독성이 좋아서 이해하는데 어려움이 없었다.

1. ajaxStart

  - 문자그대로 ajax 요청이 시작하게 되면 실행할 코드를 넣어준다.

  - 로딩화면을 보여주어야 하니 $('#loadingImage').show(); 와 같은 코드가 우선일 것이다.

2. ajaxStop

  - ajax 요청이 중지되거나, 마무리 되면 실행할 코드를 넣어준다.

  - 로딩화면을 숨겨야 하니 마찬가지로 $('#loadingImage').show(); 와 같은 코드가 우선일 것.

이미지 인쇄기능을 만들어야 하는데 마스킹 기능을 포함하여 구현해야 함.

※ 마스킹: 이미지, 텍스트 등 원하는 부분을 가림.

일단 마스킹 기능은 이미지 뷰어 내에서 마스킹 추가 버튼을  누르면,

회색 배경의 조그만 박스 div가 생기고, 이것을 드래그 하여 가리고 싶은 부분에 드래그하여 올려놓을 수 있음.

이제 특정 부분이 가려진 채로 인쇄를 어떻게 해야할까 찾아보다가

이 상황에 딱 맞는 라이브러리인 html2canvas 라이브러리를 알게 됨

1. html2canvas

• JavaScript의 캡쳐 라이브러리.
• QuerySelector, jQuery 등으로 캡쳐하고 싶은 DOM 영역을 가져와서 해당 영역의 자식 영역까지 캡쳐가 가능함.
• 예를 들어, mainImageBox라는 ID값을 가진 박스에 이미지태그와 마스킹 박스가 존재하면 두 요소 모두 캡쳐가 가능.
• 결론적으로, 마스킹이 적용된 이미지 캡쳐가 가능하다는 얘기.
• 비동기 처리 방식이기 때문에 캡쳐 후, 다운로드 및 인쇄 기능을 구현할 때에 주의하며 코드를 작성해야 함.

본격적으로 코드를 작성해보자.

	html2canvas(document.getElementById('mainImageBox'), {scale: 4, dpi: 300,}).then(canvas => {
		const image = new Image();
		image.src = canvas.toDataURL('image/png');

		printWindow = window.open('', '_blank');
		printWindow.document.open();

		printWindow.document.write('<img src="' + image.src + '" alt="" style="height: 100%;"><br>');
		printWindow.document.body.style.display = 'flex';
		printWindow.document.body.style.justifyContent = 'center';
		
	}).then(() => {
		printWindow.onafterprint = function() {
			printWindow.close();
		};
		printWindow.print();
	});

html2canvas(document.getElementById('mainImageBox'), {scale: 4, dpi: 300}):

• 캡쳐가 이루어지고 있는 코드임. mainImageBox 라는 아이디 값의 DOM 요소의 캡쳐를 진행함.
• 두 번째 인자로 이미지에 대한 옵션을 지정해줄 수가 있음. scale은 이미지의 줌 배율이고 dpi는 해상도에 대한 옵션.

.then(canvas => {
const image = new Image();
image.src = canvas.toDataURL('image/png');

printWindow = window.open('', '_blank');
printWindow.document.open();

printWindow.document.write('<img src="' + image.src + '" alt="" style="height: 100%;"><br>');
printWindow.document.body.style.display = 'flex';
printWindow.document.body.style.justifyContent = 'center';

})

• 앞서 말했듯이 html2canvas는 비동기 방식, 즉 promise를 리턴하기 때문에 캡쳐가 완료된 canvas를 then으로 체인.
• Image 태그를 하나 생성해서 캡쳐가 진행된 canvas를 완전한 이미지로 변환.
• 프린트 방식은 새창을 열어서 인쇄될 이미지를 넣어주는 방식.

.then(() => {
printWindow.onafterprint = function() {
printWindow.close();
};
printWindow.print();
});

• 좀 더 안정적인 동기적 흐름을 위해 인쇄하는 코드 부분을 한번 더 then으로 체인.