Gomdori

[자바스크립트(JSP)] 네이버,카카오,구글 API 사용하여 SNS 로그인 추가하기. 본문

코딩(Coding)

[자바스크립트(JSP)] 네이버,카카오,구글 API 사용하여 SNS 로그인 추가하기.

Ghomdori 2020. 7. 16. 14:01

안녕하세요.

자바스크립트(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());
}

 

 

추가 과금없는 저렴한 무제한트래픽 웹호스팅 추천(WebHosting)

안녕하세요. 오늘은 추가과금없이 저렴하게 무제한 트래픽을 이용할 수 있는 웹호스팅을 추천하려고 합니다. 보통 잘 알려진 카페24(cafe24) / 가비아 등 웹호스팅업체를 사용하는데요. 카페 24 같�

shihis123.tistory.com

 

정말 간단하게 카카오 API / 네이버 API / 구글 API 를 사용해서

구글 로그인 / 네이버 로그인 / 카카오 로그인 등 SNS 로그인 기능을 구현할 수 있습니다.

끝!

저작자표시 비영리 동일조건

'코딩(Coding)' 카테고리의 다른 글

[Android] 안드로이드 스튜디오 GPS 위도/경도 거리 계산법  (0) 2020.10.08
Unsupported major.minor version 52.0  (1) 2020.09.01
[자바스크립트] PhoneNumber/휴대폰 번호/연락처 양식 자동으로 설정해주는 방법  (0) 2020.07.16
[Android App] 안드로이드 랜덤채팅(Random Chat) 프로젝트 판매합니다.  (0) 2020.07.15
[Android] android.view.InflateException: Binary XML file line #9: Error inflating class <unknown>  (0) 2020.06.24
'코딩(Coding)' Related Articles more
Comments