중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
한 줄 요약
토스 간편 인증을 통해 본인 확인을 진행합니다
버블박스를 운영하는 페임리가 궁금하다면?
If you're curious about FameLee?
Intro
1. Why
국내 플러그인 만들고 싶은데, 마땅히 떠오르는 게 없어서 최근 작업을 못하고 있었습니다. 그러다 역삼 헬스장 신발장에서 토스 슬리퍼를 봤습니다. 문득, 토스 기능을 한 번 사용해보고 싶었습니다. 토스 사랑해요 🫶
제가 다니는 헬스장은 버핏 그라운드입니다 마주치면 말 걸어주세요 ㅎㅎ..
2. ChangeLog
1.0
•
Acces Token 발급
•
간편 인증 요청
•
간편 인증 상태 조회
•
토스 인증창 실행
•
토스 인증 성공 및 실패 유무 확인
Core
1. Instruction
본 플러그인은 토스 인증 API에 기반합니다. 상세 개발 문서는 토스 인증 개발 문서를 확인해주세요
2. Related Docu
플러그인 페이지
데모 링크
에디터 링크
3. Composition
a. Access Token 발급
API Action
토스에게 Access Token을 발급을 요청합니다
Input
field | type | Required | 설명 |
client_id | text | | 토스에서 발급 받은 client_id를 입력합니다
(테스트 값) test_a8e23336d673ca70922b485fe806eb2d |
client_secret | text | | 토스에서 발급 받은 secret_id를 입력합니다
(테스트 값) test_418087247d66da09fda1964dc4734e453c7cf66a7a9e3 |
return
field | type | 설명 |
body access_token | number | 토스가 회신한 엑세스 토큰입니다 |
error status_code | number | API 응답 코드입니다. 성공 시 200이 반환되며, 실패 시 400번대가 반환됩니다. |
error status_body | text | API raw 데이터입니다. |
returned_an_error | yes/no | 에러 유무입니다. 에러 발생 시, False(=No)가 출력됩니다. |
{
"body": {
"access_token": "eyJraWQiOiJjZXJ0IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJ0ZXN0X2E4ZTIzMzM2ZDY3M2NhNzA5MjJiNDg1ZmU4MDZlYjJkIiwiYXVkIjoidGVzdF9hOGUyMzMzNmQ2NzNjYTcwOTIyYjQ4NWZlODA2ZWIyZCIsIm5iZiI6MTcyNDM0MjczNywic2NvcGUiOlsiY2EiXSwiaXNzIjoiaHR0cHM6Ly9jZXJ0LnRvc3MuaW0iLCJleHAiOjE3NTU4Nzg3MzcsImlhdCI6MTcyNDM0MjczNywianRpIjoiNjFmYzI4ZDctNTU5Mi00YWI1LWEyZjItMGRiZmYyYTBhZjMzIn0.Y23ML96SxRn0oaU8z5e4BZODgUvkTU6H8fTzvhezAlstyRt1PyRxkpviuKr9l4eZoYfjeECwM_-ad7XTV8hCfBPnjRXOKuH47gRZik4mKhNHicGQbos7WeFpDzHUCdEOGn6NyX6Hl7oPLTSLV-dMFApian_xSHuXrL9EX7cJ6c1tl1AaSBnfw6kch4fUDDuG4ANgUfjBHVaOnBH4Dx0huhtA5n-HeDYzpoqRVnDo4m8akY92wFztsoEmNsJkcvb9Sh5igxJKQQ-eOOGF0CojLPEB2clE2HTnWZvYqUBZ8RwX0pPNlXoK3WZSjCz92iTT94ZqU3F_WcWT6vFHmTULSw"
},
"error": {
"status_code": 200,
"body": "\"{\\\"access_token\\\":\\\"eyJraWQiOiJjZXJ0IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJ0ZXN0X2E4ZTIzMzM2ZDY3M2NhNzA5MjJiNDg1ZmU4MDZlYjJkIiwiYXVkIjoidGVzdF9hOGUyMzMzNmQ2NzNjYTcwOTIyYjQ4NWZlODA2ZWIyZCIsIm5iZiI6MTcyNDM0MjczNywic2NvcGUiOlsiY2EiXSwiaXNzIjoiaHR0cHM6Ly9jZXJ0LnRvc3MuaW0iLCJleHAiOjE3NTU4Nzg3MzcsImlhdCI6MTcyNDM0MjczNywianRpIjoiNjFmYzI4ZDctNTU5Mi00YWI1LWEyZjItMGRiZmYyYTBhZjMzIn0.Y23ML96SxRn0oaU8z5e4BZODgUvkTU6H8fTzvhezAlstyRt1PyRxkpviuKr9l4eZoYfjeECwM_-ad7XTV8hCfBPnjRXOKuH47gRZik4mKhNHicGQbos7WeFpDzHUCdEOGn6NyX6Hl7oPLTSLV-dMFApian_xSHuXrL9EX7cJ6c1tl1AaSBnfw6kch4fUDDuG4ANgUfjBHVaOnBH4Dx0huhtA5n-HeDYzpoqRVnDo4m8akY92wFztsoEmNsJkcvb9Sh5igxJKQQ-eOOGF0CojLPEB2clE2HTnWZvYqUBZ8RwX0pPNlXoK3WZSjCz92iTT94ZqU3F_WcWT6vFHmTULSw\\\",\\\"scope\\\":\\\"ca\\\",\\\"token_type\\\":\\\"Bearer\\\",\\\"expires_in\\\":31535999}\""
},
"returned_an_error": false
}
JSON
복사
b. 간편 인증 요청
API Action
요청 받은 Access Token을 활용해 txId를 발급 받습니다.
Input
field | type | Required | 설명 |
Authorization | text | | Access Token을 입력합니다. 이때 “Bearer {AccessToekn}”으로 입력해야 합니다.
(ex) Bearer eyJraWQiOiJjZ~~~~~~ |
return
field | type | 설명 |
body resultType | text | 요청이 성공적일 시, “SUCCESS” 를 반환합니다.
실패할 시, “FAIL”을 반환합니다. |
body success txId | text | 인증 요청 트랜잭션 아이디로 거래를 고유할 수 있는 값입니다 |
body success authUrl | text | 토스 표준창을 호출할 수 있는 URL입니다 |
error status_code | number | API 응답 코드입니다. 성공 시 200이 반환되며, 실패 시 400번대가 반환됩니다. |
error status_body | text | API raw 데이터입니다. |
returned_an_error | yes/no | 에러 유무입니다. 에러 발생 시, False(=No)가 출력됩니다. |
{
"body": {
"resultType": "SUCCESS",
"success": {
"txId": "b9171bc9-afd9-401e-a932-4493a2166e7f",
"authUrl": "https://auth.cert.toss.im/start?serviceType=SIGN_USER_AUTH"
}
},
"error": {
"status_code": 200,
"body": "\"{\\\"resultType\\\":\\\"SUCCESS\\\",\\\"success\\\":{\\\"txId\\\":\\\"b9171bc9-afd9-401e-a932-4493a2166e7f\\\",\\\"appScheme\\\":null,\\\"androidAppUri\\\":null,\\\"iosAppUri\\\":null,\\\"requestedDt\\\":\\\"2024-08-23T01:07:06+09:00\\\",\\\"authUrl\\\":\\\"https://auth.cert.toss.im/start?serviceType=SIGN_USER_AUTH\\\"}}\""
},
"returned_an_error": false
}
JSON
복사
C. 인증창 실행
Element Action
간편 인증창을 실행합니다
Input
field | type | Required | 설명 |
authUrl | text | | 간편 인증 요청을 통해 전달 받은 authURL을 입력합니다 |
txId | text | | 간편 인증 요청을 통해 전달 받은 txId을 입력합니다 |
return
D. 토스 인증 성공 / 실패
Element Trigger
인증의 성공 및 실패 유무를 확인합니다
Tutorial
1. Env. Setup
본 플러그인을 사용하려면 토스 인증서에서 사용 승인을 받아야 이용 가능합니다
다만, 토스에서 제공하는 테스트 값을 활용해 승인을 받기 전에 기능을 체크할 수 있습니다
아래 토스 개발 문서에서 적혀 있는 client_id 값과 client_secret이 테스트 값입니다.
해당 값을 플러그인 설정에 입력합니다.
그리고 페이지에 [토스 간편 인증] 요소를 생성합니다. 그래야 토스에서 제공하는 Javascript SDK를 불러와 인증 팝업창을 실행할 수 있습니다
2. 토스 인증 받기
토스 인증 기능은 아래의 프로세스로 진행됩니다.
1.
Access Token 발급 받기
2.
발급 받은 토큰으로 간편 인증 요청하기
3.
요청한 값을 기반으로 인증창 실행하기
(출처 : 토스)
워크플로우에서는 아래와 같이 구성하면 됩니다.
우선 [토스 간편 인증 - Access Token 발급] 액션을 추가합니다. 해당 액션이 성공적으로 완료되면, 엑세스 토큰을 발급 받습니다.
이제 엑세스 토큰을 활용해 간편 인증을 요청해야 합니다. [토스 간편 인증 - 간편 인증 요청] 액션을 후속으로 추가합니다. 그리고 [Authorization]에 “Bearer”을 입력하고, 뒤이어 앞선 액션의 결과 값인 [body access_token]을 입력합니다. 이때, “Bearer”과 “access_token” 사이에 스페이스바를 입력해야 합니다.
마지막으로 [인증창 실행] 액션을 추가합니다. 해당 액션은 페이지에 [토스 간편 인증] 요소가 존재해야 추가할 수 있습니다. [autUrl]와 [txId]는 앞선 액션의 결과값을 활용해 입력합니다.
해당 워크플로우가 모두 성공적으로 작동되면, 다음처럼 인증 팝업 창이 나옵니다.
3. 토스 인증 성공 / 실패 체크하기
유저가 팝업 창에서 인증을 완료 혹은 실패했는지를 보기 위해 트리거를 사용하면 됩니다.
[Click here to add an event]를 클릭하면, [Elements] 카테고리에 [토스 인증 성공]과 [토스 인증 실패]가 있습니다. 인증 팝업 창에서 성공하면 [토스 인증 성공]이 실행되고, 실패하면 [토스 인증 실패]가 실행됩니다
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox