[Nuxt.js]Nuxt Googleログイン、NAVERログイン

Nuxt.js+NAVERログイン

1.NAVERの作成者が作成したアプリケーションを登録する

2.Nuxtでのログインページの実装

<template>
  <div>
    <Login />
  </div>
</template>

<script>
import Login from '@/components/bonaem-mobile/Account/Login'
export default {
  components: {
    Login
  }
}
</script>

<template>
	<img @click="loginWithNaver()" class="naver-btn" src="@/assets/login/naver_login.png">
</template>
<script>

export default {
  name: 'Login',
  methods: {
    loginWithNaver () {
      const naverLogin = new naver.LoginWithNaverId({
        clientId: '클라이언트 아이디',	//Application -> 내 애플리케이션 -> 개요 -> ClientId를 확인
        callbackUrl: `${window.location.origin}/naver-login`,
        callbackHandle: true
      })
      naverLogin.init()
      naverLogin.reprompt()
    }
  }
}
</script>

    script: [
      { src: 'https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js' }
    ]

<template>
  <section class="section">
      네이버 로그인 OK
  </section>
</template>

<script>
export default {
  name: 'Login',
  mounted () {
    const naverLogin = new naver.LoginWithNaverId({
      clientId: '클라이언트 아이디'
    })
    naverLogin.init()
    naverLogin.getLoginStatus(function(status) {
      if (status) {
        const info = {
          id: naverLogin.user.id,
          age: naverLogin.user.age,
          gender: naverLogin.user.gender,
          nickname: naverLogin.user.nickname,
          profile_image: naverLogin.user.profile_image,
        }

        console.log(naverLogin.user)
        console.log(naverLogin.accessToken)
      } else {
        console.log('AccessToken이 올바르지 않습니다.') 
      }
    })
  }
}
</script>

Nuxt.js+Googleログイン

1.まずはGoogleよよよボタンを使います。

2.Nuxtでのログインページの実装

<template>
    <img @click="loginWithNaver()" class="naver-btn" src="@/assets/login/naver_login.png">
</template>
<script>

export default {
  name: 'Login',
  mounted () {
    // google login
    window.__google_oauth_useful_variables = {
            client_id: '클라이언트아이디.apps.googleusercontent.com',
            warning: true,
            customButtonId: 'googleSignIn',
            attachSignin: this.attachSignin,
            onSignIn:this.onSignIn,
            onFailSignIn:this.onFailSignIn
        };
        gapi.load('auth2', function(){
            try {
                window.auth2 = gapi.auth2.init({
                    client_id: window.__google_oauth_useful_variables.client_id,
                    cookiepolicy: 'single_host_origin',
                });
            }catch (e) {
                window.__google_oauth_useful_variables.warning ? console.warn(e):null;
            }
            try {
                if (window.__google_oauth_useful_variables.customButtonId){
                    window.__google_oauth_useful_variables.attachSignin(document.getElementById(window.__google_oauth_useful_variables.customButtonId));
                }
            }catch (e) {
                window.__google_oauth_useful_variables.warning ? console.warn(e):null;
            }
        });

        if(!this.customButton) {
            gapi.signin2.render('googleSignIn', {
                scope: this.scope,
                width: this.width,
                height: this.height,
                longTitle: this.longTitle,
                theme: this.theme,
                onsuccess: this.onSignIn,
                onfailure: this.onFailSignIn
            });
        }
      this.validate();
  },
 methods: {
    validate () {
        if(typeof this.successCallBack === "undefined")
          this.warning ? console.warn("Google Sign In --> Specify the success callback method to get the data") : null;
        else if(typeof this.successCallBack !== "function")
          this.warning ? console.warn("Google Sign In --> Success Callback must be a valid Function") : null;
        if(typeof this.failureCallBack === "undefined")
          this.warning ? console.warn("Google Sign In --> Specify the Failure callback method to get the Error data") : null;
        else if(typeof this.failureCallBack !== "function")
          this.warning ? console.warn("Google Sign In --> Failure Callback must be a valid Function") : null;
        if(this.customButton) {
            if(typeof this.customButtonId === 'undefined')
                this.warning ? console.warn("Google Sign In --> Please Provide customButtonId or change the customButton to false") : null;

        }
      },
    attachSignin (element) {
            window.auth2.attachClickHandler(element, {},
                function(googleUser) {
                    window.__google_oauth_useful_variables.onSignIn(googleUser);
                }, function(error) {
                    window.__google_oauth_useful_variables.onFailSignIn(error);
                }
            );
        },
    onSignIn (googleUser) {
        let id_token = googleUser.getAuthResponse().id_token;
        let profile = googleUser.getBasicProfile();
        if (typeof this.successCallBack === "function") {
          const user = {
            id_token,
            id: profile.getId() ? profile.getId() : null,
            name: profile.getName() ? profile.getName() : null,
            image: profile.getImageUrl() ? profile.getImageUrl() : null,
            email: profile.getEmail() ? profile.getEmail() : null
          }
          this.successCallBack(user);
        }
      },
      onFailSignIn (error) {
        if (typeof this.failureCallBack === "function")
          this.failureCallBack(error);
      },

    successCallBack (user) {
      console.log(user)
    },
    failureCallBack (errorData) {
      console.log(errorData)
    },
  }
}
</script>

    script: [
      { src: 'https://apis.google.com/js/platform.js' }
    ]