Vue.js) 구글 로그인 api 구현하기 (2)

https://archijude.tistory.com/422

JavaScript) 구글 로그인 api 개발자 설정(1)

이전 내용.

 

 

0. <mata> 태그 적용

<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="client_id.apps.googleusercontent.com">

 

 

1. 클라이언트 코드 <templete>

<div v-on:click="googleLoginBtn">
	<img style="width: 46px; height: 46px" src="@/assets/icon/google_button.svg">
</div>
<div id="my-signin2" style="display: none"></div>
<!-- 구글 버튼은 custom으로 만들었기 때문에 다음과 같이 스타일을 적용해준다. -->

 

2. 클라이언트 코드 <script>

methods: {
	//구글 버튼
    googleLoginBtn(){

      window.gapi.signin2.render('my-signin2', {
        scope: 'profile email',
        width: 240,
        height: 50,
        longtitle: true,
        theme: 'dark',
        onsuccess: this.onSuccess,
        onfailure: this.onFailure,
      });
      setTimeout(function () {
      	//display:none이기 때문에 시간차를 두고 코드로 클릭을 한다.
        document.querySelector('.abcRioButton').click();
      }, 1500)

    },
    //구글 로그인 이후 실행되는 콜백함수(성공)
    async onSuccess(googleUser) {

      const user_join_type = "g"
      const googleEmail = googleUser.getBasicProfile().pu
      console.log(googleEmail)

      const res = await fetch('https://123.121.123.1/api/sns_signup_check', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: `${googleEmail}`,
          user_join_type: user_join_type
        }),
      })

      const data = await res.json();
      this.checkSnSLogin(data, googleEmail,user_join_type);

    },
    //구글 로그인 콜백함수 (실패)
    onFailure(error) {
      // eslint-disable-next-line
      console.log(error);
    },

 

서버코드

콜백함수의 (googleUser : Object)이메일과 이용자 정보를 가져오기 때문에  잘추려서 사용하면된다.