카카오 로그인 401에러 해결해주실분 계시나요ㅠㅠ

import React from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";

const Auth = () => {
  const navigate = useNavigate();
  const code = new URL(window.location.href).searchParams.get("code");
  const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const REDIRECT_URI = "http://localhost:3000/login/oauth2/code/kakao";

  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const Auth = () => {
    const navigate = useNavigate();
    const code = new URL(window.location.href).searchParams.get("code");
    const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
    const REDIRECT_URI = "http://localhost:3000/login/oauth2/code/kakao";


    //const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

    useEffect(() => {
      const kakaoLogin = async () => {
        await axios({
          method: "GET",
          //url: `${REDIRECT_URI}/?code=${code}`,
          url: `https://서버주소/login/oauth2/code/kakao/?code=${code}`,
          headers: {
            "Content-Type": "application/json;charset=utf-8", 
            "Access-Control-Allow-Origin": "*", 
          },
        })
          .then((res) => {
       
            console.log(res);
     
            localStorage.setItem("name", res.data.account.kakaoName);
            
            navigate("/success");
          })
          .catch((err) => {
            console.log("에러", err);
            window.alert("로그인에 실패했습니다.");
          });
      };
      kakaoLogin();
    }, []);
    return (
      <div>
        <div>
          <p>로그인 중입니다.</p>
          <p>잠시만 기다려주세요.</p>
          <p>{code}</p>
        </div>
      </div>
    );
  };

  return (
    <div>
      <div>
        <p>로그인 중입니다.</p>
        <p>잠시만 기다려주세요.</p>
        <p>{code}</p>
      </div>
    </div>
  );
};

export default Auth;

ID 954027 입니다… 급하게 만들어야될게 있는데 , 감이 안잡힙니다

안녕하세요.

어떤 API 호출 하셨을때 401 발생하였는지와
Error Response Body에 어떤 메시지 받았는지 기재해주시겠어요?

카카오 로그인 기능을 구현할 때 입니다! REST API 사용중입니다
Failed to load resource: the server responded with a status of 401 (Unauthorized)

{
  "errorType": "AccessDeniedError",
  "message": "wrong appKey(%REACT_APP_KAKAOMAP_KEY%) format"
}

네, 에러 메시지 그대로 앱키를 전달하지 않고 ‘%REACT_APP_KAKAOMAP_KEY%’ 변수명 스트링이 전달된 것 같습니다.

확인 부탁드려요.


참고로, 첨부해주신 코드가 아닌 지도 API 사용하다 오류 발생했습니다.

카카오 rest api로 간편로그인을 하는 과정인데 인가코드를 백엔드에 넘기는 코드입니다ㅠㅠ 근데 에러 본문에 왜 카카오맵이 나오는지도 잘 이해가 안됩니다

해당 에러는 지도API호출 이외에는 발생한 이력이 없고
프론트엔드에서 지도 javascript SDK 사용할때 발생하는 에러니 관련 부분 없다면

리다이렉트 URI로 설정하신 해당 주소에서 어떤 처리하는지 확인해보시면 좋을 것 같아요.

1개의 좋아요

html에 카카오맵 sdk가 써있어서 해당 오류가 난거였습니다 감사합니다!
해당 부분 삭제하고 나니 이번엔 net::ERR_CONNECTION_REFUSED 오류가 납니다

import React from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";

const Auth = () => {
  const navigate = useNavigate();
  const code = new URL(window.location.href).searchParams.get("code");
  const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const REDIRECT_URI = "http://localhost:3000/login/oauth2/code/kakao";

  // const REDIRECT_URI = "https://benevolent-croquembouche-fd718d.netlify.app/oauth/kakao/callback";

  //const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  useEffect(() => {
    const kakaoLogin = async () => {
      await axios({
        method: "GET",
        url: `http://localhost:9000/login/oauth2/code/kakao/?code=${code}`,
        //url: `http://101.101.217.88/login/oauth2/code/kakao/?code=${code}`,
        headers: {
          "Content-Type": "application/json;charset=utf-8", 
          "Access-Control-Allow-Origin": "*", 
        },
      })
        .then((res) => {

          console.log(res);
          //계속 쓸 정보들( ex: 이름) 등은 localStorage에 저장해두자
          localStorage.setItem("name", res.data.account.kakaoName);

          navigate("/success");
        })
        .catch((err) => {
          console.log("에러", err);
          window.alert("로그인에 실패했습니다.");
        });
    };
    kakaoLogin();
  }, []);
  return (
    <div>
      <div>
        <p>로그인 중입니다.</p>
        <p>잠시만 기다려주세요.</p>
        <p>{code}</p>
      </div>
    </div>
  );
};

