인프런 커뮤니티 질문&답변

현재 구글캘린더를 OAuth2.0 으로 연동하는걸 테스트 해보고 있습니다.

authorization code 까지 얻어서 access token 을 가져오려고 포스트맨에서 테스트 해보니 access token 을 잘 가져왔습니다.

이제 이걸 강의에 나온 방식으로 vue.js 로 옮기고 싶은데 잘 안되네요.

포스트맨에서 성공한 fetch 코드는 아래와 같습니다.

var myHeaders = new Headers();
	myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

	var urlencoded = new URLSearchParams();
	urlencoded.append('code', code.value);
	urlencoded.append('client_id', clientId);
	urlencoded.append('redirect_uri', redirectUri);
	urlencoded.append('client_secret', clientSecret);
	urlencoded.append('grant_type', 'authorization_code');

	var requestOptions = {
		method: 'POST',
		headers: myHeaders,
		body: urlencoded,
		redirect: 'follow',
	};

	fetch(`https://oauth2.googleapis.com/token`, requestOptions)
		.then(response => response.text())
		.then(result => console.log(JSON.parse(result)))
		.catch(error => console.log('error', error));

이 코드 그대로 vue.js 에 사용해도 잘 되더라구요.

그런데 강의 처럼 변경해 보고 싶은데 잘 안되네요.

일단 api/index.js 파일은 아래처럼 했구요.

import axios from 'axios';

function create(baseURL, options) {
	const instance = axios.create(Object.assign({ baseURL }, options, { withCredentials: true }));

	return instance;
}

export const token = create('https://oauth2.googleapis.com');

api/token.js 파일은 아래 처럼 했봤습니다.

import { token } from '.';

export function getToken(params) {
	const data = JSON.stringify(params);
	console.log('data:', data);
	const config = {
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded',
		},
		maxBodyLength: Infinity,
		data: data,
	};
	return token.post('/token', params, config);
}

사용 페이지에서는 아래처럼 적용했습니다.

import { getToken } from '@/api/token';

async function getAccToken() {
	const params = {
		code: code.value,
		client_id: clientId,
		client_secret: clientSecret,
		redirect_uri: redirectUri,
		grant_type: 'authorization_code',
	};
	try {
		const response = await getToken(params);
	} catch (error) {
		console.log('error:', error);
	}
}

그런데, 이렇게 저렇게 여러가지로 해보고 있는데 통신오류 나면서 안되네요.

fetch 코드를 강의의 코드 형식으로 어떻게 변경해야 할까요?

변경 안하고 그냥 fetch 코드를 그대로 써도 되긴하는데 뭔가 좀 찝찝하고, 왜 안되는지 궁금하기도 해서 질문드립니다.