[카카오 로그인 사전설정]
들어가서 내애플리케이션 들어가서 만들고
햄버거클릭 > 플랫폼 > WEB 플랫폼 등록 > 도메인 등록 http://localhost:8080
아래 등록하러가기 클릭
활성화 설정 ON => 활성화
OpenID Connect 활성화 On
Redirect URI > 등록 http://localhost:8080/myapp/ajax/web_loginok.do
햄버거클릭 > 앱 키
REST API 키 : 이거쓸거면 써
자스키 : 이거쓸거면 써
코드에 따라 둘중에 하나 골라잡아 쓰기
햄버거 클릭 > 카카오 로그인 동의항목
회색 사용못하는거는 돈내면 사용 가능 건당40원 ㅠ
닉네임 설정 필수동의 / 동의 목적 직접 넣기
프로필사진은 잘 사용안함 뭐 쓰고싶다면 설정하기
프로필사진 선택동의
친구목록 사용중동의는 전화옴 개발자맞냐고 개인정보라 민감
이용중동의 선택
접근권한 설정
메세지동의 선택동의
카카오디벨로퍼 홈페이지 > 아래쪽 카카오 로그인 문서보기 클릭 > 왼쪽 햄버거 카카오로그인 디자인가이드
https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
리소스 다운로드 png 다운로드
코드짤때 아이콘으로 사용
https://developers.kakao.com/tool/demo/login/login
여기 페이지 아래쪽 코드 잘 긁어와서 Javascrip 사용
[코드]
kakao.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 및 외부 API 로그인 방식(Kakao) - ECMA</title>
</head>
<body>
<form id="frm" method="post" action="./ajax/web_loginok.do">
<input type="hidden" name="code" value="1">
아이디 :
<input type="text" name="mid"><br>
패스워드 :
<input type="password" name="mpass"><br>
<input type="submit" value="로그인"><br>
</form><br><br>
<img src="./ajax/kakao_login.png" onclick="loginWithKakao()">
<p id="token-result"></p>
</body>
<!-- 카카오 로그인 API -->
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka" crossorigin="anonymous"></script>
<script>
Kakao.init('자스키'); // 사용하려는 앱의 JavaScript 키 입력
</script>
<script>
function loginWithKakao() {
Kakao.Auth.authorize({
redirectUri: '사전설정한 redirectUri 입력 ',
});
}
// 아래는 데모를 위한 UI 코드입니다.
displayToken()
function displayToken() {
var token = getCookie('authorize-access-token');
if(token) {
Kakao.Auth.setAccessToken(token);
Kakao.Auth.getStatusInfo()
.then(function(res) {
if (res.status === 'connected') {
document.getElementById('token-result').innerText
= 'login success, token: ' + Kakao.Auth.getAccessToken();
}
})
.catch(function(err) {
Kakao.Auth.setAccessToken(null);
});
}
}
function getCookie(name) {
var parts = document.cookie.split(name + '=');
if (parts.length === 2) { return parts[1].split(';')[0]; }
}
</script>
<script>
document.querySelector("#frm").addEventListener("submit",function(e){
//ECMA에서 submit사용시
//return;, return false;가 없음 => .preventDefault(); 사용해서 강제정지
e.preventDefault();
if(frm.mid.value==""){
alert("아이디를 입력하세요");
frm.mid.focus();
}else if(frm.mpass.value==""){
alert("패스워드를 입력하세요");
frm.mpass.focus();
}else{
frm.submit();
}
console.log(e);
alert("test");
})
</script>
</html>Spring 컨트롤러
@RequestMapping("/ajax/web_loginok.do") //post도 받고 Get도 받아야됨
public String web_loginok() {
return null;
}
* 해당 코드는 로그인 클릭시 카카오 로그인 창이 팝업창으로 뜨지 않음
이렇게 로그인을하면 무료버전이라 정보가 몇개 없음
> 카카오 로그인을 시킨 후 회원가입 페이지로 넘김 > 추가 정보 입력
고유값도 중요하지만 로그인 플랫폼을 테이블에 남겨야함
카카오를 무료로 쓰는 홈페이지는 돈안쓴다는거 보안 안봐도 뻔함 ㅠ (쌤피셜)