<!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 src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<!-- 카카오 로그인 버튼 노출 영역 -->
<div id="kakao-login-btn">
<img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222" alt="카카오 로그인 버튼" onclick="loginWithKakao()" />
</div>
<button id="logout-btn" onclick="kakaoLogout()" style="display:none;">로그아웃</button>
<script>
// 카카오 SDK 초기화
Kakao.init('카카오 JavaScript 키');
function loginWithKakao() {
Kakao.Auth.authorize({
redirectUri: '리디렉션 uri',
scope: 'account_email'
});
}
function kakaoLogout() {
if (!Kakao.Auth.getAccessToken()) {
console.log('Not logged in.');
return;
}
Kakao.Auth.logout(function(response) {
if(response) {
Kakao.Auth.setAccessToken(undefined);
alert("로그아웃되었습니다.");
document.getElementById('kakao-login-btn').style.display = 'block';
document.getElementById('logout-btn').style.display = 'none';
// 세션 스토리지에서 토큰 및 이메일 삭제
sessionStorage.removeItem('kakao_token');
sessionStorage.removeItem('kakao_email');
} else {
alert("잘못된 정보입니다. 관리자에 문의해 주시기 바랍니다.");
}
});
}
window.onload = function() {
// 세션 스토리지에서 이메일 및 토큰 정보 가져오기
var kakao_email = sessionStorage.getItem('kakao_email');
console.log("Stored Kakao email:", kakao_email); // 이메일 확인 로그 추가
if (kakao_email) {
document.getElementById('kakao-login-btn').style.display = 'none';
document.getElementById('logout-btn').style.display = 'block';
}
};
</script>
<!-- 네이버 로그인 버튼 노출 영역 -->
<div id="naver_id_login"></div>
<!-- 로그아웃 버튼 영역 -->
<div id="naver_id_logout" style="display: none;">
<button onclick="Logout()">로그아웃</button>
</div>
<!-- //네이버 로그인 버튼 노출 영역 -->
<script type="text/javascript">
var naver_id_login = new naver_id_login("네이버 키", "리디렉션 uri");
var state = naver_id_login.getUniqState();
naver_id_login.setButton("white", 2,40);
naver_id_login.setDomain("도메인 주소");
naver_id_login.setState(state);
naver_id_login.init_naver_id_login();
function Logout() {
sessionStorage.removeItem("naver_email");
alert("로그아웃되었습니다.");
document.getElementById('naver_id_login').style.display = 'block';
document.getElementById('naver_id_logout').style.display = 'none';
// 네이버 로그아웃
naver_id_login.logout();
}
// 페이지 로드 시 세션 확인하여 로그인 상태 반영
window.onload = function() {
var naver_email = sessionStorage.getItem("naver_email");
if (naver_email) {
document.getElementById('naver_id_login').style.display = 'none';
document.getElementById('naver_id_logout').style.display = 'block';
}
};
</script>
<!-- 구글 로그인 버튼 노출 영역 -->
<div id="g_id_onload" data-client_id="클라이언트 아이디"
data-login_uri="리디렉션 uri" data-auto_prompt="false">
</div>
<div class="g_id_signin" data-type="standard" data-size="large"
data-theme="outline" data-text="sign_in_with" data-shape="rectangular" data-logo_alignment="left">
</div>
<div id="signout_button" style="display: none;">
<button onclick="signOut()">Sign Out</button>
</div>
<script>
window.onload = function() {
var userId = sessionStorage.getItem("google_user_id");
if (userId) {
document.getElementById("g_id_signin").style.display = 'none';
document.getElementById("signout_button").style.display = 'block';
}
};
function signOut() {
sessionStorage.removeItem("google_user_id");
alert("로그아웃되었습니다.");
document.getElementById("g_id_signin").style.display = 'block';
document.getElementById("signout_button").style.display = 'none';
}
</script>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
// JWT 토큰을 '.' 기준으로 세 부분(헤더, 페이로드, 서명)으로 분리
var parts = response.credential.split('.');
// 페이로드 부분 디코딩
var payload = JSON.parse(atob(parts[1]));
// 페이로드 내용 출력, payload.sub 사용자 id 출력
console.log("Decoded JWT payload:", payload);
console.log("User ID:", payload.sub);
// 사용자 ID를 세션 스토리지에 저장
sessionStorage.setItem("google_user_id", payload.sub);
// 메인 페이지로 리다이렉트
window.location.href = "https://dev.colpopspace.com";
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "클라이언트 id",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" }
);
google.accounts.id.prompt(); // One Tap 다이얼로그 표시
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kakao Redirect</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<script>
// 카카오 SDK 초기화
Kakao.init('카카오 JavaScript 키');
window.onload = function() {
var code = new URL(window.location.href).searchParams.get('code');
if (code) {
getAccessToken(code)
.then(data => {
if (data.access_token) {
Kakao.Auth.setAccessToken(data.access_token); // 액세스 토큰 설정
return getUserInfo();
} else {
throw new Error('Failed to obtain access token');
}
})
.then(response => {
const kakao_email = response.kakao_account.email;
if (kakao_email) {
// 세션 스토리지에 이메일 및 토큰 정보 저장
sessionStorage.setItem('kakao_token', Kakao.Auth.getAccessToken());
sessionStorage.setItem('kakao_email', kakao_email);
// 메인 페이지로 리디렉션
window.location.href = '리디렉션 할 uri';
} else {
document.body.innerText = 'Email not available';
}
})
.catch(error => {
console.error(error);
document.body.innerText = 'Login failed';
});
} else {
document.body.innerText = 'Authorization code not found.';
}
};
function getAccessToken(code) {
return fetch(`https://kauth.kakao.com/oauth/token`, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
grant_type: 'authorization_code',
client_id: '클라이언트 id',
redirect_uri: '리디렉션 uri',
code: code
})
}).then(response => response.json());
}
function getUserInfo() {
return Kakao.API.request({
url: '/v2/user/me'
});
}
</script>
</body>
</html><!doctype html>
<html lang="ko">
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
var naver_id_login = new naver_id_login("클라이언트 id", "리디렉션 uri");
// 접근 토큰 값 출력
alert(naver_id_login.oauthParams.access_token);
// 네이버 사용자 프로필 조회
naver_id_login.get_naver_userprofile("naverSignInCallback()");
// 네이버 사용자 프로필 조회 이후 프로필 정보를 처리할 callback function
function naverSignInCallback() {
var email = naver_id_login.getProfileData('email');
alert(email);
sessionStorage.setItem("naver_email", email);
// 로그인 후 메인 페이지로 리디렉션
window.location.href = "메인 페이지 uri";
}
</script>
</body>
</html>네이버 로그인 api사용을 위해서는 jquery를 import 해줘야 함.
로그인 -> code 발급 -> token 발급 -> token으로 유저정보 받아오기 -> sessionStorage에 저장 -> 로그아웃시 sessionStorage 삭제