네이버 로그인 구현 React(리액트) Nextjs NextAuth naver login

 

 

안녕하세요?

 

지난 시간에는 카카오 로그인에 대해 구현해 봤는데요.

 

1편. 카카오 로그인

https://cpro95.tistory.com/516

카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login

 

오늘은 국내 탑 포털인 네이버 로그인에 대해 알아 보겠습니다.

 

먼저, 아래 링크로 들어가서 네이버 디벨로퍼 애플리케이션 신청을 해야 합니다.

 

상단 메뉴 Application 밑에 내 애플리케이션과 애플리케이션 등록 메뉴가 있네요.

 

먼저 내 애플리케이션 메뉴로 들어가 보겠습니다.

 

이 글 쓰기 전에 테스트 겸 하나 만들어 놓은게 있네요.

 

이 글은 튜토리얼이니까 첫 화면 애플리케이션 등록 화면으로 가서 처음부터 알아 볼까요?

 

애플리케이션 이름은 본인 마음에 맞게 넣어주시고요.

 

사용 API는 "네아로 (네이버 아이디로 로그인)"을 누르십시요.

 

그럼, 다음과 같이 뜹니다.

 

카카오 로그인할 때도 동의항목 선택할때랑 비슷하네요.

 

어떤 걸 골라야 할까요? 먼저 이메일 주소는 무조건 선택 하십시요.

 

로그인 했을 때 로그인 한 유저는 어떻게 구별할까요?

 

바로 이메일 주소입니다. 이메일 주소는 동일할 수 없거든요.

 

그럼 우리는 이메일주소, 별명, 프로필 사진만 고르도록 하겠습니다.

 

이렇게 고른 이유는 이게 그나마 타인이 볼때도 그렇게 민감한 정보가 아니거든요.

 

그리고 마지막 맨 밑에 환경추가을 누르시면 여러가지가 나오는데 우리는 PC웹에서 사용할 예정이라 그걸 고릅시다.

 

당연히 모바일웹에서도 작동되니 걱정마시길 바랍니다.

 

카카오 로그인때도 같은 걸 넣었었는데 바로 개발서버 주소 http://localhost:3000 과 콜백URL을 등록했습니다.

 

콜백 URL 은 http://localhost:3000/api/auth/callback/naver 입니다.

 

그리고 나중에 웹앱이 완성되고 배포할 때는 localhost:3000 을 각자 도메인으로 바꾸시면 됩니다.

 

netlify나 vercel 로 배포할 때 꼭 여기와서 도메인을 바꿔줘야 작동하니 꼭 기억하시기 바랍니다.

 

이제 등록하기 버튼을 누르십시요.

 

그러면 다음과 같이 뜹니다.

 

우리가 필요로 하는 정보는 바로 Cliend ID 와 Client Secret 입니다.

 

이걸 우리의 소스코드에서 .env에 옮겨 놔야 합니다.

 

아래 그림은 .env 파일입니다.

 

 

이제 네이버 디벨로퍼쪽은 마무리가 되었습니다.

 

그럼 다시 NextJS 코드로 넘어가 보겠습니다.

 

다음 파일에 네이버 관련 프로바이더(Providers)를 추가하겠습니다.

 

 

/pages/api/auth/[...nextauth].ts

import { NextApiHandler } from 'next';
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import Adapters from 'next-auth/adapters';
import prisma from '../../../lib/prisma';

const authHandler: NextApiHandler = (req, res) => NextAuth(req, res, options);
export default authHandler;

const options = {
    providers: [
        Providers.Kakao({
            clientId: process.env.KAKAO_CLIENT_ID,
            clientSecret: process.env.KAKAO_CLIENT_SECRET
        }),
        Providers.Naver({
            clientId: process.env.NAVER_CLIENT_ID,
            clientSecret: process.env.NAVER_CLIENT_SECRET
        }),
    ],
    adapter: Adapters.Prisma.Adapter({ prisma }),
    secret: process.env.SECRET,
};

카카오 밑에 네이버 Provider 를 추가했습니다.

 

이제 개발 서버를 돌려 볼까요?

 

참고로 .env 파일을 수정하면 무조건 아래와 같이 개발 서버를 다시 돌려야 됩니다.

 

npm run dev

 

로그인 버튼(signin button)을 눌렀을 때 바로 네이버 로그인이 나왔습니다.

 

순서는 위에 있는 코드인 [...nextauth].ts 에 적힌 순서대로 나옵니다.

 

한번 클릭해 볼까요?

 

네이버 아이디로 로그인은 화면이 무지 큽니다.

 

청소년 부터 노년층까지 모두 케어할려고 UI를 일부러 크게 한거 같네요.

 

로그인 해봤습니다. 다음과 같은 동의화면이 나오네요.

 

 

