제인
제인2y ago

브랜드페이 문의드립니다.

안녕하세요. 토스 브랜드페이를 이용 중인데 질문이 있습니다. 아래 프론트에서 redirectUrl을 설정했는데요 (현재 로컬 백엔드 API쪽으로 리다이렉트 하도록 해둠) ** 프론트는 vue.js, 백엔드는 spring boot 입니다
let brandpay = await loadBrandPay('clientyKey', 'customerKey', {
redirectUrl: `http://localhost:8080/api/common/toss`,
})
let brandpay = await loadBrandPay('clientyKey', 'customerKey', {
redirectUrl: `http://localhost:8080/api/common/toss`,
})
loadBrandPay() 이후 크롬 검사에서 redirectUrl을 호출하는 것은 보았는데 httpmethod가 포함되지 않은 형태로 호출되서 API가 정상호출되지 않는데 이런 경우에는 어떻게 하셨나요? (이미지도 첨부함)
No description
39 Replies
토스페이먼츠 BOT
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) : - 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.
제인
제인2y ago
아 이미지에 잘못 올라갔는데 http://localhost:8080/api/common/toss 로 설정해도 동일합니다!
유부장
유부장2y ago
redirectUrl 은 code / customerKey 를 쿼리 파람으로 전달하고, redirectUrl 소스에서 code, curtomerKey 를 parse 해서, 토큰발급 API 를 호출 하시는 구조인데 혹시 추가로 구현하시고자 하는 내용이 있으실까요?
Kimoon Lee
Kimoon Lee2y ago
혹시 콘솔쪽에 에러는 없으신가요?
제인
제인2y ago
Http Method가 없이 나가서 그러는지 CORS 이슈로 콘솔에러가 나고 있습니다. 우선 프론트(localhost:3000) 에서 spring boor (localhost:8080) 호출할 때 CORS가 발생하진 않았어서요.. 크롬에서 주소창에 GET으로 직접 호출해도 오류나지 않고 잘 호출하고 있습니다
No description
Kimoon Lee
Kimoon Lee2y ago
프론트(localhost:3000) 에서 spring boor (localhost:8080) 호출 해서 발생하는 문제입니다. 프론트와 백엔드 포트를 동일하게 해주세요. redirectURL 호출을 FE 안에서 진행하기 때문에 Origin이 동일해야 합니다.
제인
제인2y ago
혹시 이번에는 localhost:3000 쪽으로 redirectUrl을 지정했는데요 - redirectUrl: localhost:3000/toss/auth , 제가 지정한 redirectUrl이 정상호출되었다고 200이 뜨긴 했으나 갑자기 customer-token/ 라는 API를 여러번 호출하고 있습니다. 이거는 어떤 증상인지 여쭤봐도 될까요?
No description
Kimoon Lee
Kimoon Lee2y ago
이건 localhost:3000/toss/auth 에서 accessToken 을 요청하지 않으시는 것 같습니다. 해당 url 에서 accessToken 발급 API 를 호출하고 계신지 확인부탁드릴께요.
제인
제인2y ago
네 우선 페이지는 되어있고, 크롬 주소창에서 동일 url을 치면 페이지를 정상호출하고 있긴 합니다. 코드는 아래 처럼 되어있습니다. loadBrandPay() 이후 redirectUrl로 /toss/auth를 호출할 때 페이지를 호출하지 않는데 혹시 어떻게 접근해야할까요?
const login = async () => {
$bLoading.hide()
console.log('인증한다')
await $axios.post(
'https://api.tosspayments.com/v1/brandpay/authorizations/access-token',
JSON.stringify({
grantType: 'AuthorizationCode',
// Access Token 발급을 위해 리다이렉트 URL에 포함되어 돌아온 code와 customerKey 전달
code: code,
customerKey: customerKey,
}),
{
headers: {
// [TODO] Basic 인증 방식의 사용자명과 비밀번호는 콜론으로 구분해서 `사용자명:비밀번호`로 추가합니다. 상점의 시크릿 키를 사용자명으로, 비밀번호는 공백으로 추가한 뒤 base64로 인코딩하세요.
Authorization: `Basic ${Buffer.from('key' + ':', 'utf8').toString(
'base64'
)}`,
'Content-Type': 'application/json',
},
}
)

// 성공(HTTP status 200) 응답
}

