What is kakao loing?

OAuth 2.0 기반의 사용자 인증기능

---

카카오 개발자 센터 가입

"카카오 개발자 센터"에서 회원가입을 합니다.

내 어플리케이션 등록

"내 어플리케이션"을 들록하면, 카카오 개발자 센터에서 key를 하나 만들어 줍니다.
키의 종류 : 네이티브 앱키, 자바스크립트 키, REST API 키, Admin 키

플랫폼 설정하기

web/ android/ ios ... 중에서 선택합니다.
ex) 웹 일경우 사이트 도메인을 등록합니다.

Redirect URI 등록

카카오 로그인 활성화를 하고 Redirect URI 를 등록합니다.
사용자 동의 화면에서 "동의하고 계속하기" 버튼을 누르고 Redirect URI를 등록합니다.

Login.vue 파일을 만들어서 로그인을 구현할 경우 http://localhost:8080/login 을 입력하고 저장버튼을 누릅니다.

카카오 로그인 동의 항목 설정

> 내 어플리케이션 > 제품 설정 > 카카오로그인> 동의항목 으로 이동합니다.

---

카카오 javascript SDK 및 앱키 등록

head 태그에 아래의 코드를 추가합니다. (자세한 내용은 웹 검색)

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

발급받은 javascript app key를 코드에 넣기

main.js 파일을 열고 제일 하다엔 앱 키 넣기

 winddow.kakao.inint("6177...fdsd");

---

코드 구현 하기

아직 다듬어지지 않은 샘플 코드 입니다. 개발해보며 얻은 정보를 주석에 추가할 예정 입니다.

//vue3
method:{
  kakaoLogin() {
    window.Kakao.Auth.login( {
      scope : 'profile, account_email', // 카카오 개발자 센터에서 동의한 항목의 ID
      success: this.getKakaoAccount,
    })
  },
  kakaoLogout(){
   	window.Kakao.Auth.logout( (response)=>{
      //logout
      console.log(response);
  }
  ,
 getKakaoAccount() {
   url: ...
   success : res => {
     const kakao_account = res.kakao_account;
     const nickname = kakao_account.profile.nickname;
     const email = kakao_account.email;
     alert("Login Success");
   },
   fail: error=> {
     console.log(error);
   }