Google web-login

Google web-login  설치 (1)

일단 Google HomePage 문서 기준으로 작성 하겠습니다.

먼저 https://console.cloud.google.com/  대쉬 보드에 들어 갑니다 .

그리고 대쉬 보드에 들어갑니다.

그리고 사용자 인증 정보 에서 애플리케이션 이름을 넣어 줍니다.

OAuth 클라이언트 ID를 만듭니다.

그리고 여기서 중요한점

승인된 자바스크립트 원본에

절대로 127.0.0.1 을 사용하지 않습니다. 또는 IP를 사용 하지 마세요

이것 때문에 꽤나 고생 했습니다.... 

127.0.0.1을 사용하면 허가권 오류가 나옵니다. 

나중에 사용할때

Permission denied to generate login hint for target domain 이런 에러가 뜹니다.

그리고 나중에 중요한것은 웹사이트 접속 할때에도 127.0.0.1 로 접속 하면 안됩니다. localhost 로 바꿔서 접속 해줘야 합니다.

그리고 생성해 주세요.

그리고 이젠 Web Front end 로 돌아 와서

Web Front end

---

https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin

요기 해당 문서를 따라 가면 됩니다.

먼저 아래 스크립트를 헤더에 추가해 줍니다.

<script src="https://apis.google.com/js/platform.js" async defer></script>

그 다음에 아래 meta 를 추가 해주라고 합니다. 

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com"> 

여기서 YOUR_CLIENT_ID  는

여기서 봤던 클라이언트 ID를 입력 해주면 됩니다.

<meta name="google-signin-client_id" content="711155811271-rjlp646ecev7jchejguhcfl714oisl5d.apps.googleusercontent.com">

<script src="https://apis.google.com/js/platform.js" async defer></script>

저는 위와 같이 추가 했습니다.

그리고 나서

<div class="g-signin2" data-onsuccess="onSignIn"></div>

위와 같이 버튼을 추가 하고

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

위와 같이 구글에서는 해주라고 합니다.

하지만 저는 주로 Vue 를 쓰다보니 커스텀 마이징 버튼을 써야 합니다. ㅠㅠ 

그리고 나면

위와 같은 버튼이 나오고

위와 같이 로그인 버튼 화면 까지 됩니다.

그리고 나서 로그인이 되지만 이것은 oauth2 연결 하기전에 google login 에 익숙해지기 위한 web-login 입니다.

크게 oauth2와 관계는 업습니다.

즉 해당 게시물로는 계정의 Profile 정보 외에는 사용할수가 없습니다.