((TIL)) Node.js express로 인스타그램 구현하기4

😭 intro

우왕 머리 뽀개질거같다 ^^ 원래 이런가? 장고로 구현할때는 기본 개념이 머리에 안잡혀서 일주일 걸렸는데.. 개념을 이해했는데 왜 하루만에 끝내지 못하는거지 소셜로그인 어제 도전했다가 다른 사람 코드보고 어우 왜이렇게 왔다갔다해 못하겠다싶어서 포기했는데 어제 밤에 계속 구글링해보니까 하면 할 수 있을 것 같기도 하고..? 그래서 열심히 깨작깨작 여러가지 레포 참고해보면서 작성했는데 포스트맨 통신은 왜 안돼크아아아아아악!!!!! 웹사이트에서 테스트도 계속 삥삥 돌고 왜구래 우아아아아아악!!!!!!

후  - 침. 착. 해. 침. 착. 해.

카카오 소셜 로그인 진행 과정은 아래와 같다.

1. 카카오 인가 코드 받기 (GET /oauth/authorize)
2. redirect url로 인가코드 전달받기
3. 카카오 access token 요청하기(POST /oauth/token)
4. 토큰 발급받기
5. 발급받은 토큰으로 사용자 정보 추출하기
6. 사용자 정보 DB에 저장하기
7. 로그인 처리

5번까지 완료했다. 사용자 정보를 DB에 저장하기 위해서 나는 kakao_id를 저장하는 컬럼을 생성해야 하고, 기존에 반드시 입력하도록 설정했던 아이디와 비밀번호 입력 여부를 수정해야할 것 같다. 저번에 장고를 사용할 때 포스트맨으로 테스트가 가능했는데, 일단 오늘 내일 일정이 있어서 노트북을 못쓰니까 정리만 해둔다.! 코드 작성하며 새로 정리해야할 부분은 아래와 같다.

• axios
• URLSearchParams
• redirect
• oauth2.0
• 카카오 API node.js 구현 방법

---

🔥 URLSearchParams

• URLSearchParams.toString() : URL에서 query string으로 변환하여 반환한다.

 

🔥 Redirect

• res.redirect() : 특정 경로로 URL을 이동시킨다.

 

🔥 axios

비동기로 http 통신을 하기 위한 도구로 npm install axios를 이용해 설치할 수 있다. axios 사용법은 아래와 같다.

axios({
  method: 'get', // HTTP 메소드 : 통신 방식
  url: 'https://test/api/cafe/list/today', // 통신할 url
  data: { 
  	// 요청보낼 데이터
  }
});

 

---

- 9월 18일

아 고통스럽다. api테스트를 진행하고 있는데 콘솔에 아무 응답도 안찍히고 화면에서 계속 로딩중만 돌고있다.
어디로 정착하지못하고 계속 삥삥 돌고있는데, 콘솔에 다 찍어본 결과 try문 실행 전까지는 잘간다.
왜 그 뒤는 진행이 안되냐구요 axios 하면서 시간이 너무 오래걸리는데 왠지모르겠네..!? 일단 여기까지. 

const getKakaoToken = async (code) => {
    const tokenUrl = `https://kauth.kakao.com/oauth/token`;
    let accessToken;
    try {
        const result = await axios({
            method : 'POST',
            url    : tokenUrl,
            headers: {
                "Content-Type" : "application/x-www-form-urlencoded;charset=utf-8"
            },
            params : {
                grant_type  : "authorization_code",
                client_id   : config.client_id,
                redirect_uri: config.redirect_uri,
                code
            }
        });
        accessToken = result.data.access_token;
        console.log('여기서 accesstoekn',accessToken )
    } catch (e) {
        throw {status:40, message:"카카오 로그인 요청 중 에러 발생"}
    }
    const userInfo = await getUserInfoByKakaoToken(accessToken)
    return userInfo;
}

내가 꼭 풀고만다....!!!

 

- 9월 19일

^^. 뭘까 진짜 도대체 뭘까. 카카오 소셜로그인 도대체 어디 코드가 잘못됐는지 눈에 안보였다.
잠깐 쉴 겸 게시글 등록하기 기능 먼저 구현하고 컴퓨터를 닫아버렸다.
세번째 포기. 그만 하자 자려고 누웠는데 너무 분했다(?) .

핸드폰으로 axios를 재검색해봐도 해당 문법 맞게 잘 썼는데 왜 거기서부터 아무 응답이 없냐구!!!
결국 노트북을 다시 켰고, 카카오 브랜치로 이동해 서버를 구동시켰는데?
axios를 못찾는다는 에러가 뜨네? 그래 제발 에러라도 떠줘..ㅜㅜ 힌트를 줘.
npm install axios를 실행하고 나서 테스트를 했는데 이번엔 또 실행이 아주 잘 된다....? ^^. 나한테 왜그래? 

정말 아무 원인도 모르게 그렇게 해결됐다. 찝찝...
그리고 결과적으로 DB에 갔다가 반환값 없이 빙빙 돌고 있는 원인을 찾은 것 같다. 

users 테이블에서 비밀번호는 NOT NULL로 설정했는데, 카카오 회원가입은 비밀번호를 입력하지 않는다.
그래서 혹시나 싶어 NOT NULL을 지워줬더니

들어갔다ㅠㅠㅠㅠ

그렇게 해결해버렸다 드디어.
해결했는데 왜케 슬프지 😭 혼자있고 싶다.
노드로 구현하는 카카오 소셜로그인 포스팅은 내일 다시하자 ^..^..

9월 19일 새벽 1시 31분.. 결국 미련을 못버리고 .....드디어 카카오 소셜로그인까지 다성공했다ㅠㅠㅠ!!!!!! 

정말 에러메세지.. 자세하게 안떠서 너무 찾기어렵다.

catch구문에 console.log(e)를 찍어보기

에러메세지 하단에 'data'안에 error_code와 error_description 확인

구글링 결과!!

인가코드 재발급 후 로그인 시도했더니 ㅠㅠㅠㅠ 성공이다

에러메세지를 쉽게 잡기 위해서 콘솔에 찍는 코드들을 추가해야겠다.
괜찮아~ 이렇게 혼자 뚝딱거리다가 보면 언젠가 보면 바로 해결하는 그 날이 올거야 >_<
행복하다 문제해결!! 카카오 소셜 로그인 완료!!!!