export default Auth;

import React from "react";
import { Link } from "react-router-dom";

const Login = () => {
  const REST_API_KEY = process.env.REACT_APP_REST_API_KEY;
  const REDIRECT_URI = "http://localhost:3000/login/oauth2/code/kakao";

  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  return (
    <div className="flex flex-col items-center h-screen">
      <button>
        <Link to={KAKAO_AUTH_URL}>
          <div className="flex items-center justify-center w-96 h-20 rounded-xl bg-kakao-yellow text-2xl">
            <BsFillChatFill className="mr-2" />
            <span className="text-center">카카오 1초 로그인/회원가입</span>
          </div>
        </Link>
      </button>
    </div>
  );
};

export default Login;

ID 954027

현재 로컬 테스트 환경에서 http://localhost:3000 접속 가능한 상태인지 확인해보시겠어요?

인가코드요청 로그는 있지만 이후
카카오와 무관하게 개발하신 서버에 리다이렉트 URI에 접속못하는 상황 같습니다.

네 로컬에서 프로젝트 자체는 실행이 잘 됩니다.
인가코드도 아래처럼 해놔서 볼수있는데 잘 나옵니다. 백엔드 코드에 문제가 있는걸까요?

<p>{code}</p>

네, 카카오측 서버는 현재 문제 상황 리포팅된 것이 없으므로

구축하신 시스템 카카오 로그인 동선 중 URL에 접근 못하는 케이스가 있을 것으로 추정되고
인터넷 문제보다는 로컬 서버 문제일 가능성이 높을 것 같습니다.

리다이렉트 URI가 잘 접속된다면 내부 로직에서 호출하는 부분 찾아보시면 좋을 것 같아요.

현재 저희 redirect_url = http://localhost:3000/login/oauth2/code/kakao입니다.

