[Stibee] 주소록 API 사용법 01 구독자 추가 요청 보내기

안녕하세요. 구마입니다 ! 

Stibee 주소록 API 사용법을 정리해보겠습니다.  (HTML + JS)

 

사용법 정리에 앞서 Stibee 주소록 API를 간단하게 설명하자면,

이메일(필수값)이나 이름(이름 포함 그 외 항목은 필수값 아님) 등을 입력하고

구독하기 버튼을 클릭하면 Stibee로 구독 요청을 보내서

해당 주소록에 구독자를 추가할 수 있는 기능을 제공하는 API 입니다. 

 

문서는 Stibee 홈페이지 내에서도 잘 정리가 되어있어서, 참고한 링크는 아래 접은글에 적어두겠습니다. 

1. 주소록 API 이해하기

https://help.stibee.com/api-webhook/list-api

주소록 API | 스티비 도움말

 

2. 스티비에서 제공하는 API에 대한 요청 및 응답 방법을 확인할 수 있는 문서

https://api.stibee.com/docs/

스티비 API

 

순서대로 읽어보시고 참고하시기 바랍니다.

 

1. HTML 

HTML 코드는 이렇습니다..ㅎㅎ (기능만 잘 되면 디자인은 아무래도 상관 없는 개발자)

input 태그와 button 태그만 사용해서 아주 간단하게 짜봤습니다.

button onclick 이벤트로 stbSubmit() JS로 이동합니다. 

 <div class="stb_test">
	<input title="이메일 입력" type="text" placeholder="구독하실 이메일을 입력해주세요" style="width:180px" id="stb_email" name="stb_email">
	<button  style="background-color: white"  id="stb_form_submit_button" onclick="stbSubmit();">구독하기</button>
</div>

 

코드 적용하면 이렇게 생긴 input과 버튼이 생깁니다. 

 

 

 

2. JS

스크립트도 아주 간단하게 짜봤습니다.

POST 요청 시 이메일 값만 넘길거라 아주아주 간결한 코드가 되었습니다.

이름이나 광고성 메일 동의 등도 같은 형태로 보내주면 됩니다. !

 

/* 구독하기 버튼 클릭 시 Stibee API 이용해서 구독요청 보내는 기능 */
function stbSubmit() {
	
  	var stbEmail = document.getElementById("stb_email").value;
  	
    // 바로 구독하기 버튼 입력 시 stibee 구독폼으로 이동합니다.
  	if(stbEmail == null || stbEmail == "") {
	  var stbLink = '이동하고 싶은 구독폼 주소';
	  window.open(stbLink);
      
	} else {
	  console.log(stbEmail);
	  
	  // 이메일 형식 유효성 체크
	  if(!emailCheck(stbEmail)) {
		alert("이메일 형식이 아닙니다.");
		return false;
	  }
	  
	  var jsonData = {"eventOccuredBy": "SUBSCRIBER", //사용자가 직접 구독 시 들어가는 코드
      			  "subscribers": [{ "email": stbEmail }]
	  };
        
     
	  $.ajax({
		  type : 'post',
		  url : 'https://api.stibee.com/v1/lists/주소록번호/subscribers',
		  contentType : 'application/json; charset=utf-8',
		  headers : {
		   "Content-Type" : "application/json",
		   "AccessToken" : "발급 받은 API 토큰"
		  },
		  data: JSON.stringify(jsonData),
		  success : function (result) {
				
			  /** 요청 후 성공/실패 및 세부적인 결과는 다음글로 업로드 하겠습니다. */
			
		  }
	  });
	  
	} 
}  


/* 이메일 형식 유효성 체크 */
function emailCheck(email_address){     
	let email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
	if(!email_regex.test(email_address)){ 
		return false; 
	}else{
		return true;
	}
}

 

 

이상 Stibee 주소록 API 사용법 01 구독차 추가 요청 보내기였습니다 !

요청 후 성공/실패 여부 + 결과 세부사항으로 알림창 띄우기 등은 다음 글에 작성하겠습니다 !

감사합니다.