네이버 카카오 Oauth2.0 로그인 구현

구글에 이어 추가적으로 네이버, 카카오 oauth2.0 을 구현하였습니다.

<application.yml 네이버 카카오 추가 설정>

naver:
            client-id: [RestApi 키]
            client-secret: [Secret]
            scope:
              - email
              - name
            client-name: Naver
            authorization-grant-type: authorization_code
            redirect-uri: http://localhost:8080/login/oauth2/code/naver

          kakao:
            client-id: [RestApi 키]
            client-secret: [Secret : 카카오 로그인-보안 에서 활성화하고 받기]
            scope:
              - account_email
            client-name: Kakao
            authorization-grant-type: authorization_code
            client-authentication-method: POST -> 무조건 카카오는 이거 넣어주세요 아님 오류나요
            redirect-uri: http://localhost:8080/login/oauth2/code/kakao

        provider:
          naver:
            authorization-uri: https://nid.naver.com/oauth2.0/authorize
            token-uri: https://nid.naver.com/oauth2.0/token
            user-info-uri: https://openapi.naver.com/v1/nid/me
            user-name-attribute: response #회원정보를 json으로 받는데 response라는 키값으로 리턴 해줌

          kakao:
            authorization-uri: https://kauth.kakao.com/oauth/authorize
            token-uri: https://kauth.kakao.com/oauth/token
            user-info-uri: https://kapi.kakao.com/v2/user/me
            user-name-attribute: id

<kakaoUserInfo> : id로 attributes받아보면 객체안에 객체 구조로 되어 있어서 이메일 넣어주려면 내용 확인하고 조금 수정해줘야 합니다.

package tnut.blogback.config.oauth2.provider;

import java.util.Map;

public class KakaoUserInfo implements OAuth2UserInfo{

    private final Map<String, Object> attributes;

    public KakaoUserInfo(Map<String, Object> attributes) {
        this.attributes=attributes;
    }

    @Override
    public String getProvider() {
        return "kakao";
    }

    @Override
    public String getProviderID() {
        return String.valueOf(attributes.get("id"));
    }

    @Override
    public String getEmail() {
        Map<String, Object> kakao_account = (Map<String, Object>) attributes.get("kakao_account");

        return (String) kakao_account.get("email");
    }

    @Override
    public String getName() {
        return (String) attributes.get("name");
    }
}

<naverUserInfo>

package tnut.blogback.config.oauth2.provider;

import java.util.Map;

public class NaverUserInfo implements OAuth2UserInfo{

    private final Map<String, Object> attributes;

    public NaverUserInfo(Map<String, Object> attributes) {
        this.attributes=attributes;
    }

    @Override
    public String getProvider() {
        return "naver";
    }

    @Override
    public String getProviderID() {
        return (String) attributes.get("id");
    }

    @Override
    public String getEmail() {
        return (String) attributes.get("email");
    }

    @Override
    public String getName() {
        return (String) attributes.get("name");
    }
}

<react - loginPage>

import { Button } from "react-bootstrap";
import React from "react";

const Login = () => {
  const handleLogin = (e) => {
    console.log(e.target.value);
    if (e.target.value === "google") {
      window.location.href = `http://localhost:8080/oauth2/authorization/google`;
    } else if (e.target.value === "naver") {
      window.location.href = `http://localhost:8080/oauth2/authorization/naver`;
    } else if (e.target.value === "kakao") {
      window.location.href = `http://localhost:8080/oauth2/authorization/kakao`;
    }
  };

  return (
    <div>
      <br />
      <p>
        <Button bg="secondary" value={"google"} onClick={handleLogin}>
          구글 로그인
        </Button>
      </p>
      <p>
        <Button bg="secondary" value={"naver"} onClick={handleLogin}>
          네이버 로그인
        </Button>
      </p>
      <p>
        <Button bg="secondary" value={"kakao"} onClick={handleLogin}>
          카카오 로그인
        </Button>
      </p>
    </div>
  );
};

export default Login;

<소셜 로그인 버튼으로 등록독 회원>