개발동아리

로그인 처리 플로우는 아래와 같다. 인가 코드 받기 -> 토큰 받기 -> 사용자 정보 가져오기 해당 글에서는 인가 코드 받기는 클라이언트 페이지에서, 토큰 받기와 사용자 정보 가져오기는 서버에서 처리할 예정이다. 위 플로우 대로 처리되기 위해 2개의 클라이언트 페이지와 1개의 API가 필요하다. 1. 클라이언트 페이지 구글 로그인 버튼 페이지 구글 로그인 후 Redirect되는 페이지 2. 서버 클라이언트 페이지에서 전달받은 인가코드를 통해 로그인 토큰 발급 및 유저 정보를 조회하는 API 구글 인증 구현 1. 인가 코드 받기 서비스 서버가 구글 인증 서버로 인가 코드 받기를 요청한다. 여기서 얻은 인가 코드는 로그인 토큰을 얻기 위해 사용된다. 클라이언트 페이지에서 구글 로그인창이 노출되고 구글 계정으..

개발환경 Spring Boot Vue.js MySQL 필요한 모듈 설치 Java 11 vue/cli 4.5.4 MySQL 8.0.18 Java, Vue, MySQL 버전은 위와 상이해도 무관하다. 1. Spring Boot 프로젝트 생성 1) Spring Boot 프로젝트 생성 아래 사이트에서 Spring Boot 프로젝트를 생성할 수 있다. https://start.spring.io/ 2) Gradle 설정 build.gradle 구글 로그인 서비스 구현에 필요한 모듈을 설정한다. implementation 'org.springframework.boot:spring-boot-starter' testImplementation 'org.springframework.boot:spring-boot-star..

구글 로그인 API 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담된다. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있다.구글 로그인 API 흐름 구글 로그인의 흐름은 간단하다. 카카오, 네이버 로그인 모두 흐름은 동일하다. 리소스 오너(사이트)가 구글 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 네이버 API 서버에 넘긴다. 전달받은 정보를 가지고 구글 API 서버는 인가 코드를 발급해주고 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다. 자세한 설명은 구글 개발자센터 A..

로그인 처리 플로우는 아래와 같다. 인가 코드 받기 -> 토큰 받기 -> 사용자 정보 가져오기 해당 글에서는 인가 코드 받기는 클라이언트 페이지에서, 토큰 받기와 사용자 정보 가져오기는 서버에서 처리할 예정이다. 위 플로우 대로 처리되기 위해 2개의 클라이언트 페이지와 1개의 API가 필요하다. 1. 클라이언트 페이지 네이버 로그인 버튼 페이지 네이버 로그인 후 Redirect되는 페이지 2. 서버 클라이언트 페이지에서 전달받은 인가코드를 통해 로그인 토큰 발급 및 유저 정보를 조회하는 API 네이버 인증 구현 1. 인가 코드 받기 서비스 서버가 네이버 인증 서버로 인가 코드 받기를 요청한다. 여기서 얻은 인가 코드는 로그인 토큰을 얻기 위해 사용된다. 클라이언트 페이지에서 네이버 로그인창이 노출되고 네..

개발환경 Spring Boot Vue.js MySQL 필요한 모듈 설치 Java 11 vue/cli 4.5.4 MySQL 8.0.18 Java, Vue, MySQL 버전은 위와 상이해도 무관하다. 1. Spring Boot 프로젝트 생성 1) Spring Boot 프로젝트 생성 아래 사이트에서 Spring Boot 프로젝트를 생성할 수 있다. https://start.spring.io/ 2) Gradle 설정 build.gradle 네이버 로그인 서비스 구현에 필요한 모듈을 설정한다. implementation 'org.springframework.boot:spring-boot-starter' testImplementation 'org.springframework.boot:spring-boot-sta..

