저번에는 kakao api를 이용해서 로그인은 시도해 보았는데요. 이번에는 네이버 api를 이용해서 로그인을 구현해보겠습니다.
2022.04.17 - [coding/front-end] - [Next] 카카오톡 API 로그인 구현하기
[Next]카카오톡 API 로그인 구현하기
안녕하세요 오늘은 next.js에서 카카오톡 api를 이용해서 저에 웹사이트에 적용하는 시간을 가져보겠습니다. 요즘은 카카오톡, 구글, 네이버 그리고 깃 헙 등등으로 로그인을 가능하게 해 주는데
hun-dev.tistory.com
네이버 Developer
https://developers.naver.com/apps/#/register
애플리케이션 - NAVER Developers
developers.naver.com
1. 접속하기
2. 애플리케이션 이름 작성, 사용 API - 네이버 로그인 (내 프로젝트에 필요한 제공정보 클릭)
로그인 API 서비스 환경 - callback URL(로그인 후 리다이렉션 url) 후 등록하기
3. client ID, Client Secret키 저장해 놓기
4. Nex 프로젝트에 접속해서 env 파일에 clientID, Client Secret 키 저장하기
5. _document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => (
<Html>
<Head>
<script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charSet="utf-8"></script>
<script defer src="https://developers.kakao.com/sdk/js/kakao.js"></script> // <-- 추가해주기
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
export default Document_document.tsx 에 SDK를 추가해 줍니다.
6. _app.tsx
declare global {
interface Window {
Kakao: any;
naver: 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>
)
}_app.tsx 에서 미리 window에 naver의 타입을 any로 지정해줍니다. 안 해주게 되면
Property 'naver' does not exist on type 'Window & typeof globalThis'.이런 에러코드가 나오게 됩니다.(typeScript)
7. LoginNaver.tsx component
import { useEffect } from "react";
export default function LoginKakao() {
const loginFormWithNaver = () => {
const naverLogin = new window.naver.LoginWithNaverId({
clientId: process.env.NEXT_PUBLIC_NAVER_CLIENT_ID,
callbackUrl: 'http://localhost:3000/login',
isPopup: false,
loginButton: { color: 'white', type: 2, height: '45'}
});
naverLogin.init();
}
useEffect(() => {
loginFormWithNaver();
} ,[])
return (
<div id='naverIdLogin'/>
)
}네이버 로그인 버튼 component를 만들어 보았습니다. 이 버튼이 생성될 때 id가 naverIdLogin인 div에 loginFormwithnaver를 이용해서 버튼 기능을 넣어주었는데요. clientId 부분에 아까전에 env 파일에 저장해놓은 client_id를 넣어줍니다. callbackUrl은 아까 로그인후에 리다이렉트 시켜줄 Url을 적어주면 됩니다. ex) http://localhost:3000/login
8. naverLogin 사용하기
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import LoginNaver from '../components/LoginNaver';
export default function login() {
const router = useRouter();
useEffect(() => {
if (window.location.href.includes('access_token')) {
window.localStorage.setItem('token', window.location.href.split('=')[1].split('&')[0]?? 'none');
router.push('/');
};
}, [])
return (
<div>
<LoginNaver></LoginNaver>
</div>
)
}naver 에서는 로그인 후 callbackUrl에 access_token을 넘겨줍니다. 네이버 로그인 완료 후에 다시 /login경로에 돌아오면 useEffect를 이용해서 access_token을 localstorage에 저장해 주도록 했습니다. 추가적으로 backend까지 연결하게 되어있다면 access_token을 받게 되었을 때 backend에 access_token을 넘기고 회원정보가 없으면 만들어게 해줍니다.
'coding > front-end' 카테고리의 다른 글
| [Next] 티스토리 OPEN API next.js 에서 적용하기(1) (1) | 2022.05.02 |
|---|---|
| [Next.js]다크모드 구현하기 (sass) (8) | 2022.04.24 |
| [Next]카카오톡 API 로그인 구현하기 (3) | 2022.04.17 |
| [Next]Slide-Images 커스텀 컴포넌트- (React, typescript) (3) | 2022.04.07 |
| [Next]Nextjs 시작하기 (0) | 2022.03.08 |
댓글