작성
·
274
0
현재 구글캘린더를 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 코드를 그대로 써도 되긴하는데 뭔가 좀 찝찝하고, 왜 안되는지 궁금하기도 해서 질문드립니다.
답변 1
0
안녕하세요 🙂
"fetch 코드를 강의의 코드 형식으로 어떻게 변경해야 할까요?"
제가 코드를 어떻게 짜라고 말씀 드릴 수 있는 부분이 아니어서요 🥲
"통신오류 나면서 안되네요."
어떤 통신 오류가 발생했는지 오류메시지를 확인하고 수정하면 되지 않을까요? (어떤 오류인지 질문에서는 알기가 힘드네요 🥲)
포스트맨과 현재 오류가 나는 웹의 HTTP Request 가 어떻게 다른지 비교해보는 것도 좋을 것 같아요~!