Angular Kakao API Login 앵귤러 카카오 로그인 side of frontend

0. 프론트엔드 연결 / 백엔드 연결 크게 두 가지 연결 방식이 존재합니다. 이번 글에서는 비교적 간단한 로직으로 구현이 가능한 프론트 엔드로 구현 예시를 설명합니다.

 

 

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

1. 최상단 템플릿에 선언

 

 <img
      src="assets/image"
      class="w-full"
      (click)="KaKaoLoginAPI()"
    />

2. 클릭 이벤트 달기

 

 restApiKey = '';
 javascriptApiKey = '';

public ngOnInit(): void {
    Kakao.init(this.javascriptApiKey); // 자바스크립트 key Init 하기
    console.log(Kakao.isInitialized()); // javascript DK 가 정상적으로 실행되면 true => javascript key 유효성 검사
  }

3. 자바스크립트 API KEY INIT

 

https://developers.kakao.com/

Kakao Developers

4. 카카오 디벨로퍼 접속 후

5. 앱키 가져오기 

6. 만약 아무런 앱이 없다면? 로그인 후 아무 앱 만드시면 됩니다.

 

 

7. 플랫폼 등록하기 : 현재 웹에서 테스트 중이므로 테스트 도메인 등록

 

 

 8. 동의항목에서 현재 내 어플리케이션에서 사용자로부터 받아야 할 데이터를 선택합니다.

 

 

9. 끝으로 카카오 로그인 활성화 설정 ON

 

 

declare const Kakao: any;

KaKaoLoginAPI(): void {
    Kakao.Auth.login({
      success: () => {
        Kakao.API.request({
          url: '/v2/user/me',
          success: (res: any) => {
            console.log('성공 : ', res);
          },
          fail: (err: any) => {
            alert(`개인정보를 가져올 수 없습니다. ${JSON.stringify(err)}`);
          },
        });
      },
      fail: (err: any) => {
        alert(`도메인을 확인해주세요. ${JSON.stringify(err)}`);
      },
    });
  }

10. 카카오 로그인 메소드 바인딩

 

끝!