역시나 우리가 네이버 디벨로퍼에서 동의화면에서 선택한 세가지 즉, 이메일 주소, 별명, 프로필 사진이 필수 제공항목으로 나열되었습니다.

 

동의하기 버튼을 눌러 볼까요?

 

카카오 로그인할 때 썼던 image 부분이 깨졌네요.

 

왜 깨졌는지 확인해 볼까요?

 

Prisma studio를 실행해 봅시다.

 

npx prisma studio

우리의 DB User 테이블에 두번째로 로그인한 정보가 나왔네요.

 

그런데 image가 null 이고 name 도 null 이네요.

 

이런, 아까 동의화면에서 이름을 고를껄 그랬네요.

 

별명이 없을 수 도 있기 때문입니다.

 

아까 네이버 디벨로퍼로 가서 API 설정 -> 사용 API에서 별명을 선택해제하고 회원이름을 선택했습니다.

 

그리고 맨 밑에 수정 버튼을 눌렀습니다.

 

그럼 개발서버를 로그아웃하고 prisma studio에서 session이랑 user, account를 다 지우고 다시 해 보겠습니다.

 

그래도 안 되네요.

 

그러면 마지막으로 네이버 애플리케이션을 삭제하고 다시 만드는게 좋겠습니다.

 

이번에는 동의화면에 꼭 이름이랑 프로필사진, 이메일을 선택합시다.

 

그리고 Client_id랑 Client_key 랑 다시 .env 에 넣으시고

 

개발 서버 다시 돌립시다.

 

우리가 찾는 프로필 사진은 네이버 API에서 보면 response/profile_image 가 우리의 image입니다.

 

우리의 DB 항목은 image인데 profile_image 라고 이름이 틀려서 못 가지고 오는거 같습니다.

 

그래서 Providers.Naver 를 쓰지 않고 수동으로 직접 옵션을 넣어봤습니다.

{
            id: "naver",
            name: "Naver",
            type: "oauth",
            version: "2.0",
            params: { grant_type: "authorization_code" },
            protection: ["state"],
            accessTokenUrl: "https://nid.naver.com/oauth2.0/token",
            authorizationUrl:
                "https://nid.naver.com/oauth2.0/authorize?response_type=code",
            profileUrl: "https://openapi.naver.com/v1/nid/me",
            profile(profile: any) {
                return {
                    id: profile.response?.id,
                    name: profile.response?.name,
                    email: profile.response?.email,
                    image: profile.response?.profile_image
                }
            },
            clientId: process.env.NAVER_CLIENT_ID,
            clientSecret: process.env.NAVER_CLIENT_SECRET
        }

profile 부분에서 보시면 image 항목으로 profile.response.profile_image를 불러오고 있습니다.

 

우리의 DB에는 image 항목이 있기 때문이죠.

 

다시 개발 서버를 돌리고 네이버로 로그인 해봅시다.

 

 

 

프로필 사진이 제대로 떴네요.

 

그리고, console.log 부분도 볼까요?

name과 image 부분에 우리가 원하는 정보가 매칭되었습니다.

 

결론적으로 Naver 로그인은 수동 Provider를 작성했네요.

 

전체적인 코드입니다.

 

import { NextApiHandler } from 'next';
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import Adapters from 'next-auth/adapters';
import prisma from '../../../lib/prisma';

const authHandler: NextApiHandler = (req, res) => NextAuth(req, res, options);
export default authHandler;

const options = {
    providers: [
        Providers.Kakao({
            clientId: process.env.KAKAO_CLIENT_ID,
            clientSecret: process.env.KAKAO_CLIENT_SECRET
        }),
        // Providers.Naver({
        //     clientId: process.env.NAVER_CLIENT_ID,
        //     clientSecret: process.env.NAVER_CLIENT_SECRET
        // }),
        {
            id: "naver",
            name: "Naver",
            type: "oauth",
            version: "2.0",
            params: { grant_type: "authorization_code" },
            protection: ["state"],
            accessTokenUrl: "https://nid.naver.com/oauth2.0/token",
            authorizationUrl:
                "https://nid.naver.com/oauth2.0/authorize?response_type=code",
            profileUrl: "https://openapi.naver.com/v1/nid/me",
            profile(profile: any) {
                return {
                    id: profile.response?.id,
                    name: profile.response?.name,
                    email: profile.response?.email,
                    image: profile.response?.profile_image
                }
            },
            clientId: process.env.NAVER_CLIENT_ID,
            clientSecret: process.env.NAVER_CLIENT_SECRET
        }
    ],
    adapter: Adapters.Prisma.Adapter({ prisma }),
};

이상으로 네이버 로그인에 대해 알아 봤습니다.

 

다음 시간에는 구글 아이디로 로그인하는 부분을 살펴 보겠습니다.

 

끝.