CodeHoon

안녕하세요 상훈입니다.

Vue.js 혹은 React.js (프론트 프레임워크) 에서 카카오로그인을 구현하려고 합니다.
그런데 401 에러가 자꾸 뜨면서 코드 값을 줬는데도 토큰을 내뱉지 않더라구요. 그래서 찾아보다가 KakaoDeveloper 에서 작성된 내용중에 저와 같은 케이스가 있는지 여러 사례들을 확인할 수 있었습니다. 
+ 어떤 블로그를 보면서 진행하고있었는데, 거기서는 code만 보내는 걸로 해서 계속 나오는 에러였습니다.
+ axios를 사용하고있었는데, 지속적인 오류가 출력되어 성공하지 못하고 fetch 방식으로 변경하였습니다.

✔ 사전 환경 체크!

- Backend(Spring)을 거치지 않고 JS 프론트 프레임워크 (Vue.js, React.js) 에서 전부 처리하려고 합니다.
- 현재는 2단계(token 가져오기)입니다.
   (1단계는 code를 가져오는 단계입니다.)
- 결과 데이터로 [token_type, access_token...] 을 얻어옵니다.

✔ 시작!!

일단 필요요소는 다음 사진과 같습니다.

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,  // 1단계에서 발급받은 코드
    client_secret: CLIENT_ID
  }

1) client_id : 내 어플리케이션 > 앱설정 > 요약정보 > REST API 키
2) redirect_uri :  내 어플리케이션 > 제품설정 > 카카오로그인 > Redirect URI
3) code : 1단계에서 받아온 code의 값
4) client_secret :  내 어플리케이션 > 제품설정 > 카카오로그인 > 보안 > ClientSecret :  코드

이렇게 body에 들어갈 내용들을 전부 가지고 REST API (비동기 통신) 으로 값을 요청하고 받아옵니다.

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,
    client_secret: CLIENT_ID
}

const queryStringBody = Object.keys(bodyData)
    .map(k => encodeURIComponent(k) + '=' + encodeURI(bodyData[k]))
    .join('&')


fetch('https://kauth.kakao.com/oauth/token', {
    method: 'POST',
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    body: queryStringBody
})
.then(res => res.json())
.then((data) => {
  console.log(data)
})

저 같은 경우는 Vuex-store를/을 사용하여 action에서 이 내용을 처리하였습니다.

actions: {
	async KakaoLogin ({state, commit}, payload) {
	  const bodyData = { ... }
        
	  const queryStringBody = Object ...
        
	  fetch(... )
	    .then(
	      commit() // 여기서 결과 받아서 처리
	    )
	}
}

✔ 결과

console 로 출력하도록 일단 설정하였는데요, 해당 내용은 이제 성공하였습니다.

안녕하세요 상훈입니다.

지난포스팅에서는 personal access token을 생성하는 방법에 대해서 포스팅하였습니다.

액세스 토큰을 아직 생성하지 않으셨다면, 아래 포스팅을 먼저 확인해주시고, 생성해주세요.

2022.12.01 - [Git] - [GitLab] Personal Access Token 생성하기/방법

GitLab 과 SourceTree를 연결하는 방법을 포스팅하도록 하겠습니다.

Remote 탭에 있는 계정추가를 눌러주세요.

호스팅 계쩡 편집 팝업이 출력되었습니다.

여기서 한 번 분기가 발생하는데, 개인 서버를 호스팅했냐 안했냐에 따라서 갈립니다.

개인호스팅 서버가 있다 : GitLab CE
개인호스팅 서버가 없다 : GitLab

으로 진행해주세요. 저는 CE로 진행하도록하겠습니다.

호스트 url 을 작성해주시고, 

[Personal Access Token 새로고침] 을 눌러주세요.

이런 창이 뜨게 되는데, 

1) 사용자이름
2) 암호 : 복사한 액세스토큰 값
입니다. 확인 해주세요.

1) 사용자이름

@hoon이라고 써져있네요. 제 사용자명은 골뱅이를 제외한 "hoon" 입니다.

올바르게 인증이 되었다면,

인증 성공이 출력됩니다.

연결이 성공적으로 되었습니다. 감사합니다.

참고

안녕하세요 상훈입니다.

GitLab - SourceTree를 사용하려고하는데, Personal Access Token을 요구하더라구요.

그래서 해당 포스트에서는 1단계인 엑세스 토큰 생성하는 방법을 작성하도록 하겠습니다.

1. GitLab 접속
2. 액세스 토큰 생성 페이지 접속
3. 생성

Settings - Access Tokens 에 진입합니다.

1) Token Name
2) Select a Role
3) Select Scopes

이 세가지를 모두 완료해주시고, [Create project access token] 을 눌러주시면 토큰이 생성됩니다.

상단에 액세스 토큰이 출력됩니다.

생성된 토큰을 사용해주시면 됩니다.

이곳에 보시면 git access token을 생성하는 방법이 자세히 작성되어져 있으니 확인 바랍니다.

21년도 중순부터 github에서는 비밀번호 대신, 이 accesstoken을 발급받아 사용하는 방식으로 전환해오려는 노오력을 하고 있다고 합니다.

access-token 만드는 법은 간단합니다.

■ 순서

본인의 계정 아이콘에서 settings
-> <Developer settings>
-> OAuth Apps
-> Personal access tokens
-> Generate new token
-> 만료일자 설정
-> check항목 설정
-> Generate Token - 비밀번호 복사, 저장 등

❗ 비밀번호는 두 번 다시 볼 수 없으니 복사 후 저장하시길 바랍니다.

블록체인 지갑의 비밀번호와 유사하게 암호화된 비밀번호를 생성해주고, 이를 저장하는 방식입니다.

만약 비밀번호를 잊어버리시거나 잃어버리셨으면, 새로 access-token을 발급받아주세요!