이제 등록한 todo를 실제로 구글 시트에 추가해보자.
참고 : Google sheet API 안내
POST https://sheets.googleapis.com/v4/spreadsheets/<spreadsheetId>/values:batchUpdate?key=<ApiKey>등록하는 API는 위와 같다. key는 이전과 같이 파라미터에 추가해서 인증에 사용했다.
일단 잘되는지 postman으로 테스트해봤다.
{
"valueInputOption": "USER_ENTERED",
"data": [
{
"range": "<시트 이름>!A5:C5",
"majorDimension": "ROWS",
"values": [
["Test_Id", "Test_name", "Test_Todo"]
]
}
]
}request body는 위와 같이 세팅했다.
A5:C5 위치에 Test_Id, Test_name, Test_Todo 를 차례대로 저장하는 요청이다.
응답값은 기대와 다르게 401 권한없음이다.
https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin들어가서 보면.. 구글 로그인 API를 어떻게 사용하는지에 대해 나와있다.
아마 google sheet의 데이터를 가져오는 API는 GET이여서 key 파라미터만으로도 인증이 가능했는데 POST는 oauth를 이용해야 하는거 같다.
그래서. 구글 로그인을 먼저 붙이기로 했다.
npm install --save vue-google-signin-buttonvue-google-signin-button 모듈을 사용했다.
문서 예시에 나온대로 소스코드를 추가했다.
목표는 일단 돌아가게! 이다.
// src/index.ts
import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton)위와 같이 코드를 추가하면
타입스크립트가 뭐라고 한다.
@types/vue-google-signin-button 을 install 해보자.
$ npm install --save @types/vue-google-signin-button
npm ERR! code E404
npm ERR! 404 Not Found: @types/vue-google-signin-button@latest없다고 한다.
// src/google.d.ts
declare module 'vue-google-signin-button';차선책인 .d.ts를 만들었다.
타입스크립트 컴파일러도 무사 통과했다. @ts-ignore 주석을 붙여줘도 될 것 같긴하다.
// src/api/apiConfig.ts
export const config = {
googleClientId: '{googleClientId}', // googleClientId 추가!
}// src/components/Todo/index.ts
export default class Todo extends Vue {
googleSignInParams: any = {
client_id: config.googleClientId
}
onSignInSuccess(googleUser: any) {
const profile = googleUser.getBasicProfile()
console.log("login success")
console.log(profile)
}
onSignInError(error: any) {
console.log(error)
}<!-- src/components/Todo/Todo.html -->
<div>
<!-- google login -->
<g-signin-button :style="gSigninButton"
:params="googleSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
Sign in with Google
</g-signin-button>로그인 버튼을 만들고 login 성공, 실패 시 간단한 로그를 찍게 코딩했다. (예제 소스 복붙함)
실행을 하면..!
"https://apis.google.com/js/api:client.js가 필요하다고 한다.
vue-google-signin-button 모듈에도 이에 대한 언급이 되어있는데 못보고 지나쳤다...
<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://apis.google.com/js/api:client.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html> // webpack.config.js
module.exports = (env, options) => {
new HtmlWebpackPlugin({
vue: true,
favicon: 'favicon.png',
template: 'src/index.html' // add
}), head에 script를 추가하기 위해 html 템플릿을 만들고 HtmlWebpackPlugin에서 template을 만든 html 파일로 명시적으로 선언한다.
이제 에러는 사라진다.
통신을 하려면 google console 에서 발급한 ClientId가 있어야 한다.
Google APIs 접속.
사용자 인증 정보 만들기 > OAuth 클라이언트 ID
웹 어플리케이션 > 생성.
생성된 xxxxx.apps.googleusercontent.com 가 ClientId이다. 이걸 사용한다.
이제 실행 후 구글 로그인 버튼을 클릭하면..!
400이 뜬다.
에러를 읽어보면 redirect uri이 미스매치 한다고 한다.
다시 Google APIs 접속.
수정 클릭.
제한사항에 테스트하고 있는 로컬호스트 URL 주소를 입력 후 저장한다.
이제 로그인 화면이 제대로 나온다.
로그인을 무사히 성공하면 login success가 콘솔에 찍힌다. gooood
참고 깃허브 : add google login
git update-index --assume-unchanged src/api/apiConfig.ts이전에 apiConfig.ts 파일의 추적을 위 명령어로 끊었었다.
git update-index --add src/api/apiConfig.ts깃헙에 다시 새로운 내용을 등록하기 위해 위 명령어로 추적을 다시 한다고 추가한다.
git rm --cached -r src/api/apiConfig.ts다시 추적을 한다고 명령어를 실행해도 추적이 여전히 안된다면 캐쉬를 한 번 지워준다.
'Project > 홈페이지' 카테고리의 다른 글
| [TODO] todo 추가하기 (0) | 2019.04.08 |
|---|---|
| [TODO] table, Style object (0) | 2019.03.28 |
| [TODO] favicon 이미지 추가 (2) | 2019.03.25 |
| [TODO] Docker 배포환경 설정 (0) | 2019.03.25 |
| [TODO] google sheet API 연동 (0) | 2019.03.17 |
댓글