안녕하세요 오늘은 next.js에서 카카오톡 api를 이용해서 저에 웹사이트에 적용하는 시간을 가져보겠습니다. 요즘은 카카오톡, 구글, 네이버 그리고 깃 헙 등등으로 로그인을 가능하게 해 주는데요. 이번에는 카카오톡에 대해 다뤄보겠습니다.
카카오 developer
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
1. 접속하기
2. 카카오톡 시작하기 -> 어플리케이션 추가하기 클릭 -> 앱 이름, 사업자명 입력하기
3. Javascript키 복사하기
Next js에서는 Javascript키를 가지고 로그인 기능을 구현할 거라서 Javascript키를 복사해서 Nextjs 프로젝트 root경로에. env파일을 복사, 붙여줍니다.
4. 플랫폼 설정
플랫폼 설정하기 클릭
nextjs로 만드는 프로젝트이기 때문에 web 플랫폼 등록 클릭.
테스트하기 위해 Local서버로 도메인을 등록해줍니다.
5. 카카오 로그인 활성화
좌측에 제품설명 > 카카오 로그인을 클릭합니다.
활성화 설정에서 상태를 On 으로 바꿔줍니다. Redirect URI는 로그인한 후 인가 코드를 받을 곳으로 redirect 시켜주는 URI입니다.
6. 동의항목
제품 설명 > 동의 항목에 들어가면
개인정보란에 닉네임, 프로필 사진 등 내 사이트에서 KAKAO로 회원 가입할 때 넣어줄 개인정보를 설정할 수 있습니다.
7. NEXT.js 프로젝트 설정
_document.tsx에 Head 부분에 script 태그를 삽입해줍니다.
_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => (
<Html>
<Head>
<script
defer
src="https://developers.kakao.com/sdk/js/kakao.js"
></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
export default Document
_app.tsx에서 window 객체 안에 Kakao가 있다는 걸 선언해줘 주고 초기화 함수를 호출해줍니다.
_app.tsx
declare global {
interface Window {
Kakao: any;
}
}
function MyApp({ Component, pageProps }: AppProps) {
useEffect(() => {
try {
if (!window.Kakao.isInitialized() && window.Kakao) {
window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT);
}
} catch(e) { console.log(e)}
}, [])
return (
<div>
<Nav />
<Component {...pageProps} />
</div>
)
}login function
버튼을 클릭 시에 loginFormWithKakao함수를 실행시켜줍니다.
코드가 성공적으로 완료가 되면 localstorage에 token을 저장해주고, main으로 redirect 해줍니다.
실패 시에는 err를 console창에 띄어줍니다.
const loginFormWithKakao = () => {
window.Kakao.Auth.login({
success(authObj: any) {
console.log(authObj);
window.localStorage.setItem('token', authObj.access_token);
router.push('/');
},
fail(err: any) {
console.log(err);
}
})
}logout function
로그아웃 버튼 클릭 시 kakaoLogout버튼을 실행시켜줍니다.
const kakoLogout = () => {
const { localStorage } = window;
localStorage.removeItem('token');
window.Kakao.Auth.logout(function() {
console.log('로그아웃 성공');
});
}
https://developers.kakao.com/docs/latest/ko/kakaologin/common
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
더 자세한 레퍼런스는 여기에서 참조하시면 됩니다. 감사합니다.
'coding > front-end' 카테고리의 다른 글
| [Next.js]다크모드 구현하기 (sass) (8) | 2022.04.24 |
|---|---|
| [Next]네이버 API - 로그인 구현 TypeScript (2) | 2022.04.20 |
| [Next]Slide-Images 커스텀 컴포넌트- (React, typescript) (3) | 2022.04.07 |
| [Next]Nextjs 시작하기 (0) | 2022.03.08 |
| [React]TypeScript + 리액트 시작하기 (0) | 2022.03.07 |
댓글