전체적인 진행

<aside> 💡 하단의 내용은 러프한 과정입니다. 자세한 내용은 코드를 참고해주세요.

</aside>

로그인 진행 과정

1. 네이버를 개발자 센터로 이동하여, 로그인 API 를 등록하고, clientID, clientSCret 을 발급받았다.
2. 로그인 html 파일을 가져와 현재 프로젝트에 맞도록 html의 내용들을 수정하여 대입하고, 연결해주었다.
3. 네이버 로그인이 처리되어 naverSignInCallback() 함수가 실행되면 네이버로부터 받아 온 nickname 과 name 정보는 fecth, PUT 방식으로 views.py 의 login 함수에 request 를 전달하게 하였다.
4. login 함수에서 이미 기존에 가입한적이 있는 회원인지 username 으로 비교한 후, 가입한 적이 있으면 바로 로그인, 없다면 User.objects.create 로 새 튜플을 추가하고 해당 username 값으로 로그인하게 구현하였다.

로그아웃 진행 과정

1. 네이버는 로그인은 api 로 코드를 제공하지만, 로그아웃의 경우 직접 사용자가 구현해야한다.

2. 이때 로그아웃은 access_Token 을 받아 url 에 clientID, clientScret, grant_type을 delete 로 직접 대입한뒤 request를 보내야한다.

   

   • https://nid.naver.com/oauth2.0/token?grant_type=delete&client_id=&client_secret&access_token=${accsTK}&state=9caf3774-d3e0-4977-ab79-04e4e5e0c2b5&state=be6efbf7-bf94-4b29-b36f-663213729980&service_provider=NAVER
   1. naverlogout 함수를 만들고, local 서버에 저장해놓았던 access_token 을 받아와, 위의 주소 형식에 맞게 저장하여 이 주소로 GET / POST request 를 보내게 된다면, 해당 API 과정에서 연결된 네이버 아이디의 로그인이 끊어지게 된다.
   2. 구현한 네이버 로그아웃 버튼을 html 에서 {% if user.is_authenticated %} 즉, 로그인 된 상태에서만 뜨게 구현하고, 하나의 버튼으로 두 가지 기능을 동시에 수행하도록 처리해 주면 된다.

• url 관련부분
• 주요 코드 부분

실패 원인

/* naver_callback.html 내부의 <script>*/
function naverSignInCallback() {
    const name = naver_id_login.getProfileData("name");
    const nickname = naver_id_login.getProfileData("nickname");

    const csrf_token = document.querySelector(
      "[name=csrfmiddlewaretoken]"
    ).value;
    fetch("<http://127.0.0.1:8000/login/>", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": csrf_token,
      },
      body: JSON.stringify({ name: name, nickname: nickname }),
    })
      .then((response) => console.log("fetch 성공"))
      .catch((error) => {
        console.error("Fetch error:", error);
      });
  };

네이버 로그인이 완료되고 사전 설정해놓은 callback url 으로 리다이렉트 된다. 따라 urls.py 와 views.py 에 설정한 대로 naver_callback.html 가 render 의해 호출되면서 해당 파일의 하단부의 <script> 가 실행이 되게 된다.

오류가 발생한 부분이 네이버로 로그인 하고 나서 csrf_token 의 내용을 querySelector 로 가져오는 과정에서 null 값 즉 어떠한 값도 가져오지 못해 오류가 발생하였고, 하단의 fetch 가 실행되지 않고 코드가 멈추게 되었다.

결국 http://127.0.0.1:8000/login/ 과 연결되어있던 views.py 의 login 함수에 name 과 nickname 이 전달되지 않음으로 인해 서버에 로그인이 되지는 않게 된다.

하지만 DB 에는 값이 저장이 되는데, 그 이유를 확인하지 못하였다.

쿼리설렉터로 naver_callback.html 의 csrf_token을 받아오려하지만, naver_callback.html 내부에는 csrf_token 이없으므로 다른 곳에서 작업을 수행해야하는데 여기에서 문제가 발생한 것 같았다.

{%extend main.html%} 으로 가져왔고, 실제 로그인은 login/ 에서 구현되므로 해당 csrf_token 을 가져오지 못하는 것이기 때문이라고 생각하였다.

CSRF 토큰?