[kakao API] 사용자정보 (redirectURL?토큰..?😇 퍼블밖에모르는 ㅂr보편)
카카오 디벨로퍼스
앱설정
내 애플리케이션 > 추가하기
비즈니스 > 비즈앱으로 전환 추천 - 가져올수있는 데이터가 달라짐 (but 카카오에게서 심사받아햐함)
앱 키 > 자바스크립트 복사
플랫폼 > Web > 플랫폼 등록
솔직히 여긴 문서에 아주상세히 나와있어서 어려울게 1도없음 걍 과정빠트리지말고 차분히 하기만 하면 됨
제품설정
카카오로그인 > 활성화 설정 ON , Redirect URI 등록 (뭘쓸지 모르겠다면 밑에 로그인부분 참고)
동의항목 > 필요한 정보 선택
문서로 가자
https://developers.kakao.com/docs/latest/ko/index
자바스크립트 게링스탍
https://developers.kakao.com/docs/latest/ko/javascript/getting-started
<script src="https://t1.kakaocdn.net/kakao_js_sdk/${VERSION}/kakao.min.js" integrity="${INTEGRITY_VALUE}" crossorigin="anonymous"></script>
<script>
Kakao.init('JAVASCRIPT_KEY'); //발급받은앱키
Kakao.isInitialized();
console.log(Kakao.isInitialized()); // true 나와야함 false면 다른곳에서도 이닛하고 있나 찾아보기
</script>
로그인
로그인단계 전에 이해하기, 활용하기, 설정하기 어쩌구 있는데 넘 길고 난 읽어도 모르겠음 귀찮음
바로 Javascript 갈겻 https://developers.kakao.com/docs/latest/ko/kakaologin/js
데모 복붙혀 https://developers.kakao.com/tool/demo/login/login
자 여기까지 문제 없이 잘 왔다면 이제부터 시작
function loginWithKakao() {
Kakao.Auth.authorize({
redirectUri: 'https://developers.kakao.com/tool/demo/oauth',
});
}
데모에 있는 내용이다. redirectURL 이 뭘까 읽어도 모르겟고 했는데 결국엔 데이터 처리를 할 곳이라 생각하면 됨
만약 작업하고 있는 페이지 이름이 promotion.html 면 promotion_oauth.html 요정도?? .
아 그리고 쩌 위에 카카오디벨로퍼스에서 작성한 redirectURL 설정한거랑 똑같이 적어줘야한다
채널추가
데이터 처리
자 그럼 이제 oauth.html에서 데이터 처리 어떻게 하냐면
데모에서는 이부분을 확인할수가 없어서 이쪽 지식이 얕은 나한텐 이 과정이 쫌 아니 개빢쏐따찐짜 삼일걸림띠빨:;
인가코드로 토큰발급받기
// 받은 인가 코드 (리다이렉트된 URL에서 code 파라미터 가져오기)
const authorizationCode = new URLSearchParams(window.location.search).get("code");
// 토큰 요청에 필요한 정보
const clientId = "${appkey}"; // 카카오 개발자 콘솔에서 발급받은 JavaScript 앱 키
const redirectUri = "https://${redirectURI}"; // 카카오 개발자 콘솔에 등록한 리다이렉트 URI
// 액세스 토큰 요청
const requestToken = async () => {
try {
const response = await 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: clientId,
redirect_uri: redirectUri,
code: authorizationCode,
}),
});
if (!response.ok) {
throw new Error("토큰 요청 실패: " + response.statusText);
}
const data = await response.json();
if (data.access_token) {
// console.log("액세스 토큰:", data.access_token);
document.cookie = `authorize-access-token=${data.access_token}`;
// 액세스 토큰을 사용하여 사용자 정보 요청
requestUserInfo(data.access_token);
} else {
console.error("토큰 요청 실패:", data);
}
} catch (error) {
console.error("네트워크 오류 또는 토큰 요청 실패:", error);
}
};
앞의 프론트 페이지에서 loginwithKakao 가 잘 됐다면 redirectURI로 인가코드가 잘 전송된다
그리고 이제 정보처리하는 oauth.html 요기에서는 위의 내용대로 받은 인가코드를 토큰요청에 필요한 정보로 바꿔주는 과정이 필요하다
이게 ... 검색결과엿나 gpt에서 가져온 내용이었나 ..암튼 저러케 토큰을 가져와 사용자 정보를 요청할수있다
사용자 정보 요청
// 사용자 정보 요청 함수
const requestUserInfo = async (accessToken) => {
try {
const response = await fetch("https://kapi.kakao.com/v2/user/me", {
method: "GET",
headers: {
Authorization: `Bearer ${accessToken}`,
},
});
if (!response.ok) {
throw new Error("사용자 정보 요청 실패: " + response.statusText);
}
const userInfo = await response.json();
// console.log("사용자 정보:", userInfo);
const name = userInfo.kakao_account.name;
const mail = userInfo.kakao_account.email;
const tel = userInfo.kakao_account.phone_number;
// API로 정보 보내기
// let infoObj = { name, mail, tel }
// usersAPI(infoObj)
// 리다이렉트
window.location.href = "https://${프론트페이지}";
} catch (error) {
console.error("네트워크 오류 또는 사용자 정보 요청 실패:", error);
}
};
// 인가 코드가 있을 때만 토큰 요청 함수 실행
if (authorizationCode) {
requestToken();
}
발급받은 토큰으로 사용자 정보를 요청한다!
데이터전송
// 정보 보내기
const usersAPI = async (infoObj) => {
try {
const response = await fetch("${백앤드에서만들어준데이터전송서버?}", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(infoObj),
});
if (!response.ok) {
throw new Error("사용자 정보 요청 실패: " + response.statusText);
}
} catch (error) {
console.error("네트워크 오류 또는 사용자 정보 요청 실패:", error);
}
}
사실 자바스크립트 강의에서 한번 쭈룩 다루고 지나간 내용인데 실제로 써본건 처음이었다!
그리고 걍 강의만 들을땐 이걸 대체 어케쓰는건지 감이 안와서 바로 다 까먹엇는데 이제 좀 이해가 된 '느낌'???
HELP
진짜 단순히 데모 그대로 가져왔는데도 안될때
1. 내애플리케이션쪽 설정 잘 되어있는지 확인하기
2. 도메인 확인하기. 주소체크 - cafe24.com 주소로 안될때가 있음-> 실서버 주소로 다시 테스트