300x250
반응형
안녕하세요.
자바스크립트(JSP)로 네이버 로그인 / 카카오 로그인 / 구글 로그인 세가지를
모두 등록하는 방법에 대한 포스팅을 작성해 볼까 합니다.
사용 API 목록
1. 구글(Google) API
2. 네이버(Naver) API
3. 카카오(Kakao) API
API 사이트
1. 구글(Google) API : https://console.developers.google.com/
2. 네이버(Naver) API : https://developers.naver.com/main/
3. 카카오(Kakao) API : https://developers.kakao.com/
API 사이트에서 등록하는 방법은 따로 다루지 않겠습니다.
등록을 다 하셨다면
<head></head> 코드
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="My API KeyNumber.apps.googleusercontent.com">
<!-- KaKao Login Js -->
<script type="text/javascript" src="/자신의경로/자신의경로/kakao.js"></script>
<!-- Google Login Js -->
<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded"></script>
<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>
<script src="/자신의경로/자신의경로/platform.js" async defer></script>
<!-- Naver Login Js -->
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
Kakao.js 와 platform.js는 다운받아서 프로젝트 경로안에 넣어서 사용하였습니다.
<body></body> 코드
<a href="#" id="login">
Login
</a>
<hr>
<!-- Google Login Btn -->
<div class="g-signin2" style="max-width:400px;max-height:60px" data-onsuccess="onSignIn" data-theme="dark" data-width="auto" data-height="60"></div>
<!-- Naver Login Btn -->
<div id="naverIdLogin" >
<a id="naverIdLogin_loginButton">
<img src="https://static.nid.naver.com/oauth/big_g.PNG?version=js-2.0.0" width="100%" height="auto" style="max-width:400px;max-height:60px"/>
</a>
</div>
<!-- KaKao Login Btn -->
<a id="login-form-btn" href="javascript:loginFormWithKakao()">
<img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="100%" height="auto" style="max-width:400px;max-height:60px"/>
</a><script></script> 코드
<script type="text/javascript">
var naverLogin = new naver.LoginWithNaverId({
clientId: "clientId",
callbackUrl: "callbackUrl",
isPopup: false,
/* callback 페이지가 분리되었을 경우에 callback 페이지에서는 callback처리를 해줄수 있도록 설정합니다. */
});
/* (3) 네아로 로그인 정보를 초기화하기 위하여 init을 호출 */
naverLogin.init();
/* (4) Callback의 처리. 정상적으로 Callback 처리가 완료될 경우 main page로 redirect(또는 Popup close) */
window.addEventListener('load', function () {
naverLogin.getLoginStatus(function (status) {
if (status) {
/* (5) 필수적으로 받아야하는 프로필 정보가 있다면 callback처리 시점에 체크 */
console.log(naverLogin.accessToken.accessToken)
var email = naverLogin.user.getEmail();
var profileImage = naverLogin.user.getProfileImage();
var name = naverLogin.user.getName();
var uniqId = naverLogin.user.getId();
if( email == undefined || email == null) {
alert("이메일은 필수정보입니다. 정보제공을 동의해주세요.");
/* (5-1) 사용자 정보 재동의를 위하여 다시 네아로 동의페이지로 이동함 */
naverLogin.reprompt();
return;
}else if( name == undefined || name == null){
alert("회원이름은 필수정보입니다. 정보제공을 동의해주세요.");
naverLogin.reprompt();
return;
}else{
// 성공
}
} else {
console.log("callback 처리에 실패하였습니다.");
}
});
});
Kakao.init('Kakao API Key');
function loginFormWithKakao() {
Kakao.Auth.loginForm({
success: function(authObj) {
Kakao.API.request({
url: '/v2/user/me',
success: function(res) {
console.log(res.kakao_account['email'])
console.log(res.id)
}
})
},
fail: function(err) {
alert(JSON.stringify(err))
},
})
}
$(document).ready(function(){
})
$(function(){
$('#login').on("click",function(){
js_login();
})
$('#naverIdLogin_loginButton').on("click",function(){
var email = $('#naver_email').val();
var password = $('#naver_password').val();
$('.email').val(email);
$('.password').val(password);
});
});
function googleSign(){
}
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
// console.log("ID: " + profile.getId());
// console.log('Full Name: ' + profile.getName());
// console.log('Given Name: ' + profile.getGivenName());
// console.log('Family Name: ' + profile.getFamilyName());
// console.log("Image URL: " + profile.getImageUrl());
// console.log("Email: " + profile.getEmail());
}정말 간단하게 카카오 API / 네이버 API / 구글 API 를 사용해서
구글 로그인 / 네이버 로그인 / 카카오 로그인 등 SNS 로그인 기능을 구현할 수 있습니다.
끝!
300x250
반응형
'Back-End > REST API' 카테고리의 다른 글
| [API]RESTful API 설계 가이드 (0) | 2023.02.09 |
|---|---|
| [API] REST API 제대로 알고 사용하기 (0) | 2023.02.06 |
| [API] JSP-SERVLET 네이버 아이디로 로그인 API (네아로) 사용하기 - 3 (1) | 2023.02.06 |
| [API] JSP-SERVLET 네이버 아이디로 로그인 API (네아로) 사용하기 - 2 (0) | 2023.02.06 |
| [API] JSP-SERVLET 네이버 아이디로 로그인 API (네아로) 사용하기 - 1 (0) | 2023.02.06 |