1. day62-js 카카오 로그인
- google에서 js 쿼리 스트링 값 가져오기 검색
* 예제 - 카카오 로그인 연결
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 카카오 SDK로드 -->
<script src="js/kakao.min.js"></script>
</head>
<body>
<a id="kakao-login-btn" href="javascript:loginWithKakao()">
<img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222" alt="카카오 로그인 버튼" />
</a>
<script>
//1. 카카오 SDK초기화
Kakao.init(''); //내 애플리케이션 자바스크립트 키
console.log(Kakao.isInitialized());
//2.카카오로그인화면 띄우기
//로그인 성공시 페이지 이동 5번
function loginWithKakao() {
Kakao.Auth.authorize({
redirectUri: 'http://127.0.0.1:5501/09Ajax/index05.html',
});
}
//3.인가코드 받아오기
var URLSearch = new URLSearchParams(location.search);
//console.log(URLSearch.get("code"));
if (URLSearch.get("code") != null) {
ajax();
}
//4. 토큰 발급 요청(post 방식, 폼형식)-구글에 fetch post 검색해서 참고(mdn이랑 카카오 설명하고 같이 볼 것)
function ajax() {
//JSON 형식의 POST 요청
// var data = {
// grant_type: "authorization_code",
// client_id: "", //카카오 내 애플리케이션에서 본인 rest api 키
// redirect_uri: "http://127.0.0.1:5501/09Ajax/index05.html",
// code: URLSearch.get("code")
// }
// fetch("https://kauth.kakao.com/oauth/token", {
// method: "POST",
// headers: {
// "Content-Type": "application/json" //..
// },
// body: JSON.stringify(data)
// })
// .then(function (res) {
// console.log(res);
// })
//Form 형식의 POST 요청
//formData 객체 이용 or 문자열
var url = "http://127.0.0.1:5501/09Ajax/index05.html";
var data = "grant_type=authorization_code" +
"&client_id=" + //내 애플리케이션 REST API 키
"&redirect_uri=" + url +
"&code=" + URLSearch.get("code");
fetch("https://kauth.kakao.com/oauth/token", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
// "Authorization" : "Bearer" + 토큰 + "/KakaoAK" + 토큰 //문서-카카오 로그인-rest API-사용자 정보 가져오기
},
body: data
})
.then(function (res) {
return res.json();
})
.then(function (data) {
console.log(data);
//sessionStorage or cookie
sessionStorage.setItem("access_token", data.access_token); //앞에 키, 뒤에가 값(콘솔로그로 찍은 값 개발자 도구로 확인-상황에 따라 다를 수 있음)
//카카오 API 함수-문서, 카카오 로그인, javascript, 토큰 할당하기
Kakao.Auth.setAccessToken(data.access_token);
//토큰을 발급하고 사용자 정보를 받아오기를 호출함(밑에 함수)
requestUserInfo();
})
//5. 사용자 정보 받아오기(문서-카카오 로그인-javaScript에서 사용자 정보 가져오기)
function requestUserInfo() {
//카카오 API 내장 함수를 호출함 - kakao.min.js에 있음
Kakao.API.request({
url: '/v2/user/me',
})
.then(function (res) {
console.log(res);
console.log(res.Kakao_account.email); //사용자 이메일
console.log(res.Kakao_account.profile.nickname); //사용자 닉네임
console.log(res.Kakao_account.profile.profile_image_url); //사용자 프로필
//이 정보를 가지고, 우리 데이터베이스에서 조회 or 로그인 하는 작업으로 연결
//처리하는 페이지로
sessionStorage.setItem("info", JSON.stringify({id: res.kakao_account.email,
nick: res.kakao_account.profile.nickname }) );
location.href = "index06.html";
})
.catch(function (error) {
console.log(error);
});
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>결과 페이지</h3>
<a href="index05.html">로그인 창으로</a>
</body>
</html>
* 카카오, 네이버 등 다른 api 활용해서 가져와보는 연습 해볼 것
'TIL > Javascript' 카테고리의 다른 글
| day64-JS ES6 문법 (0) | 2023.01.12 |
|---|---|
| day62-js (0) | 2023.01.06 |
| day61-js (0) | 2023.01.05 |
| day60-js (0) | 2023.01.04 |
| day59-js (1) | 2023.01.03 |
