<div id="readability-page-1" class="page"><cite>유세지</cite>
 2023. 10. 16. 00:39
 <div>
 
<figure data-ke-mobilestyle="widthOrigin" data-filename="Thumbnail (17).png" data-origin-width="1920" data-origin-height="1080">
 
 <img src="https://blog.kakaocdn.net/dn/bWpLU8/btsys2x7FU3/aM8yZoDrzd8abqK0F1Omo0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="755" height="425" data-filename="Thumbnail (17).png" data-origin-width="1920" data-origin-height="1080">
 
 
</figure>


<h2 data-ke-size="size26">들어가며</h2>
오늘은 Next.js 13에서 Firebase와의 연동을 이용해 Kakao 로그인을 구현하는 방법을 알아보겠습니다. 비교적 공식 문서가 자세히 설명되어있고, 각종 정보가 많은 편이라 어렵지 않게 구현할 수 있습니다.

먼저 로그인을 적용하는 과정을 크게 한 번 살펴보겠습니다.


<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1200" data-origin-height="1460">
 
 <img src="https://blog.kakaocdn.net/dn/bV4oWB/btsyta3ONHr/in52dHafrwaxfvadBxfqdK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="719" height="875" data-origin-width="1200" data-origin-height="1460">
 
 <figcaption>로그인 시퀀스 다이어그램 (Kakao Developers &gt; 문서)</figcaption>
</figure>


크게 보면 카카오 로그인, 회원 확인 및 가입, 서비스 로그인의 세 단계로 나뉘어집니다.
이 포스트에서 알아볼 것은 step1의 카카오 로그인 부분입니다.&nbsp;



<h2 data-ke-size="size26">서비스 등록</h2>
카카오 API를 사용하기 위해서는 먼저 사용할 서비스를 등록해야 합니다.
Kakao Developers에서 "애플리케이션 추가하기" 를 통해 서비스를 등록해줍니다.


<figure>
 <span data-url="https://blog.kakaocdn.net/dn/bchVXB/btsywvZSePr/QoRkwNdhJQYlTGWgcv3w2K/img.png" data-lightbox="lightbox" data-origin-width="924" data-origin-height="518" data-is-animation="false" data-filename="edited_blob" data-widthpercent="61.94"><img src="https://blog.kakaocdn.net/dn/bchVXB/btsywvZSePr/QoRkwNdhJQYlTGWgcv3w2K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"><span data-url="https://blog.kakaocdn.net/dn/32B4r/btsyBi6PeXn/Zs7843BH5aukcOlkImMd90/img.png" data-lightbox="lightbox" data-origin-width="697" data-origin-height="636" data-is-animation="false" data-filename="blob" data-widthpercent="38.06"><img src="https://blog.kakaocdn.net/dn/32B4r/btsyBi6PeXn/Zs7843BH5aukcOlkImMd90/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';">
 
 
</figure>



<h2 data-ke-size="size26">환경 설정</h2>
<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="887" data-origin-height="564">
 
 <img src="https://blog.kakaocdn.net/dn/I82ub/btsytNfUELU/4pA9hBXqgpgFQDaXQFjMik/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="blob" data-origin-width="887" data-origin-height="564">
 
 
</figure>


서비스가 등록되었다면, [요약 정보] 메뉴의 [앱 키] 에서 서비스 인증에 사용될 키 값들을 확인할 수 있습니다.
이 값들을 통해 요청을 보내는 주체가 나의 서비스임을 확인받고, API를 사용할 수 있게 됩니다.

이제 이 키 값들을 프로젝트에 넣어서 사용해야 하는데, 일반적인 리액트 프로젝트나 CRA 환경에서는 .env를 이용하여 환경 변수를 관리하는 것처럼&nbsp;Next.js에서는 <code>.env.local</code> 파일에 넣어 관리할 수 있습니다. 외부에 노출되면 안되는 민감한 정보이니, 따로 관리해줍시다.


<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="756" data-origin-height="321">
 
 <img src="https://blog.kakaocdn.net/dn/cf1fcA/btsytOeORgU/75IwEC4CMY56GSbMkJjbS0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="blob" data-origin-width="756" data-origin-height="321">
 
 <figcaption>민감한 정보는 환경 변수 파일에 넣어 관리합니다.</figcaption>
</figure>


준비가 끝났다면 sdk를 이용해 API를 내려받아야 합니다.
별도의 컴포넌트 하나를 만들어 불러오겠습니다.

<pre id="code_1697381578042" data-ke-language="typescript" data-ke-type="codeblock"><code>"use client";
import Script from "next/script";

