[heroku] Auth0 카카오 로그인 연동하기 _Auth0 Social Login

[heroku] Auth0 카카오 로그인 연동하기 _Auth0 Social

[heroku] Auth0 Kakao Login API

 

# 2021년 6월부터 카카오 로그인 API가 변경되었으나, Heroku Auth0 에는 변경된 카카오 로그인 API가 적용되어 있지 않다. 따라서 Auth0의 커스텀 소셜 로그인을 등록해야 한다.

 

 

■ 카카오 개발자 센터

1. 닉네임, 프로필 사진, 카카오 계정의 상태를 동의로 체크해준다.

 

 

■ heroku Auth0 

 

1. Authentication 메뉴 -> social -> create Connection 버튼 클릭

2. KaKao Login 말고 맨 하단의 [ Create Custom ] 을 눌러줍니다. 

 

Create Custom

 

3. 카카오 개발자도구에서 클라이언트키와 시크릿 키 정보를 가져와서 정보를 기입해줍니다.

 

정보기입 1

# authorization URL - https://kauth.kakao.com/oauth/authorize

# Token URL - https://kauth.kakao.com/oauth/token

# Scope - profile_nickname profile_image account_email

 

정보기입 2

 

# Fetch User Profile Script

 

function fetchUserProfile(accessToken, context, callback) {
  request.get(
    {
      url: "https://kapi.kakao.com/v2/user/me",
      headers: {
        Authorization: "Bearer " + accessToken
      },
    },
    (err, resp, body) => {
      if (err) {
        return callback(err);
      }

      if (resp.statusCode !== 200) {
        return callback(new Error(body));
      }

      let bodyParsed;

      try {
        bodyParsed = JSON.parse(body);
      } catch (jsonError) {
        return callback(new Error(body));
      }

      const profile = {
        user_id: bodyParsed.id,
        name: bodyParsed.kakao_account.profile.nickname,
        picture: bodyParsed.kakao_account.profile.thumbnail_image_url,
        email: bodyParsed.kakao_account.email,
        email_verified: bodyParsed.kakao_account.is_email_verified,
      };

      callback(null, profile);
    }
  );
}

 

 

 

■ 저장 후 Try Connection 을 시도해봅니다.

 

리다이렉트 URI를 설정해주지않아서 [ KOE006 ] 에러가 발생할텐데요, 

 

Auth0 에서 Applications 메뉴 -> APIs -> Auth0 Management API 클릭하면 Identifier를 확인할 수 있습니다.

Identifier 를 확인해줍니다. 이 URL을 수정해서 리다이렉트 URI를 등록해줄 겁니다.

 

 

# 카카오 개발자 센터에서 해당 URI로 리다이렉트 등록하기

 

https://autumn-test-1999.us.auth0.com/login/callback

 

 

 

■ 다시 테스트 해보면 로그인이 확인된다.

 

 

테스트가 완료되었다면, 이제 본인이 사용할 도메인과 리다이렉트 URI를 연결하면 됩니다.

안되거나 헷갈리는 부분이 있다면 댓글남겨주세요 ~