SPA기반 Front 카카오 로그인 api 연동

Front(SPA)  카카오 로그인 API 연동 하기(Angular)

카카오 로그인 API 연동

:  로그인 api 연동방식이 타 sns(소셜) api 에 비해 가장 심플하고 군더더기가 없어 로그인 연동 방식이 어렵지 않습니다.  상세한 부분은 아래에 카카오에서 제공하는 공식 문서를 확인 바랍니다.

* api 문서 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

import { Component, NgZone, OnInit, OnDestroy } from '@angular/core';

declare const Kakao: any;
declare const $: any;

export const kakao_key = {
    apiKey: '1d1112312312312312312312gasf2131'
};


@Component({
    selector: 'app-kakao-login',
    template: `<a href="javascript:;" (click)="Login()">카카오 로그인</a>`
})

export class KaKaoLoginComponent implements OnInit, OnDestroy {

    constructor(
        public ngZone: NgZone,
    ) {
    }


    public ngOnInit(): void {
        // 카카오 sdk 호출
        try {
            setTimeout(() => {
                this.load();
            }, 10);
        } catch (err) {
            console.log(err);
        }
    }

    public load(): void {
        const Script = document.createElement('script');
        Script.id = 'kakao';
        Script.src = `https://developers.kakao.com/sdk/js/kakao.min.js`;
        Script.async = true;
        document.head.appendChild(Script);
        const KakaoLogin = () => {
            if (!Kakao.isInitialized()) {
                Kakao.init(kakao_key.apiKey);
            }
        };
        Script.addEventListener('load', KakaoLogin);
    }

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