20221211 WIL

이번주 한 일

• 최종 프로젝트
  • 사물인식 모델 학습
  • 소셜 로그인
  • 자바스크립트 - 네비게이션 바 분리 및 기타등등

 

 

 

 

소셜 로그인 관련

 

도대체 소셜로그인 콜백데이터를 프론트엔드에서 어떻게 다룰 수 있을까 고민하다가 리다이렉트URI를 백엔드가 아닌 프론트엔드 부분으로 보내는 방법을 사용

 

GOOGLE_CALLBACK_URI = 'http://127.0.0.1:5500/templates/login.html'

 

login.html 페이지로 콜백URI를 보내 code를 담도록 만들었다

 

user.js

// 구글 로그인 연습중
async function handlegoogle() {
  let code = new URL(window.location.href).searchParams.get('code')
  if (code) {
  const response = await fetch(`http://127.0.0.1:8000/user/google/callback/?code=${code}`)
  const response_json = await response.json()

  localStorage.setItem('access', response_json.access_token);
  localStorage.setItem('refresh', response_json.refresh_token);

  const base64Url = response_json.access.split(".")[1];
  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const jsonPayload = decodeURIComponent(
    atob(base64)
      .split("")
      .map(function (c) {
        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
      .join("")
  ); 

  localStorage.setItem("payload", jsonPayload);
  window.location.replace('main.html')
  } 
}

window.onload = () => {
  console.log("로딩되었음");
  handlegoogle();
};

로그인 페이지 안에 코드가 담겼다면 주소창에서 searchParams를 사용해 code의 정보를 읽고

await fetch를 사용하여 백엔드 콜백 주소에 코드를 보내고 JsonResponse로 돌아오는 데이터를 받는다!!

 

 

 

트러블슈팅

 

소셜 로그인을 구현하면서 api쪽의 400 invalid request 에러, mismatch 에러 등등 별의 별 에러를 다 겪었는데

 

구글링을 해보면서 구글의 정책 관련 문제니 앱 설정 관련 문제니 이런 저런 사례들을 죽어라 파보았지만 해결책은 없었고.. 머리 빠개지면서 고민하던 도중에 결국은 해답을 찾았는데

 

그냥 URI를 재지정하면서 테스트 도중에 리다이렉션 주소에 따옴표를 붙여서 생긴 주소 에러 미스였다 ㅡㅡ;;

 

이것 말고도 같은 팀원분도 api 설정중에 분명히 주소설정 제대로 한거같은데 비슷한 에러가 뜨고 그래서 

내가 성공시킨 주소를 그냥 복붙으로 보내줘서 해결했는데 진짜 별별 에러가 다 난다..