export default function KakaoInit() {
 function kakaoInit() {
 window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JS_KEY);
 console.log(window.Kakao.isInitialized());
 }

 return (
 &lt;Script
 src="https://developers.kakao.com/sdk/js/kakao.js"
 onLoad={kakaoInit}
 /&gt;
 );
}</code></pre>


Next.js의 &lt;Script /&gt; 태그를 사용하기 때문에,
컴포넌트가 클라이언트에서 실행된다는 정보를 알 수 있도록 최상단에 "use clinet" 를 붙여줍니다.

이제 이 컴포넌트를 최상위 Layout 컴포넌트에 붙여주면 됩니다.
최상위 Layout에서는 글로벌에서 접근할 수 있도록 Window에 Kakao 속성을 함께 선언해줍니다.

app/layout.tsx
<pre id="code_1697381752926" data-ke-language="typescript" data-ke-type="codeblock"><code>import Layout from "components/Layout";
import KakaoInit from "components/KakaoInit";

declare global {
 interface Window {
 Kakao: any;
 }
}

export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 &lt;html lang="ko"&gt;
 &lt;KakaoInit /&gt;
 &lt;body&gt;
 &lt;Layout&gt;{children}&lt;/Layout&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 );
}</code></pre>


이제 프로젝트 단에서 카카오 API의 세팅은 끝났으니, 바로 사용해보겠습니다.



<h2 data-ke-size="size26">로그인</h2>
카카오 로그인 버튼은 공식 디자인 가이드를 따라야합니다.
[카카오싱크] 메뉴에서 원하는 크기와 모양의 공식 이미지를 내려받아줍니다.
페이지에 들어갈 버튼이니 본인 서비스의 디자인을 고려하여 고르는 것이 좋습니다.

<figure data-ke-mobilestyle="widthOrigin" data-filename="edited_blob" data-origin-width="1264" data-origin-height="881">
 
 <img src="https://blog.kakaocdn.net/dn/bzx4VI/btsyqwfdWt8/21lE2mPkvVocnpvnOo6cu1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="754" height="526" data-filename="edited_blob" data-origin-width="1264" data-origin-height="881">
 
 
</figure>


이미지를 내려 받았다면, 이미지를 public 디렉토리에 넣어줍니다.
Next.js에선 public 디렉토리에 들어있는 이미지를 바로 불러올 수 있습니다.


app/login/page.tsx
<pre id="code_1697381988913" data-ke-language="typescript" data-ke-type="codeblock"><code>"use client";
import Image from "next/image";
import styles from "./page.module.css";

function kakaoLogin() {
 window.Kakao.Auth.authorize({
 redirectUri: "http://localhost:8080/kakao",
 });
}

export default function Home() {
 return (
 &lt;main className={styles.container}&gt;
 &lt;div className={styles.introduction}&gt;
 &lt;h5&gt;안녕하세요! 링꾹입니다.&lt;/h5&gt;
 &lt;p&gt;링꾹을 이용하시려면 로그인이 필요합니다.&lt;/p&gt;
 &lt;/div&gt;
 &lt;button onClick={kakaoLogin}&gt;
 &lt;Image
 src="/kakao_login.png"
 alt="Login with Kakao"
 width={300}
 height={45}
 priority
 /&gt;
 &lt;/button&gt;
 &lt;/main&gt;
 );
}</code></pre>


클릭 함수에는 <code>Kakao.Auth.authorize()</code> 메서드를 넣어줍니다.
속성의 redirectUrl에는 리다이렉트로 인가 코드를 발급받을 주소를 넣습니다.

그 뒤, app 디렉토리 하위에 해당 리다이렉트를 받아줄 주소로 디렉토리를 만들어주고,
해당 디렉토리의 page.tsx에서 코드를 받아 사용할 수 있도록 해줍니다.


<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="236" data-origin-height="156">
 
 <img src="https://blog.kakaocdn.net/dn/cB0RMK/btsyterA8wx/Zu9INVHnjfhcSIi6L3wiiK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="blob" data-origin-width="236" data-origin-height="156">
 
 
</figure>


실제 서비스에서는 주소 부분에 localhost 대신 서비스가 사용하는 도메인을 넣어주시면 되겠습니다.



<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="553" data-origin-height="350">
 
 <img src="https://blog.kakaocdn.net/dn/dOjTKu/btsyudyHbQd/65kQk1nLGSJYOTwtHea96k/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="blob" data-origin-width="553" data-origin-height="350">
 
 
</figure>


