Python 에서 Flask의 활용을 공부하던 중이었지만, 사실상 Flask는 서버 역할만 하고, javascipt로만 구현되어있기 때문에 javascipt 카테고리로 구분하였습니다.
사실상 로그인 구현에 필요한 모든 코드는 NAVER Developers 에 모두 잘 정리가 되어있습니다. 그걸 받아다가 원하는 포맷으로 가공해서 사용하기만 하면 됩니다, 하지만 막막하고 어려움을 겪을 수 있으니 한번 정리해보겠습니다!
developers.naver.com/docs/login/web/web.md
Web 애플리케이션 - LOGIN
네이버 아이디로 로그인은 서버 사이드 언어인 PHP나 Java로 개발한 웹 애플리케이션에도 적용할 수 있습니다. 또한 프런트엔드에서 사용하는 JavaScript를 사용해도 적용할 수 있습니다. API 호출 예
developers.naver.com
일단 제일 먼저 위에서 오픈API 신청을 해야합니다.
네이버에서는 네이버 아이디로 로그인하기를 줄여서 '네아로' 라고 표현하고 있습니다.
사용 API에서 선택하세요를 누르고 네아로를 꼭 등록하세요
테스트용이니 모든 정보를 필수로 등록해서 해보았습니다.
PC웹으로 서비스를 등록했습니다. 서비스 URL은 localhost , http://127.0.0.1 을 등록 했는데요, http://localhost 해도 될거같네요. Callback URL은 중요합니다. 나중에 콜백시킬때 URL이 일치하지 않으면 리다이렉트가 안됩니다. 접속성공했을때 리다이렉트 시킬 url 주소를 적습니다.
본인의 네이버 아이디 말고 다른 아이디로도 테스트를 해보고 싶으면 멤버를 등록해두어야 합니다. 정식으로 서비스 등록이 되기 전에 개발목적 테스트는 등록된 아이디 안에서만 할 수 있습니다. 애플리케이션을 등록한 네이버 계정은 따로 등록하지 않아도 테스트 ID로 사용할 수 있습니다. 이정도면 네이버에서의 준비는 끝났습니다.
from flask import Flask
from flask.templating import render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template("APIExamNaverLogin.html")
@app.route('/login')
def login():
return render_template("callback.html")
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80)Flask 에서 서버를 켜줄 코드입니다. 사실 서버는 편하신 프로그램 사용하시면 됩니다만, Flask가 쉽긴 합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>네이버 로그인</title>
<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>
</head>
<body>
<!-- 네이버아이디로로그인 버튼 노출 영역 -->
<div id="naver_id_login"></div>
<!-- //네이버아이디로로그인 버튼 노출 영역 -->
<script type="text/javascript">
var naver_id_login = new naver_id_login("여기에 Client ID를 써주세요", "http://127.0.0.1/login");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("white", 2,40);
naver_id_login.setDomain("YOUR_SERVICE_URL");
naver_id_login.setState(state);
naver_id_login.setPopup();
naver_id_login.init_naver_id_login();
</script>
</html>
APIExamNaverLogin.html 입니다. 사실 네이버에서 샘플로 제공하는 그대로 입니다.
14번 라인은 꼭 고쳐주세요 "여기에 Client ID를 써주세요" 쪽에 본인의 client ID를 써주시면 됩니다.
Client ID는 네이버 개발자센터의 내 애플리케이션 에서 확인 할 수 있습니다.
이번엔 callback.html 입니다.
<!doctype html>
<html lang="ko">
<head>
<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>
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("YOUR_CLIENT_ID", "YOUR_CALLBACK_URL");
// 접근 토큰 값 출력
$('body').append('<h4>접속토큰:'+naver_id_login.oauthParams.access_token+'</h4>');
// 네이버 사용자 프로필 조회
naver_id_login.get_naver_userprofile("naverSignInCallback()");
// 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
function naverSignInCallback() {
const email = naver_id_login.getProfileData('email');
const nickname = naver_id_login.getProfileData('nickname');
const name = naver_id_login.getProfileData('name');
const age = naver_id_login.getProfileData('age');
const gender = naver_id_login.getProfileData('gender');
const birthday = naver_id_login.getProfileData('birthday');
const mobile = naver_id_login.getProfileData('mobile');
let body = $('body');
body.append('로그인 성공!');
body.append('<h4>이메일:'+email+'</h4>');
body.append('<h4>닉네임:'+nickname+'</h4>');
body.append('<h4>이름:'+name+'</h4>');
//body.append('<h4>나이:'+age+'</h4>');
body.append('<h4>성별:'+gender+'</h4>');
body.append('<h4>생일:'+birthday+'</h4>');
body.append('<h4>전화번호:'+mobile+'</h4>');
}
</script>
</body>
</html>네이버에서는 alert로 데이터를 제공하는 코드를 샘플로 제공하고 있어서 그냥 body에 다 붙여버렸습니다.
서버를 켜고 네이버 아이디로 로그인을 해보겠습니다.
혹시 위와 같은 redirect 에러가 난다면 등록되지 않은 URL 이기 때문입니다.
저는 위와 같은 주소로 등록했기 때문에 ,위의 주소로 접속해야만 됩니다.
다시 접속 주소를 바꿔서 네이버 로그인 버튼을 누르면,
위와 같이 미리 등록해둔 필수 동의를 하고 로그인 할 수 있도록 되어있습니다.
이제 OK 버튼을 누르면
성공적으로 로그인 되어서 접속 정보들을 받아 올 수 있습니다.
'Programming > javascrlpt' 카테고리의 다른 글
| TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor) (0) | 2021.06.01 |
|---|---|
| JavaScript 드래그 할 수 있는 HTML 요소 만들기 (0) | 2021.05.23 |
| Quick template for Jquery Ajax calls (0) | 2021.05.15 |
| javascript 카카오 아이디로 로그인하기 구현 (0) | 2021.03.26 |
| Javascript 에서 쿠키 사용하기 (1) | 2021.02.20 |