소셜로그인 연동 → 네이버 1

작성일 | In ,

로그인 화면 띄우기

네이버 개발자 계정 생성 및 앱 등록

  • 네이버 개발자 센터에서 애플리케이션 등록 (API 이용 신청)
    1. 애플리케이션 등록에서 애플리케이션 이름, 사용 API 설정
  • 내 애플리케이션 → API 설정
    1. 환경 추가 PC웹 설정 → 서비스 URL 설정
    2. Redirect URI 설정 로그인 오픈 API 서비스 환경 → 네이버 로그인 Callback URL 설정

네이버 SDK 로드

  • index.html 파일에 스크립트 태그 추가
    1
    <script type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>
  • NaverLogin.jsx 파일 생성
    ```javascript import { useEffect } from “react” import Button from “./Button”;

const NaverLogin = () => { const NAVER_CLIENT_ID = “NAVER_CLIENT_ID”; const NAVER_CALLBACK_URL = “http://localhost:5173/login”;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const initializeNaverLogin = () => {
    const naverLogin = new naver.LoginWithNaverId({
        clientId: NAVER_CLIENT_ID,
        callbackUrl: NAVER_CALLBACK_URL,
        isPopup: true,
        callbackHandle: true,
    })
    naverLogin.init()
}

useEffect(() => {
    initializeNaverLogin()
}, [])


return (
    <Button
        onClick={() => initializeNaverLogin()}
        type={'naver'}
        text={'SIGN IN/JOIN WITH NAVER'}
        id={'naverIdLogin_loginButton'}
    />
) }

export default NaverLogin

1
2
3
4
5
6
7
8

# 문제
## 문제 1.
이렇게 작성 시 **naver 에서 부터 오류**가 생김. 콘솔에는 찾을 수 없다고 뜸.<br/>
진짜 이유를 모르겠어서 한참 검색을 해보다가 **naver 변수를 설정**해준 블로글 보고 나도 설정을 해주니까 오류가 안뜸.

```javascript
const { naver } = window

문제 2.

버튼을 클릭했는데, 아무런 반응이 없음.
계속 해도 아무런반응이 없었다… 답답해 죽는 줄 알았다… 또 무한 검색을 하는 도중 한 블로그를 발견.
참고 블로그
중간 쯤 보면 “객체로 loginButton을 설정할 수 있는데, type으로 네이버 로그인 버튼을 바꿀수있다.” 라고 적혀있었고 그걸 보고 loginButton 객체를설정

1
2
3
4
5
6
7
8
9
10
const initializeNaverLogin = () => {
    const naverLogin = new naver.LoginWithNaverId({
        clientId: NAVER_CLIENT_ID,
        callbackUrl: NAVER_CALLBACK_URL,
        isPopup: true,
        loginButton: { color: 'green', type: 1, height: 58 },
        callbackHandle: true,
    })
    naverLogin.init()
}

그래도 안나옴….. 진짜 잘 모르겠으니까 너어어무 답답했다. 그래도 서칭을 계속하다가 블로그에 누가 적어놓은 주석을 발견.
참고 블로그 - 리액트로 네이버 소셜 로그인 적용하기
위 블로그에 중간 쯤 주석으로 ”// 태그에 id=”naverIdLogin” 를 해주지 않으면 오류가 발생한다! ” 라고 작성한 걸 보고 을 없애고 div로 id 값 설정.

1
2
3
return (
    <div id="naverIdLogin"></div>
)

드디어!! 버튼이 보이기 시작!!

하지만 내가 원하는 버튼이 아니였다. 이질감이 없었으면… 좋겠어….
개발자도구에서 img 태그 제거해보고, a 태그 제거해보고 어떤걸로 연결되어있는지 확인해보다가 id=”naverIdLogin” 자체만 있어도 로그인 창이 열리는 것 확인.

그래서 코드를 naverIdLogin 안에 Button을 작성.

1
2
3
4
5
6
7
8
9
return (
    <div id="naverIdLogin">
        <Button
            type={'naver'}
            text={'SIGN IN/JOIN WITH NAVER'}
            id={'naverIdLogin_loginButton'}
        />
    </div>
)

멋지게 완성이 되었음.