zoom api 이용하기 - 3

tobepro.tistory.com/37?category=441528

zoom api 이용하기 - 2

위 포스팅으로 api 이용하여 녹화영상을 다운로드 받는 것 까지 해봤다.

사실 여기까지만 해도 다른 api를 이용함에 있어서 크게 문제되는 것이 없다.

하지만 딱 하나 걸리는 게 있는데, 서버와의 통신이다. CORS정책을 피해서 서버단에서 jsp의 java로 zoom api의 데이터를 가져오는 것 까지는 좋았으나, 이 과정은 해당 페이지가 처음으로 로드될 때, 맨 처음 딱 한 번만 진행된다. 이게 무슨 문제가 생기냐하면 훗날 유저들에게 서비스를 제공했을 때, 해당 유저의 정보들을 가지고 zoom api 데이터를 가지고 와야하는데, 클라이언트단으로 유저들의 정보를 제공받으면 서버단이 먼저 진행되기 때문에 에러가 발생한다.

이를 위해서는 

 

1. 이전페이지에서 클라이언트로 정보를 제공 받은 뒤, 다음 페이지로 넘어갈 때 그 정보를 주고 페이지를 로드한다.

2. 서버와의 통신을 통해 클라이언트로 정보를 받은 뒤 api(jsp의 자바)를 실행한다.

 

정도의 방법이 있겠다.

하지만 1번같은 경우 만약 이전페이지가 아니라 동일한 페이지에서 미팅에 접속하는 화면이 있다면? 이전페이지, 다음페이지라는 개념이 없는 경우이므로, 유저정보를 받은 뒤에 저장한 뒤 새로고침하여 다시 java를 실행시키고 페이지를 로드해야 될 것이다. 보여지는 화면이 갑자기 새로고침을 하면 유저입장에서는 오류라고 생각할 수도 있고, 화면상으로도 좋은 것이 아니기에 우리는 2번 방법을 해보도록 하겠다.

 

2번을 하기 위해서는 먼저 ajax에 대해 알아야 한다.

coding-factory.tistory.com/143

[Ajax] Ajax란 무엇인가?

rimkongs.tistory.com/4

Ajax (1) - 데이터 전송받기 (javascript,jQuery,Ajax)

해당 사이트들을 참고하거나, 구글링을 해서 ajax에 대해 공부를 하기를 바란다.

 

쉽게 이야기 하면 ajax란 자바스크립트를 사용한 비동기 통신, 서버와의 데이터를 송수신하는 기술이다.

비동기 통신임으로 전체 페이지를 다시 로드할 필요가 없이 일부분만을 다시 로드하고, 먼저 요청된 응답들을 기다렸다가 응답을 하는것이 아니라 다른 요청과는 상관없이 응답처리가 가능하다.

 

그러면 일단 먼저, meeting_iframe.jsp 파일의 수정을 한다.

기존에 있었던 자바 부분은 모두 삭제하고 함수를 추가한다.

<script>
function ajaxZoom(type){
        $.ajax({               
              "type": "POST",
              "url":"zoom_api.jsp",
              "data":{
                meetingId : "*********",
                auth : "***********************************************************************************************************",
                userId : "*******************"
              },
              "dataType":"json",
              success:function(data){
                console.log("ajax success");
                for(var i=0; i<data.meetings.length; i++){
                    if(data.meetings[0].id ==**********){
                        if(type=="none")
                            console.log(data);
                        else{
                             for(var j=0; j<data.meetings[i].recording_count; j++){
                                if(data.meetings[i].recording_files[j].file_type == type)
                                    location.replace(data.meetings[i].recording_files[j].download_url+"?access_token=*************************************************************************************************************************************************");
                            }
                        }
                     }
                }
              }, error:function(error){
                console.log("ajax false");
                console.log(error);
              }
        });
    }
 
function getMeeting(){
        ajaxZoom("none");
    }
 
    function getRec(){
        ajaxZoom("MP4");
    }
 
    function getChatLog(){
        ajaxZoom("CHAT");
    }
 
</script>

POST타입으로 전송되며 url은 기존에 지웠던 api 가져오는 jsp 파일이다. 

meetingId는 미팅번호, auth는 access_token 값, userId는 유저아이디다.

json 타입으로 데이터를 전송받을 것이며 성공 시에는 ajax succeess log를 남긴다.

만약 none이라는 타입이 아니라면(미팅의 정보를 가져오는 것이 아니면)

location을 이용하여 data로 넘어온 url을 실행하여 다운로드를 받는다.(access_token이라는 파라미터를 넘겨줘야 로그인 없이 이 토큰값을 통해 다운로드가 진행된다)

실패시는 ajax false 메시지와 함께 에러의 내용을 log로 남겨준다.

 

그러면 이제. 서버에서 이 ajax호출을 받아서 처리하는 zoom_api.jsp파일을 작성한다.

<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="java.util.*"%>
 
<%@ page import="com.squareup.okhttp.*"%>
<%
 
String meetingId = request.getParameter("meetingId");
String auth = request.getParameter("auth");
String userId = request.getParameter("userId");
String type = request.getParameter("type");
 
OkHttpClient client = new OkHttpClient();
Request zoomRequest = new Request.Builder()
  .url("https://api.zoom.us/v2/users/" + userId+ "/recordings?from=2020-10-24&to=2020-12-08")
  .get()
  .addHeader("authorization", "Bearer "+auth)
  .build();
 
Response zoomResponse = client.newCall(zoomRequest).execute();
String zoomText = zoomResponse.body().string();
%>
<%=zoomText%>

헤더값으로 넘겨준 값들을 받아서 이전에 java에서 했던대로 response를 받아 json형식의 string을 보여주게 되어있다.

이제 위에 meeting_iframe.jsp에서 meetingId, userId, auth등등의 값등을 클라이언트에서 받아서 해당 ajax 함수를 호출하면 서버에서 api처리를 하여 값을 전달받을 수 있다.