230119 - javascript - 카카오로그인(kakao login) API

오늘 내가 배운 것

1. 카카오 로그인 공식 사이트

2. 카카오 로그인 API

3. 사전준비

4. 카카오 로그인 구현하기

• 프론트 서버
• 백 서버

 

1. 카카오 로그인 공식 사이트

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

 

카카오 로그인은 API를 이용해서 하는 것인데 위에 공식 사이트에서 자세히 잘 나와있다.

 

 

 

2. 카카오 로그인 API

기본 흐름은 아래와 같다. 

출처 : 카카오 로그인 공식 사이트

 

 

3. 사전 준비

카카오 로그인을 위해서 사전에 준비해야 해야 할 단계가 몇 가지 있다.

 

공식 사이트에서 로그인 후 내 어플리케이션 생성

 

1. 공식사이트에 로그인한 후에 내 애플리케이션 카테고리로 들어가서 애플리케이션 추가하기

 

 

사용할 어플리케이션 선택한다

 

2. 애플리케이션 생성 후 생성한 애플리케이션을 선택하여 들어간다.

 

 

 

3. 애플리케이션을 선택하고 첫 화면에 앱키 종류에 대해 여러 개가 있는데, 지금은 WEB에서 할 예정이고, REST API를 이용한 방식을 구현할 것이기 때문에

REST API 키를 확인한다.

 

 

Client Secret

4. 좌측에 보안 탭으로 들어와서 Client Secret 코드도 확인한다.

 

 

5. 플랫폼 탭에서 Web 플랫폼 등록을 선택하여 사이트 도메인 및 기본 도메인을 설정한다.

공부목적 및 따로 도메인이 없기 때문에 백엔드서버의 도메인을 적어줬다.( 포트 번호 포함)

 

 

 

동의항목

6. 카카오 로그인 할 때 동의항목을 이용하여 원하는 정보를 얻을 수 있다. 

추후 카카오 로그인만으로 로그인 처리가 되게 하기 위해서 카카오계정도 받게 했다.

 

 

 

 

4. 카카오 로그인 구현하기

흐름 및 간단한 코드 어느 서버에서 작동하는지 간략하게 적었다.

 

4-1. 프론트 서버

STEP 1. 인가코드 받기

 

1. 클라이언트가 카카오 로그인 버튼을 이용하여 프론트 서버에 요청한다.

2. 프론트서버가 redirect로 클라이언트에게 응답한다.

const HOST = `https://kauth.kakao.com`
// 위에 사전 준비에서 확인한 값이다 (아래 코드는 본인의 어플리케이션이므로 반드시 바꿔주어야 한다.)
const REST_API_KEY = `6f3af7393558bd75aa668cd31cc22396`  
const REDIRECT_URI = `http://127.0.0.1:3000/oauth/kakao`


app.get("/oauth/kakao", (req, res)=>{
    //kauth.kakao.com
    //  /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code
    const redirectURL = `${HOST}/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
    res.redirect(redirectURL)
})

 

3. 클라이언트는 redirect로 받은 URL로 다시 요청을 한다.

 

카카오 로그인 페이지가 뜬다.

4-2. 백 서버

 

4. 카카오 로그인 페이지가 뜨면, 로그인을 진행한다. 로그인을 하면 req.query에 인가 코드가 있다.

 

 

STEP 2. 토큰 받기

인가 코드를 가지고 있는 상태로 POST /oauth/token 으로 요청을 하면, 응답에 토큰이 담겨온다.

 

//Request message형태 (코드에 넣을 내용아님..)

POST /oauth/token HTTP/1.1
Host: kauth.kakao.com
Content-type: application/x-www-form-urlencoded;charset=utf-8

토큰을 받기 위해서 위와 같이 request message를 보낸다.

app.get("/oauth/kakao", async (req, res, next) =>{
    
    const { code } = req.query // 인가코드
    
	const host = `${HOST}/oauth/token` // 인가 코드가 있는 상태로 카카오 서버에 다시 요청
    const header = {
        "Content-type": "application/x-www-form-urlencoded",
    }
    const body = qs.stringify({
        grant_type: "authorization_code",
        client_id: REST_API_KEY,
        redirect_uri: REDIRECT_URI,
        code,
        client_secret: CLIENT_SECRET,
    })

    const response = await axios.post(host, body, header)
    //console.log(response.data) ==token
    
})

5. 위에 과정이 끝나면 마지막에 response.data 값으로 토큰을 받을 수 있다.

로그인 상태일 때 이 토큰을 가지고 회원정보 조회를 위해서 카카오 서버로 다시 요청을 하면 응답 시에 원하는 정보를 얻을 수 있다.

 

STEP 3. 회원정보 가져오기

(위에  MVC패턴으로 진행하지 않았기 때문에  response 에 이어서 사용할 수 있다. )

 

//Request message형태 (코드에 넣을 내용아님..)

GET(또는 POST) /v2/user/me HTTP/1.1

Host: kapi.kakao.com

//request message 안에 header로 같이 넣어서 보낸다.
Authorization: Bearer ${ACCESS_TOKEN}
Content-type: application/x-www-form-urlencoded;charset=utf-8

const { access_token } = response.data
        const host = `https://kapi.kakao.com/v2/user/me`
        const user = await axios.post(host, null, {
            headers: {
                "Content-type": "application/x-www-form-urlencoded",
                Authorization: `Bearer ${access_token}`,
            },
        })

 

 

6. 토큰을 이용하여 회원 정보를 가져올 수 있다.

받은 정보를 데이터베이스에 넣어서 로그인처리를 할 수 있다.

 

(여기까지가 카카오에서 제공하는 API를 이용한 로그인 방법이고,  STEP 4. 에서는 백엔드 서버에서 DB에 정보를 넣는 과정을 구현했다.)

 

STEP 4. 회원정보를 이용하여 DB에 데이터 저장하기

const sns = {
            userid: user.data.id,
            userpw: user.data.id,
            username: user.data.properties.nickname,
            provider: "kakao",
            snsId: user.data["kakao_account"].email,
        }
        const [snsCreate] = await User.findOrCreate({
            where: { snsId: sns.snsId },
            defaults: sns,
        }) // 만들어짐.
        const { userid, userpw } = snsCreate.dataValues
        const bodies = { userid, userpw }
        const result = await axios.post("http://127.0.0.1:3000/auth", bodies, {
            headers: {
                "Content-type": "application/json",
            },
        })
        res.redirect("http://127.0.0.1:3005")

카카오 로그인을 진행한 경우

snsId에 카카오로그인에 사용한 이메일을 넣었고, (추측이지만) 카카오에서 관리를 위한 회원 id가 있는데 숫자로 되어있다. 이 id값 초기값으로 userid와 userpw에 기입했기 때문에 로그인되는 과정에서 회원정보를 변경하게 하는 방법을 유도하는 것이 낫다고 판단했다.

(간편 로그인으로 가입하는 경우 최초 로그인 시 회원정보를 변경하는 과정)

 

 

 

 

GitHub
Back Server : https://github.com/100space/202301/tree/main/230118

GitHub
Front Server :  https://github.com/100space/202301/tree/main/230119

 

 

 

 

 

 

 

---