깔끔하게 나오고 있는 모습이네요.
그러나 이대로 클릭해보면 허용되지 않은 주소로 리다이렉트 된다는 오류가 발생하게 됩니다.

카카오 API는 보안상의 이유로 지정된 주소가 아니면 리다이렉트 요청을 받아들이지 않습니다.
일종의 화이트리스트를 이용하는 것과 같습니다.


<figure data-ke-mobilestyle="widthOrigin" data-filename="blob" data-origin-width="689" data-origin-height="541">
 
 <img src="https://blog.kakaocdn.net/dn/dqHf8x/btsytspD3L7/8ndemKB7srBVK0K5ue0QX1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="602" height="473" data-filename="blob" data-origin-width="689" data-origin-height="541">
 
 
</figure>


[카카오 로그인] 메뉴의 [Redirect URI] 탭에서 리다이렉트를 받을 주소를 등록해줍니다.
최대 10개까지 가능하며, 추가로 필요한 경우 별도로 요청해야합니다.


<figure>
 <span data-url="https://blog.kakaocdn.net/dn/cdeywg/btsysrLmDsq/CtdaZVyR3khLQMSjNnbA3K/img.png" data-lightbox="lightbox" data-origin-width="684" data-origin-height="728" data-filename="blob" data-is-animation="false" width="616" height="656" data-widthpercent="58.39"><img src="https://blog.kakaocdn.net/dn/cdeywg/btsysrLmDsq/CtdaZVyR3khLQMSjNnbA3K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';"><span data-url="https://blog.kakaocdn.net/dn/dGJT77/btsyt0NaPW7/uC08XLWguMDbV7IfWxrWr1/img.png" data-lightbox="lightbox" data-origin-width="632" data-origin-height="944" data-filename="edited_blob" data-is-animation="false" data-widthpercent="41.61"><img src="https://blog.kakaocdn.net/dn/dGJT77/btsyt0NaPW7/uC08XLWguMDbV7IfWxrWr1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';">
 
 
</figure>


이제 다시 시도해보면, 정상적으로 접근이 가능해졌습니다.


<figure data-ke-mobilestyle="widthOrigin" data-filename="edited_edited_blob" data-origin-width="952" data-origin-height="281">
 
 <img src="https://blog.kakaocdn.net/dn/DzIhT/btsys9KBvGz/LuddyeoyzkKAG4KhDWzTbk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="701" height="207" data-filename="edited_edited_blob" data-origin-width="952" data-origin-height="281">
 
 <figcaption>데이터도 잘 받아오고 있습니다! (모자이크 부분)</figcaption>
</figure>


<h2 data-ke-size="size26">마치며</h2>
오늘은 카카오 API를 이용하기 위해 프로젝트에 환경 설정을 하고, 통신까지 진행해보았습니다.

다음 포스팅에서는 받아온 데이터를 토대로 Firebase와 연동하여 저장하는 과정을 알아보겠습니다.
읽어주셔서 감사합니다.
 
 
 </div></div>

개발의 올바르지 않은 용례

들어가며
오늘은 Next.js 13에서 Firebase와의 연동을 이용해 Kakao 로그인을 구현하는 방법을 알아보겠습니다. 비교적 공식 문서가 자세히 설명되어있고, 각종 정보가 많은 편이라 어렵지 않게 구현할 수 있습니다.
 
먼저 로그인을 적용하는 과정을 크게 한 번 살펴보겠습니다.
 
 
 
 
크게 보면 카카오 로그인, 회원 확인 및 가입, 서비스 로그인의 세 단계로 나뉘어집니다.
이 포스트에서 알아볼 것은 step1의 카카오 로그인 부분입니다. 
 
 
 
서비스 등록
카카오 API를 사용하기 위해서는 먼저 사용할 서비스를 등록해야 합니다.
Kakao Developers에서 "애플리케이션 추가하기" 를 통해 서비스를 등록해줍니다.
 
 
 
 
 
환경 설정
 
 
서비스가 등록되었다면, [요약 정보] 메뉴의 [앱 키] 에서 서비스 인증에 사용될 키 값들을 확인할 수 있습니다.
이 값들을 통해 요청을 보내는 주체가 나의 서비스임을 확인받고, API를 사용할 수 있게 됩니다.
 
이제 이 키 값들을 프로젝트에 넣어서 사용해야 하는데, 일반적인 리액트 프로젝트나 CRA 환경에서는 .env를 이용하여 환경 변수를 관리하는 것처럼 Next.js에서는 .env.local 파일에 넣어 관리할 수 있습니다. 외부에 노출되면 안되는 민감한 정보이니, 따로 관리해줍시다.
 
 
 
 
준비가 끝났다면 sdk를 이용해 API를 내려받아야 합니다.
별도의 컴포넌트 하나를 만들어 불러오겠습니다.
 