onMounted(() => {
console.log('인증은 온거야?')
login()
})
const login = async () => {
$bLoading.hide()
console.log('인증한다')
await $axios.post(
'https://api.tosspayments.com/v1/brandpay/authorizations/access-token',
JSON.stringify({
grantType: 'AuthorizationCode',
// Access Token 발급을 위해 리다이렉트 URL에 포함되어 돌아온 code와 customerKey 전달
code: code,
customerKey: customerKey,
}),
{
headers: {
// [TODO] Basic 인증 방식의 사용자명과 비밀번호는 콜론으로 구분해서 `사용자명:비밀번호`로 추가합니다. 상점의 시크릿 키를 사용자명으로, 비밀번호는 공백으로 추가한 뒤 base64로 인코딩하세요.
Authorization: `Basic ${Buffer.from('key' + ':', 'utf8').toString(
'base64'
)}`,
'Content-Type': 'application/json',
},
}
)

// 성공(HTTP status 200) 응답
}

onMounted(() => {
console.log('인증은 온거야?')
login()
})
아래 경우에는 정상호출 하고 있습니다. (이미지 첨부 보시면 됩니다)
No description
Kimoon Lee
Kimoon Lee2y ago
데이터가 {"grantType":"AuthorizationCode","code":"","customerKey":""} 이렇게 넘어 오고 있습니다. code, customerKey 에 데이터가 있는지 확인 부탁드립니다.
제인
제인2y ago
const code = query.value.code || ''
const customerKey = query.value.customerKey || ''

const login = async () => {
$bLoading.hide()
console.log('인증한다')
await $axios.post(
'https://api.tosspayments.com/v1/brandpay/authorizations/access-token',
JSON.stringify({
grantType: 'AuthorizationCode',
// Access Token 발급을 위해 리다이렉트 URL에 포함되어 돌아온 code와 customerKey 전달
code: code,
customerKey: customerKey,
}),
{
headers: {
// [TODO] Basic 인증 방식의 사용자명과 비밀번호는 콜론으로 구분해서 `사용자명:비밀번호`로 추가합니다. 상점의 시크릿 키를 사용자명으로, 비밀번호는 공백으로 추가한 뒤 base64로 인코딩하세요.
Authorization: `Basic ${Buffer.from('key' + ':', 'utf8').toString(
'base64'
)}`,
'Content-Type': 'application/json',
},
}
)

// 성공(HTTP status 200) 응답
}

onMounted(() => {
console.log('인증은 온거야?')
login()
})

return {
code,
customerKey
}
const code = query.value.code || ''
const customerKey = query.value.customerKey || ''

const login = async () => {
$bLoading.hide()
console.log('인증한다')
await $axios.post(
'https://api.tosspayments.com/v1/brandpay/authorizations/access-token',
JSON.stringify({
grantType: 'AuthorizationCode',
// Access Token 발급을 위해 리다이렉트 URL에 포함되어 돌아온 code와 customerKey 전달
code: code,
customerKey: customerKey,
}),
{
headers: {
// [TODO] Basic 인증 방식의 사용자명과 비밀번호는 콜론으로 구분해서 `사용자명:비밀번호`로 추가합니다. 상점의 시크릿 키를 사용자명으로, 비밀번호는 공백으로 추가한 뒤 base64로 인코딩하세요.
Authorization: `Basic ${Buffer.from('key' + ':', 'utf8').toString(
'base64'
)}`,
'Content-Type': 'application/json',
},
}
)

// 성공(HTTP status 200) 응답
}

onMounted(() => {
console.log('인증은 온거야?')
login()
})