back:
일단은 get이 잘이루어지고있는지 하드코딩을 하여 인가코드를 복붙을 해서 돌려보고있습니다.
데이터를 받아와서 db에는 잘 저장되는거 확인하였는데
get으로 db에 저장된 내용을 가지고 오려고 하니 아무것도 뜨지 않습니다. (http://localhost:8090/login/info)

jwt 발급해서 프론트에 헤더를 통해 전달하고 그 jwt 토큰으로 백에서 유저정보를 요청한다고하는데 현재 프론트에서 로그인 성공이 뜨지 않고 Failed to load resource: net::ERR_CONNECTION_REFUSED가 뜨는데 혹시 어떤거에서 문제가 발생하는지 궁금합니다.

package com.example.sociallogin.controller;

import com.example.sociallogin.domain.Member;
import com.example.sociallogin.jwt.JwtProperties;
import com.example.sociallogin.oauth.OauthToken;
import com.example.sociallogin.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;


@RestController // 메소드 리턴타입 객체를 json으로 자동 파싱
public class MemberController {
    @Autowired
    private MemberService memberService;

    // 테스트용 하드코딩된 인가 코드
    @GetMapping("/login/oauth2/code/kakao")
    public ResponseEntity<String> testLogin() {
        // 하드코딩된 인가 코드를 사용
        String authorizationCode = "vAivJisd6TmGac41ugtJwWtzWQXeafZQrQ39-GBKXEdAfbRJn3QpiPDxOK5wRawKkneECQorDNIAAAGJ_UsSiA";

        // 인가 코드로부터 access token 발급
        OauthToken oauthToken = memberService.getAccessToken(authorizationCode);

        // 발급 받은 access token으로 카카오 회원 정보 DB 저장 후 JWT 생성
        String jwtToken = memberService.SaveMemberAndGetToken(oauthToken.getAccess_token());

        HttpHeaders headers = new HttpHeaders();
        headers.add(JwtProperties.HEADER_STRING, JwtProperties.TOKEN_PREFIX + jwtToken);

        return ResponseEntity.ok().headers(headers).body("success");
    }
    @GetMapping("/login/info")  // jwt 토큰으로 유저정보 요청하기
    public ResponseEntity<Object> getCurrentUser(HttpServletRequest request) {
        Member member = memberService.getMember(request);
        return ResponseEntity.ok().body(member);
    }
    @GetMapping("/login/name")
    public ResponseEntity<String> getMembername(HttpServletRequest request) {
        Member member = memberService.getMember(request);
        if (member != null) {
            String name = member.getNickname();
            return ResponseEntity.ok(name);
        } else {
            return ResponseEntity.notFound().build();
        }
    }
    @GetMapping("/login/email")
    public ResponseEntity<String> getMemberemail(HttpServletRequest request) {
        Member member = memberService.getMember(request);
        if (member != null) {
            String useremail = member.getEmail();
            return ResponseEntity.ok(useremail);
        } else {
            return ResponseEntity.notFound().build();
        }
    }

}


package com.example.sociallogin.controller;
import com.example.sociallogin.domain.Member;
import com.example.sociallogin.jwt.JwtProperties;
import com.example.sociallogin.oauth.OauthToken;
import com.example.sociallogin.service.MemberService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;


@RestController // 메소드 리턴타입 객체를 json으로 자동 파싱
public class MemberController {
    @Autowired
    private MemberService memberService;

    // 테스트용 하드코딩된 인가 코드
    @GetMapping("/login/oauth2/code/kakao")
    public ResponseEntity<String> testLogin() {
        // 하드코딩된 인가 코드를 사용
        String authorizationCode = "vAivJisd6TmGac41ugtJwWtzWQXeafZQrQ39-GBKXEdAfbRJn3QpiPDxOK5wRawKkneECQorDNIAAAGJ_UsSiA";

        // 인가 코드로부터 access token 발급
        OauthToken oauthToken = memberService.getAccessToken(authorizationCode);

        // 발급 받은 access token으로 카카오 회원 정보 DB 저장 후 JWT 생성
        String jwtToken = memberService.SaveMemberAndGetToken(oauthToken.getAccess_token());

        HttpHeaders headers = new HttpHeaders();
        headers.add(JwtProperties.HEADER_STRING, JwtProperties.TOKEN_PREFIX + jwtToken);

        return ResponseEntity.ok().headers(headers).body("success");
    }

    @GetMapping("/login/info")  // jwt 토큰으로 유저정보 요청하기
    public ResponseEntity<Object> getCurrentUser(HttpServletRequest request) {
        Member member = memberService.getMember(request);
        return ResponseEntity.ok().body(member);
    }

    @GetMapping("/login/name")
    public ResponseEntity<String> getMembername(HttpServletRequest request) {
        Member member = memberService.getMember(request);
        if (member != null) {
            String name = member.getNickname();
            return ResponseEntity.ok(name);
        } else {
            return ResponseEntity.notFound().build();
        }
    }
    @GetMapping("/login/email")
    public ResponseEntity<String> getMemberemail(HttpServletRequest request) {
        Member member = memberService.getMember(request);
        if (member != null) {
            String useremail = member.getEmail();
            return ResponseEntity.ok(useremail);
        } else {
            return ResponseEntity.notFound().build();
        }
    }

}

http://localhost:8090는 접속이 잘되나요?

아쉽지만, 해당 에러는 외부에서 확인이 어렵습니다. 특정 URL에 접속 못한다는 에러로 개발하신 시스템 연관 서버들을 하나씩 확인해보는 수 밖에 없을 듯합니다.

그래도 시간내주셔서 감사합니다! 좋은 하루 되세요!!