Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- modal
- 아이오닉 스크롤 이벤트
- 셀렉트박스 커스텀
- TAILWIND
- 스크롤 이벤트
- angular button
- 스크롤 이벤트 감지
- flex-1
- 호버
- 옵저버블
- ApexChart
- mysql if
- Ionic modal
- egov spring ajax 사용 예시
- formgroup
- angular modal
- 모달
- Router
- ajax 사용 예시
- summary
- scroll
- 검색
- route
- angular route
- prisma
- Angular Router
- angular animation
- Oracle LISTAGG 사용 예시
- 앵귤러 애니메이션
- 앵귤러 모달
Archives
- Today
- Total
깜놀하는 해므찌로
Angular Kakao API Login 앵귤러 카카오 로그인 side of frontend 본문
반응형
SMALL
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
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
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. 카카오 로그인 메소드 바인딩
끝!
반응형
LIST
'IT' 카테고리의 다른 글
Angular router config 활용 예시 (0) | 2023.06.14 |
---|---|
HTML Semantic tag / Angular - tailwind @apply 사용 예시 (0) | 2023.06.14 |
Angular input date set value / 앵귤러 input type date 값 셋팅 예시 (0) | 2023.06.13 |
tailwind 커스텀 추가 예시 (0) | 2023.06.13 |
Login Token 활용 로직 feat.jwt (0) | 2023.06.13 |