소셜로그인

1. REST API 키 : 복사하기

2. 보안코드 : 복사하기

3. 동의항목의 이메일이 등록되어있는지 확인

4. 카카오 로그인

5. uri설정

👉 uri 경로를 생성해둬야 아래 에러가 발생하지 않는다.

👉 uri의 뒷부분이 인가코드인데, 인가코드를 통해 access token을 얻어야함.

6. KakaoRedirectPage 생성
   -> useSearchParams를 이용해서 인가코드를 받자.

7. redirectPage 라우팅 설정

8. 이후 브라우저 종료후 다시 로그인하면 해당 화면이 출력됨.
   -> 두번째줄은 인가코드

9. access token을 발급받는 코드를 작성

10. kakao api 코드 수정

import axios from "axios";


const rest_api_key = '28d2d5867eba4b8a53e14adc1ca7209d'

const redirect_uri = 'http://localhost:5173/member/kakao'

const auth_code_path = `https://kauth.kakao.com/oauth/authorize`

const access_token_url = 'https://kauth.kakao.com/oauth/token'

export const getKakaoLoginLink = () => {

    const kakaoURL = `${auth_code_path}?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`
    
    return kakaoURL
}

export const getAccessToken = async (authCode:string) => {
    const header = {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        }
    }
    const params = {
        grant_type: "authorization_code",
        client_id: rest_api_key,
        redirect_uri: redirect_uri,
        code:authCode
}
    const res = await axios.post(access_token_url, params , header)
    const accessToken = res.data.access_token


    return accessToken
}

11. token값 받기 완료

---

• spring boot

1. memberservice

package org.zerock.api1014.member.service;


import lombok.RequiredArgsConstructor;
import lombok.extern.log4j.Log4j2;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.ResponseEntity;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.util.UriComponents;
import org.springframework.web.util.UriComponentsBuilder;
import org.zerock.api1014.common.exception.CommonExceptions;
import org.zerock.api1014.common.exception.TaskException;
import org.zerock.api1014.member.domain.MemberEntity;
import org.zerock.api1014.member.dto.MemberDTO;
import org.zerock.api1014.member.exception.MemberExceptions;
import org.zerock.api1014.member.repository.MemberRepository;

import java.util.LinkedHashMap;
import java.util.Optional;

@Service
@Transactional
@RequiredArgsConstructor
@Log4j2
public class MemberService {

    private final MemberRepository memberRepository;

    private final PasswordEncoder passwordEncoder;

    public MemberDTO authenticate(String email, String password) {

        Optional<MemberEntity> result = memberRepository.findById(email);

        MemberEntity member = result.orElseThrow(() -> MemberExceptions.BAD_AUTH.get());

        String enPw = member.getPw();

        boolean match = passwordEncoder.matches(password, enPw);

        if( !match) {
            throw MemberExceptions.BAD_AUTH.get();
        }
        MemberDTO memberDTO = new MemberDTO();
        memberDTO.setEmail(email);
        memberDTO.setPw(enPw);
        memberDTO.setRole(member.getRole().toString());
        return memberDTO;
    }

    public MemberDTO getKakaoMember(String accessToken) {
        log.info("---------authKako---------");

        String email = getEmailFromKakaoAccessToken(accessToken);

        log.info("email: " + email );

        return null;
    }

    private String getEmailFromKakaoAccessToken(String accessToken){
        String kakaoGetUserURL = "https://kapi.kakao.com/v2/user/me";
        if(accessToken == null){
            throw new RuntimeException("Access Token is null");
        }
        RestTemplate restTemplate = new RestTemplate();
        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization", "Bearer " + accessToken);
        headers.add("Content-Type","application/x-www-form-urlencoded");
        HttpEntity<String> entity = new HttpEntity<>(headers);
        UriComponents uriBuilder = UriComponentsBuilder.
                fromHttpUrl(kakaoGetUserURL).build();

        ResponseEntity<LinkedHashMap> response =
                restTemplate.exchange(
                        uriBuilder.toString(),
                        HttpMethod.GET,
                        entity,
                        LinkedHashMap.class);
        log.info(response);
        LinkedHashMap<String, LinkedHashMap> bodyMap = response.getBody();
        log.info("------------------------------------");
        log.info(bodyMap);
        LinkedHashMap<String, String> kakaoAccount = bodyMap.get("kakao_account");
                log.info("kakaoAccount: " + kakaoAccount);
        return kakaoAccount.get("email");
    }

}

2. memberController 코드추가

3. security에 kakao 경로 추가