"use client";
import Script from "next/script";
export default function KakaoInit() {
 function kakaoInit() {
 window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JS_KEY);
 console.log(window.Kakao.isInitialized());
 }
 return (
 <Script
 src="https://developers.kakao.com/sdk/js/kakao.js"
 onLoad={kakaoInit}
 />
 );
}
 
 
Next.js의 <Script /> 태그를 사용하기 때문에,
컴포넌트가 클라이언트에서 실행된다는 정보를 알 수 있도록 최상단에 "use clinet" 를 붙여줍니다.
 
이제 이 컴포넌트를 최상위 Layout 컴포넌트에 붙여주면 됩니다.
최상위 Layout에서는 글로벌에서 접근할 수 있도록 Window에 Kakao 속성을 함께 선언해줍니다.
 
app/layout.tsx
import Layout from "components/Layout";
import KakaoInit from "components/KakaoInit";
declare global {
 interface Window {
 Kakao: any;
 }
}
export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 <html lang="ko">
 <KakaoInit />
 <body>
 <Layout>{children}</Layout>
 </body>
 </html>
 );
}
 
 
이제 프로젝트 단에서 카카오 API의 세팅은 끝났으니, 바로 사용해보겠습니다.
 
 
 
로그인
카카오 로그인 버튼은 공식 디자인 가이드를 따라야합니다.
[카카오싱크] 메뉴에서 원하는 크기와 모양의 공식 이미지를 내려받아줍니다.
페이지에 들어갈 버튼이니 본인 서비스의 디자인을 고려하여 고르는 것이 좋습니다.
 
 
 
이미지를 내려 받았다면, 이미지를 public 디렉토리에 넣어줍니다.
Next.js에선 public 디렉토리에 들어있는 이미지를 바로 불러올 수 있습니다.
 
 
app/login/page.tsx
"use client";
import Image from "next/image";
import styles from "./page.module.css";
function kakaoLogin() {
 window.Kakao.Auth.authorize({
 redirectUri: "http://localhost:8080/kakao",
 });
}
export default function Home() {
 return (
 <main className={styles.container}>
 <div className={styles.introduction}>
 <h5>안녕하세요! 링꾹입니다.</h5>
 링꾹을 이용하시려면 로그인이 필요합니다.
 </div>
 <button onClick={kakaoLogin}>
 <Image
 src="/kakao_login.png"
 alt="Login with Kakao"
 width={300}
 height={45}
 priority
 />
 </button>
 </main>
 );
}
 
 
클릭 함수에는 Kakao.Auth.authorize() 메서드를 넣어줍니다.
속성의 redirectUrl에는 리다이렉트로 인가 코드를 발급받을 주소를 넣습니다.
 
그 뒤, app 디렉토리 하위에 해당 리다이렉트를 받아줄 주소로 디렉토리를 만들어주고,
해당 디렉토리의 page.tsx에서 코드를 받아 사용할 수 있도록 해줍니다.
 
 
 
 
실제 서비스에서는 주소 부분에 localhost 대신 서비스가 사용하는 도메인을 넣어주시면 되겠습니다.
 
 
 
 
 
깔끔하게 나오고 있는 모습이네요.
그러나 이대로 클릭해보면 허용되지 않은 주소로 리다이렉트 된다는 오류가 발생하게 됩니다.
 
카카오 API는 보안상의 이유로 지정된 주소가 아니면 리다이렉트 요청을 받아들이지 않습니다.
일종의 화이트리스트를 이용하는 것과 같습니다.
 
 
 
 
[카카오 로그인] 메뉴의 [Redirect URI] 탭에서 리다이렉트를 받을 주소를 등록해줍니다.
최대 10개까지 가능하며, 추가로 필요한 경우 별도로 요청해야합니다.
 
 
 
 
이제 다시 시도해보면, 정상적으로 접근이 가능해졌습니다.
 
 
 
 
마치며
오늘은 카카오 API를 이용하기 위해 프로젝트에 환경 설정을 하고, 통신까지 진행해보았습니다.
 
다음 포스팅에서는 받아온 데이터를 토대로 Firebase와 연동하여 저장하는 과정을 알아보겠습니다.
읽어주셔서 감사합니다.

Next.js 13에서 Kakao 로그인 처리하기 with Firebase (1)

댓글