return {
code,
customerKey
}
` 제가 일부 코드만 보냈는데 전체코드는 이러하구요, response는 잘 받아오는데 redirectUrl이 호출되지 않고 있습니다.
Kimoon Lee
Kimoon Lee2y ago
http://localhost:3000/toss/auth?code=YG57Eba3GqnRn9QowrpWDOxm&customerKey=test@@123 이렇게 호출을 해드리는 것으로 로그상에 확인되는데요 이 URL 이 호출되지 않는다는 말씀이실까요?
제인
제인2y ago
네 onMounted() 쪽에 엑세스 토큰 발급 코드 함수를 호출하도록 되어있는데 아예 onMounted() 쪽 콘솔로그도 호출되지 않습니다. 혹시 놓치고 있는게 있을까 하고 여쭤봅니다.
onMounted(() => {
console.log('인증은 온거야?') <-- 이부분이 콘솔에 찍히지도 않음
login() <-- access token 발급 함수
})
onMounted(() => {
console.log('인증은 온거야?') <-- 이부분이 콘솔에 찍히지도 않음
login() <-- access token 발급 함수
})
유부장
유부장2y ago
프론트 단에서 보여지는 이슈는, PIT STOP 님께서 설명 주신 것처럼, localhost:3000/toss/auth 로 전달된 query param parse 이후 v1/brandpay/authorizations/access-token 으로 토큰 발급이 정상적으로 수행 되지 않는 것으로 보여집니다 주소창에 직접 입력하면 잘 된다고 하셨는데, 잘 된다고 하신 말씀이, query param parse 가 잘 수행 되고, API 호출이 잘 되었다는 말씀으로 이해하면 될까요? 백엔드는 Spring Boot 말씀 주셨는데, 전달주신것은 스프링부트 쪽에서 API 호출하는 소스코드가 맞을까요?
Kimoon Lee
Kimoon Lee2y ago
브라우저 개발자 콘솔에서 localhost:3000/toss/auth 로 요청이 나가는지 확인해 보시기 바랍니다
토스페이먼츠 BOT
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
ggggglgl
ggggglgl2y ago
안녕하세요. 저희는 front(vue)와 backend(spring boot) 를 다른 도메인을 사용하고 있습니다. 현재 redirectURL호출을 FE에서 진행하고 있기 때문에 응답받는 redirectURL 또한 FE를 호출하도록 하고, FE에서 BE에 있는 api를 호출하는 방식으로 진행하면 되는걸까요? 지금 해당 방식으로 진행하고 있는데 응답 redirectURL로 설정한 페이지가 로드가 되지 않아 onMounted()에 찍은 console.log도 동작하고 있지 않습니다. 혹시 추가로 설정해야하거나 고쳐야할 부분이 있다면 말씀 주시면 감사하겠습니다. - 요청 URL : localhost:3000/toss (FE) - 응답 redirectURL : localhost:3000/toss/auth (FE) => 여기로 응답이 안오는걸로 보여짐
Kimoon Lee
Kimoon Lee2y ago
저희 로그상으로는 localhost:3000/toss/auth 여기로 redirect 를 해드리고 있습니다. 브라우저 네트워크 탭에서 localhost:3000/toss/auth 로 호출이 되는지 확인 부탁드립니다.
ggggglgl
ggggglgl2y ago
네 맞습니다. 위에 첨부드린 사진처럼 localhost:3000/toss/auth 는 잘 호출 되고 있으나, front 가 아닌 api를 호출하는 형식으로 호출되는 것으로 보입니다. 그래서 저희 front에 있는 /toss/auth 페이지가 로딩이 되면서 찍혔어야 하는 console.log()가 출력되고 있지 않습니다. 사진 첨부 한번 더 드립니다!
ggggglgl
ggggglgl2y ago
No description
Kimoon Lee
Kimoon Lee2y ago
지금 브라우저 상으로 보면 auth를 호출하고 있습니다. 지금 표시해 주신것은 저희 FE 에서 저희 서버에 token 이 발행되었는지 확인하는 호출이구요. 브라우저에서 localhost:3000/toss/auth 를 호출했는데, 응답을 어떻게 받은건지 auth 호출한 부분 클릭해서 확인 부탁드립니다.
유부장
유부장2y ago
1. localhost:3000/toss/auth?code={}&customerKey={} 2. code, customerKey 추출 3. code, customerKey, grantType 으로 v1/brandpay/authorizations/access-token 호출 2번에서 3번 단계 중간에 추가 액션이 있으신가요?
ggggglgl
ggggglgl2y ago
현재 1단계에서 localhost:3000은 Front서버이기 때문에 페이지 전환이 되어야 합니다. 그런데 페이지 전환이 되고 있지 않습니다. 개발자도구에서 확인해봤을때 Network탭에서 찍히는거보면 api를 호출하는 방식으로 호출되고 있는 것 같습니다. 현재 동일 도메인에서 redirectUrl을 호출해야 하는것으로 알고 있어서 FE(SDK 호출) -> FE(redirectUrl : localhost:3000/toss/auth?code={}&customerKey={} 응답받기) -> BE(v1/brandpay/authorizations/access-token 호출) 하는 형식으로 진행하려 합니다. 확인부탁드립니다. 감사합니다.
Kimoon Lee
Kimoon Lee2y ago
아뇨 페이지 내에 hidden frame 에서 호출됩니다 . 그래서 브라우저 network 탭에서 보이게 되는 겁니다. localhost:3000/toss/auth 여기가 호출된후 어떻게 처리 되었는지 확인부탁드립니다.
ggggglgl
ggggglgl2y ago
/toss/auth 전체 소스 공유드립니다. 말씀드렸던 것처럼 하단에 있는 onMounted() 찍어놓은 log가 출력조차 되고있지 않습니다. 항상 감사드립니다,,! <template></template> <script> import {onMounted, useContext} from '@nuxtjs/composition-api' export default { name: 'TossAuthCheck', components: {}, layout: 'none', setup(_, { root: { $bLoading, $axios } }) { const { query } = useContext() const code = query.value.code '' const customerKey = query.value.customerKey '' const login = async () => { $bLoading.hide() console.log('인증한다') await $axios.post( 'https://api.tosspayments.com/v1/brandpay/authorizations/access-token', JSON.stringify({ grantType: 'AuthorizationCode', // Access Token 발급을 위해 리다이렉트 URL에 포함되어 돌아온 code와 customerKey 전달 code: code, customerKey: customerKey, }), { headers: { // [TODO] Basic 인증 방식의 사용자명과 비밀번호는 콜론으로 구분해서 사용자명:비밀번호로 추가합니다. 상점의 시크릿 키를 사용자명으로, 비밀번호는 공백으로 추가한 뒤 base64로 인코딩하세요. Authorization: Basic ${Buffer.from('test_sk_7XZYkKL4MrjmQwaEmP1V0zJwlEWR' + ':', 'utf8').toString( 'base64' )}, 'Content-Type': 'application/json', }, } ) // 성공(HTTP status 200) 응답 } onMounted(() => { console.log('인증은 온거야?') login() }) return { code, customerKey } }, } </script>
Kimoon Lee
Kimoon Lee2y ago
이 코드를 보내주시는건 의미가 없습니다. 코드상으로 문제는 없어서요.
지금 브라우저 상으로 보면 auth를 호출하고 있습니다. 지금 표시해 주신것은 저희 FE 에서 저희 서버에 token 이 발행되었는지 확인하는 호출이구요. 브라우저에서 localhost:3000/toss/auth 를 호출했는데, 응답을 어떻게 받은건지 auth 호출한 부분 클릭해서 확인 부탁드립니다.
이걸 확인해 주세요.
Kimoon Lee
Kimoon Lee2y ago
No description
Kimoon Lee
Kimoon Lee2y ago
이 요청을 클릭해서 우측에 요청 내역및 응답내역을 공유해 주시기 바랍니다,
ggggglgl
ggggglgl2y ago
No description
ggggglgl
ggggglgl2y ago
해결됐습니다. 감사합니다!
Kimoon Lee
Kimoon Lee2y ago
갑자기 해결되신 건가요?
ggggglgl
ggggglgl2y ago
기존에 /toss/auth에 있던 스크립트 형식을 변경했습니다.
Kimoon Lee
Kimoon Lee2y ago
/toss/auth 에서 backend(spring boot) 쪽을 호출하지 않고 있던 건가요?
ggggglgl
ggggglgl2y ago
아니요 /toss/auth 스크립트 단에서 원래 사용하던 composition api 형식을 버리고 일반 javascript 방식으로 변경했더니 됐습니다!
Kimoon Lee
Kimoon Lee2y ago
composition api 형식 이라는 게 어떤 방식인지 설명을 좀 해주실수 있을까요? 그리고 composition api 형식으로 호출을 했는데 왜 backend 쪽에서는 요청을 받지 못했다고 하신건가요?
ggggglgl
ggggglgl2y ago
저도 정확히는 모르겠습니다. 스크립트 형식만 chatgpt에서 제안해주는 방식(일반적인 javascript방식)으로 변경했더니 응답을 받을 수 있었습니다 composition api 형식과 관련한 링크 공유드려요. https://blog.naver.com/dndlab/221952030079
Kimoon Lee
Kimoon Lee2y ago
그럼 composition api 를 사용하셨을때 backend 쪽으로 요청은 간건가요? 제가 볼때는 요청이 안갔을것 같아서요,.
ggggglgl
ggggglgl2y ago
그땐 응답 자체를 못받았습니다.페이지 자체가 로드가 안됐어요! 결과적으로 composition api 방식으로 썼을때는 backend로 요청자체도 안갔습니다,, 감사드립니다:)
Kimoon Lee
Kimoon Lee2y ago
네 그래서 auth 에서 요청 받은후에 어떻게 처리 되고 있는지를 확인해 달라고 요청드렸던 겁니다. 그 중간에서 요청이 유실되는 것 같아서요. 해결하셨다니 다행입니다. 공유해주셔서 감사해요.