매일매일 써야지.. 다짐했는데 잘 지켜지지 않았다. 부끄럽다..ㅠㅠ
오늘부터라도 매일 써야겠다.
소셜로그인이 생각보다 굉장히.. 어려웠는데 약 5시간 가량 헤매니까 그래도 개념이 좀 잡혔다.
네이버의 경우,
내 어플리케이션 등록하기에서 등록한다음 콜백 URL을 지정해야 한다.
따라서,
login.html과 mypage.html ( 로그인 후 유저를 리다이렉트 할 곳, 콜백 URL) 두가지 파일이 있어야 한다.
네이버 튜토리얼을 보고 따라하면 되는데, 초심자가 엄청 헷갈리는 포인트는 콜백이 대체 뭐야.. 하는 부분이다.
왜 이걸 굳이 나눠 놓고 하나만 쓰면 된다는 걸 설명해 두지 않았는지 모르겠다.
Web 애플리케이션
Web 애플리케이션
developers.naver.com
login.html 파일에 로그인용 버튼을 만드는 코드를 복붙해서 넣으면 되는데,
2.3 인증 시작하기에 있는 코드 & 2.1.1 라이브러리 적용 샘플코드에 버튼용
<div id="naverIdLogin"></div> 와
loginButton: {color: "green", type: 3, height: 60} /* 로그인 버튼의 타입을 지정 */
만 추가해주면 잘 동작한다.
<html lang="ko">
<head>
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js"
charset="utf-8"></script>
</head>
<body>
<!-- 네이버아이디로로그인 버튼 노출 영역 -->
<div id="naverIdLogin"></div>
<!-- //네이버아이디로로그인 버튼 노출 영역 -->
<!-- 네이버아디디로로그인 초기화 Script -->
<script type="text/javascript">
var naverLogin = new naver.LoginWithNaverId(
{
clientId: "클라이언트ID",
callbackUrl: "콜백URL",
isPopup: false, /* 팝업을 통한 연동처리 여부 */
loginButton: { color: "green", type: 3, height: 60 }, /* 로그인 버튼의 타입을 지정 */
callbackHandle: true
}
);
console.log("hoho", naverLogin)
/* 설정정보를 초기화하고 연동을 준비 */
naverLogin.init();
window.addEventListener('load', function () {
naverLogin.getLoginStatus(function (status) {
if (status) {
/* (5) 필수적으로 받아야하는 프로필 정보가 있다면 callback처리 시점에 체크 */
var email = naverLogin.user.getEmail();
if (email == undefined || email == null) {
alert("이메일은 필수정보입니다. 정보제공을 동의해주세요.");
/* (5-1) 사용자 정보 재동의를 위하여 다시 네아로 동의페이지로 이동함 */
naverLogin.reprompt();
return;
}
window.location.replace("http://localhost:52330/mypage.html");
} else {
console.log("callback 처리에 실패하였습니다.");
}
});
});
</script>
<!-- // 네이버아이디로로그인 초기화 Script -->
</body>
</html>
그리고 mypage.html에서 access token이나 유저 정보를 가져올 수 있다.
설명:
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<title>NaverLoginSDK</title>
</head>
<body>
로그인 완료
<script>
var naver_id_login = new naver_id_login("클라이언트ID", "콜백URL");
console.log(naver_id_login.oauthParams.access_token);
naver_id_login.get_naver_userprofile("naverSignInCallback()");
function naverSignInCallback() {
alert(naver_id_login.getProfileData('email'));
alert(naver_id_login.getProfileData('nickname'));
}
</script>
</body>
</html>
이걸 리액트로 리팩토링을 어떻게하나.. 막막했는데,
[TIL] 2차 프로젝트 기억하고 싶은 코드 1. Naver 소셜로그인
◎ 뒤늦게 2차 프로젝트를 진행할 때 기억하고 싶은 코드에 대해 블로깅한다. 2차 프로젝트 때 나를 가장 괴롭혔던 naver 소셜 로그인... 유일하게 우리 프로젝트만 naver 소셜 로그인을 사용하였다.
jindev-t.tistory.com
블로그 글이 있어서 금방 해결했다. 해당 블로그와 똑같이 코드를 썼는데, 이슈는 따로 없고 로그인이 잘 동작한다.
타입스크립트를 쓰고 있어서
TIL - 네이버 로그인 API in React + TypeScript
clientId: 자리에 본인 api 신청시 받은 id를 입력해줘야 한다.callbackUrl: 콜백 url에 등록해 놓은 url 입력. 안해주면 안됨...callbackHandlke: true로 설정해 놓으면 해당 페이지는 callback페이지로의 동작을
velog.io
블로그를 참고해서 코드를 완성 시켰다. 남은 과제는.. 네이버 버튼을 css를 맞추는 것인데.. 허헛.
import React, { useEffect } from 'react';
declare global {
interface Window {
naver: any;
}
}
export default function NaverLogin() {
const { naver } = window;
const Login = () => {
Naver();
};
useEffect(Login, []);
function Naver() {
var naverLogin = new naver.LoginWithNaverId({
clientId: 'q1SVdfaPG3tcJmMo1vM8',
callbackUrl: 'http://localhost:3000/mypage',
isPopup: false /* 팝업을 통한 연동처리 여부 */,
loginButton: { color: 'green', type: 3, height: 60 } /* 로그인 버튼의 타입을 지정 */,
callbackHandle: true,
});
naverLogin.init();
}
return (
<div id="naverIdLogin" onClick={Login}>
네이버로그인
</div>
);
}
레퍼런스가 생각보다 거의 없는 네이버 소셜 로그인.. 많이 쓰이는 것 같으면서도 의외로 또 옥션이라던지 꽤 크다 싶은 사이트들에서는 안쓰이고 있었다.
속도를 더 내야 파이널 프로젝트를 마무리 할텐데; 8주차 중에 벌써 2주차 절반정도가 지났는데 기본 기능밖에 구현이 안되서 큰일이다. 요즘 왜 이렇게 공부하기가 싫은지 미쳐버리겠다.. ㅠㅠ 사실 다른게 재밌는거겠지만.. ㅠㅠ
다이어트까지 하니까 스트레스 대박.
후.. 얼마 안남았으니 두달간 열심히 해서 유종의 미를 거두어야 겠다.
'TIL' 카테고리의 다른 글
| 20.11.26 FINAL PROJECT- Review 구현 (0) | 2020.11.26 |
|---|---|
| 20.11.15 FINAL PROJECT- SOCIAL LOGIN 구현 & 로그아웃 구현 (0) | 2020.11.15 |
| 2020.09.12 카카오 코딩테스트, shortly express (0) | 2020.09.13 |
| 2020.09.09 (0) | 2020.09.10 |
| 2020.09.06 (0) | 2020.09.07 |
댓글