1. google APIs 옆에서 프로젝트 생성
2. 사용자 인증 정보 만들기 선택
1. OAuth 클라이언트 ID 선택
2. 애플리케이션 유형 선탣 ( 웹 애플리케이션 )
https://developers.google.com/identity/sign-in/web/sign-in
Integrating Google Sign-In into your web app
Google Sign-In manages the OAuth 2.0 flow and token lifecycle, simplifying your integration with Google APIs. A user always has the option to revoke access to an application at any time. This document describes how to complete a basic Google Sign-In integr
developers.google.com
index.html
index.html의 <head>에 아래 두 줄을 입력
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="클라이언트 ID">
login.vue
구글 로그인 버튼을 출력하고 싶은 위치에 넣고
<div class="g-signin2" data-onsuccess="onSignIn"></div><script>에 method {}에 넣어준다
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.
}
+) 로그아웃 기능 추가하기
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
로그인한 정보 받아오기
https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams
Google Sign-In JavaScript client reference
This reference describes the JavaScript client methods and attributes you will use to implement Google Sign-In in your web applications. If you encounter any issue using the library, please report it to our GitHub repository. Auth Setup Load the Google API
developers.google.com
https://developers.google.com/identity/sign-in/web/people
Getting profile information | Google Sign-In for Websites
After you have signed in a user with Google using the default scopes, you can access the user's Google ID, name, profile URL, and email address. Important: Do not use the Google IDs returned by getId() or the user's profile information to communicate the c
developers.google.com
'프로젝트 하면서 > vue' 카테고리의 다른 글
| [firebase] 'timestampsInSnapshots: true' is no longer required and should be removed (0) | 2020.08.18 |
|---|---|
| firebase 설정 (1) | 2020.08.12 |
| firebase에 데이터 저장하고 불러오기 (0) | 2020.08.12 |
| [vuex 공부] 내가 이해한게 맞을까 (0) | 2020.08.04 |
| [vuex 공부] life cycle (0) | 2020.08.04 |
댓글