Naver easy login

O-h-y-o1분 미만

Following Kakao Easy Login, let's look at Naver Easy Login.

Go to the Naver Developer Center and register the application.

Save the Client ID of the registered application to env or other places.

Next, let's write the service URL and callback URL.

Now let's write some code.

// index.html
<head>
  ...
  <script
    type="text/javascript"
    src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js"
    charset="utf-8"
  ></script>
  ...
</head>

// Component
<template>
  <div id="naverIdLogin" style="display: none"></div>
</template>

<script setup>
const naver = () => {
  const naverLogin = new window.naver.LoginWithNaverId({
    clientId: process.env.NAVER_CLIENT,
    callbackUrl: process.env.REDIRECT,
    isPopup: false,
    loginButton: {},
    callbackHandle: true,
  });

  naverLogin.init();
};

onMounted(() => {
  setTimeout(() => {
    naver();
  });
});
</script>

팁

If you get a typescript error in window.naver, write it as follows.

// global.d.ts
export {};

declare global {
  ...
  interface Window {
    naver: any;
  }
}

Create id="naverIdLogin" where you want to create a Naver login button.

You can remove style="display:none" if you don't want to customize it.

정보

If you created a NAVER login button for customization, write the code as in the example below.

<template>
  <q-btn @click="naverLogin">
    <q-icon name="img:/icons/kakao.svg" />
  </q-btn>
</template>

<script setup>
const naverLogin = () => {
  document.getElementById("naverIdLogin_loginButton")?.click();
};
</script>

When you click the login button, a response is sent to the callback URL as follows.

http://localhost:9000/#access_token=accessToken&state=state&token_type=bearer&expires_in=3600

You can continue the login function by coordinating with the backend server with the access_token of this callback URL.

// Extract only access_token
new URLSearchParams(location.href.split("#")[1]).get("access_token");

Naver easy login

# Naver easy login

Naver easy login