네이버 로그인 API 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담된다. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있다. 네이버 로그인 API 흐름 네이버 로그인의 흐름은 간단하다. 리소스 오너(사이트)가 네이버 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 네이버 API 서버에 넘긴다. 전달받은 정보를 가지고 네이버 API 서버는 인가 코드를 발급해주고 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다. 자세한 설명은 네이버 개발자센터 API 문서를 참고하자. https:..

API를 연동하다보면 CORS를 자주 볼 수 있다. (프로젝트를 새로만들 때 마다 보는듯.. 😂) 서버쪽에서도 CORS 대응을 해주어야하지만 프론트쪽에서도 대응이 필요하다. Vue.js CORS 설정 1. vue.config.js 파일 생성 프로젝트 root 경로에 vue.config.js 파일을 생성해준다. package.json 파일과 동일한 경로이다. 2. proxy 설정 proxy설정을 왜 해주어야 할까? CORS는 요청하는 주소와 나의 주소 도메인이 달라서 발생한다. 즉, API주소와 웹페이지 주소가 달라서 발생하고 요청하는 주소와 나의 주소가 동일해야 정상적으로 응답받을 수 있다. 이러한 문제를 해결하기 위해 proxy설정을 해주어 api주소로 가는 요청을 웹페이지 주소로 가는 것처럼 바꿔서 ..

로그인 처리 플로우는 아래와 같다. 인가 코드 받기 -> 토큰 받기 -> 사용자 정보 가져오기 해당 글에서는 인가 코드 받기는 클라이언트 페이지에서, 토큰 받기와 사용자 정보 가져오기는 서버에서 처리할 예정이다. 위 플로우 대로 처리되기 위해 2개의 클라이언트 페이지와 1개의 API가 필요하다. 1. 클라이언트 페이지 카카오 로그인 버튼 페이지 카카오 로그인 후 Redirect되는 페이지 2. 서버 클라이언트 페이지에서 전달받은 인가코드를 통해 로그인 토큰 발급 및 유저 정보를 조회하는 API 카카오 인증 구현 1. 인가 코드 받기 서비스 서버가 카카오 인증 서버로 인가 코드 받기를 요청한다. 여기서 얻은 인가 코드는 로그인 토큰을 얻기 위해 사용된다. 클라이언트 페이지에서 카카오 로그인창이 노출되고 카..

개발환경 Spring Boot Vue.js MySQL 필요한 모듈 설치 Java 11 vue/cli 4.5.4 MySQL 8.0.18 Java, Vue, MySQL 버전은 위와 상이해도 무관하다. 1. Spring Boot 프로젝트 생성 1) Spring Boot 프로젝트 생성 아래 사이트에서 Spring Boot 프로젝트를 생성할 수 있다. https://start.spring.io/ 2) Gradle 설정 build.gradle 카카오 로그인 서비스 구현에 필요한 모듈을 설정한다. implementation 'org.springframework.boot:spring-boot-starter' testImplementation 'org.springframework.boot:spring-boot-sta..

카카오 로그인 API 클라이언트 입장에서 수많은 사이트의 모든 아이디 비밀번호를 기억하기는 쉽지 않다. 또한 서비스를 제공해주는 리소스 오너 또한 안전하게 보관하여야 하기 때문에 부담된다. 이런 문제를 해결하기 위해, 구글이나, 페이스북, 카카오 같은 큰 기업들이 로그인 연동 기능을 제공하고 있다. 카카오 로그인 API 흐름 카카오 로그인의 흐름은 간단하다. 리소스 오너(사이트)가 카카오 로그인 창을 클라이언트에게 보여주면, 클라이언트는 로그인을 시도하고, 동의 항목을 체크하여 카카오 API 서버에 넘긴다. 전달받은 정보를 가지고 카카오 API 서버는 인가 코드를 발급해주고 인가 코드를 통해 로그인을 유지할 수 있는 토큰을 발급해준다. 자세한 설명은 카카오 개발자센터 API 문서를 참고하자. Kakao ..