[Vue.js 프로젝트 투입 일주일 전] 13장 - 미니프로젝트: 로그인 처리

13.1 카카오 계정으로 로그인하기

  - 카카오 개발자 센터 가입

  - 애플리케이션 등록

    - 앱 키

      - 네이티브 앱 키: Android, iOS SDK에서 API 호출할 때 사용

      - JavaScript 키: 자바스크립트 SDK에서 API를 호출할 때 사용

      - REST API 키: REST API를 호출할 때 사용

      - Admin 키: 모든 권한을 가지고 있는 키

  - 플랫폼 설정하기

  - 카카오 로그인 활성화

  - 동의항목 설정

  - 카카오 JavsScript SDK 및 앱 키 등록

  - 로그인 컴포넌트 구현

    - window.Kakao.Auth.login 함수 호출 => 카카오 계정으로 로그인 팝업 호출

    - window.Kakao.Auth.logout 함수 호출 => 로그아웃

13.2 네이버 아이디로 로그인하기

  - 오픈 API 이용 신청

  - 약관동의

  - 계정 정보 등록

  - 애플리케이션 등록

  - 네이버 JavaScript SDK 등록

  - 로그인 컴포넌트 구현

    - 네이버에서는 별도의 로그아웃 함수 제공 X

    - 로그아웃 하려면 로그인 시 발급받은 토큰 삭제 필요

    - CORS 관련 에러 발생 이슈로 vue.config.js에 proxy 등록해서 임시로 사용 가능

13.3 구글 계정으로 로그인하기

  - 프로젝트 생성

  - 사용자 인증 정보 생성

  - 구글 플랫폼 라이브러리 로드하기

  - 클라이언트 ID 설정

  - 구글 로그인 버튼 추가하기

  - 사용자 프로필 정보 가져오기

  - 로그아웃

    - window.gapi.auth2.getAuthInstance().disconnect()

---

[Source Code] Ch 13. 미니프로젝트: 로그인 처리