Creating a meeting in Jquery

Description/Error
We want to create a meeting using Jquery and Js. But we are getting error of " 1. {code: 200, message: “Invalid api key or secret.”}.

We were using the following code for creating a meeting

(function(){
    ZoomMtg.preLoadWasm();

    ZoomMtg.prepareJssdk();
    
    var API_KEY = 'F6X0MxxxxxxxxxTFg';

    /**
     * NEVER PUT YOUR ACTUAL API SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
     * The below generateSignature should be done server side as not to expose your api secret in public
     * You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-sdks/Web-Client-SDK/tutorial/generate-signature
     */
    var API_SECRET = '1uDbxxxxxxxxxxxxxxxxxxxCCUyl8L';


    document.getElementById('join_meeting').addEventListener('click', function(e){
        e.preventDefault();

        const proxyurl = "https://cors-anywhere.herokuapp.com/";
       
        var jsonURL= proxyurl+'https://zoom.us/oauth/token?grant_type=client_credentials&client_id='+API_KEY+'&client_secret='+API_SECRET;

        $.ajax({  
            url: jsonURL,  
            headers: {'content-type' : 'application/json'},
            type: 'POST',  
            dataType: 'json',  
            success: function (data, textStatus, xhr) {  
                console.log("datais"+data.access_token); 
                
                if(data.access_token){
                    const url = proxyurl + 'https://api.zoom.us/v2/users/me/meetings';

                    $.ajax({  
                        url: url,  
                        headers: {'content-type' : 'application/json',  'Authorization': 'Bearer ' + data.access_token},
                        type: 'POST',  
                        dataType: 'json',  
                        data:JSON.stringify({"topic": "New Meeting at 2", "type":"1", "start_time": "2019-08-20T14:00:00Z", "duration": "45"}),
                        success: function (data, textStatus, xhr) {  
                            console.log(data);  
                        },  
                        error: function (xhr, textStatus, errorThrown) {  
                            console.log('Error in Operation');  
                        }  
                        });
                    }
            },  
            error: function (xhr, textStatus, errorThrown) {  
                console.log('Error in Operation');  
            }  
        });
        
      
    });

})();

Hey @gokul, thanks for reaching out!

The grant_type=client_credentials is only for authenticating Chatbots. What App Type are you trying to use?

You can use grant_type=code and the OAuth flow to get an access_token which allows you to call the Create Meetings API.

OR.

You can use your JWT App Credentials to generate a JWT Token to use as your instead of your access_token, example:

headers: {'content-type' : 'application/json',  'Authorization': 'Bearer ' + JWTToken},

Let me know if this helps!

Thanks,
Tommy

We are trying to integrate Zoom in JIRA. Once user clicks the “Create Meeting” button, a new meeting should be created and invitation URL should be shown to the user.
Tried with JWT Token, even though getting the same error.

Hey @gokul,

Can you post your updated code/http request here so I can reproduce / debug?

Thanks,
Tommy

(function(){

    document.getElementById('join_meeting').addEventListener('click', function(e){
        e.preventDefault();

        const proxyurl = "https://cors-anywhere.herokuapp.com/";
       
        var jsonURL= proxyurl+'https://zoom.us/oauth/token?grant_type=code&client_id=6CR8N9FH******3u7aaxig&redirect_uri="www.acis.io"';
       
       // var jsonURL= proxyurl+'https://zoom.us/oauth/token?grant_type=authorization_code&code=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOm51bGwsImlzcyI6IjZDUjhOOUZIVDZ1SlMwM3U3YWF4aWciLCJleHAiOjE1NjYzMDg4MTksImlhdCI6MTU2NjMwMzQyMH0.7Zozcz1kLNkofw6n4CRtCzgmazcqoWrTaLXlJNF_06Y&redirect_uri=https://www.zoom.com';

        $.ajax({  
            url: jsonURL,  
            headers: {'content-type' : 'application/json', 'Authorization': 'Bearer ' + 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOm51bGwsImlzcyI6IjZDUjhOOUZIVDZ1SlMwM3U3YWF4aWciLCJleHAiOjE1NjcwNjAxOTcsImlhdCI6MTU2NjQ1NTQwMH0.awK5IlDMgAP65uKnGGevnJLIE4ywt5Zf0lZjejcuFSw'},
            type: 'POST',  
            dataType: 'json',  
            success: function (data, textStatus, xhr) {  
                console.log("Received data is"+data.access_token); 
                
                if(data.access_token){
                    const url = proxyurl + 'https://api.zoom.us/v2/me/meetings';

                    $.ajax({  
                        url: url,  
                        headers: {'content-type' : 'application/json',  'Authorization': 'Bearer ' + 'eyJhbGciOiJIUzUxMiJ9.eyJ2ZXIiOiI2IiwiY2xpZW50SWQiOiJGNlgwTUMwNFQ2Q29uSEhxUFgwVEZnIiwiY29kZSI6IlNVdkkyYTJrcHZfb2VPUDhkYnZTWXlpOWNPb0RYN2x6USIsImlzcyI6InVybjp6b29tOmNvbm5lY3Q6Y2xpZW50aWQ6RjZYME1DMDRUNkNvbkhIcVBYMFRGZyIsImF1dGhlbnRpY2F0aW9uSWQiOiIzNmZkZDNhZTAyMjE4MDc3YTgyMmRmNTljZTk3NjYwYiIsImVudiI6W251bGxdLCJ1c2VySWQiOiJvZU9QOGRidlNZeWk5Y09vRFg3bHpRIiwiZ3JvdXBOdW1iZXIiOjAsImF1ZCI6Imh0dHBzOi8vb2F1dGguem9vbS51cyIsImFjY291bnRJZCI6ImM3by1GZnd0U2JTanhVQjZOSEMwTVEiLCJuYmYiOjE1NjYzODMxMzksImV4cCI6MTU2NjM4NjczOSwidG9rZW5UeXBlIjoiYWNjZXNzX3Rva2VuIiwiaWF0IjoxNTY2MzgzMTM5LCJqdGkiOiI4NjM4N2NiNi05MDExLTRhNTEtOGNkMi0xM2VmNWMyZTkwZjAiLCJ0b2xlcmFuY2VJZCI6MH0.5G37aWcHHnVSd7ZkeTEnkeG0I-FDFqg2zc-Z-0bstkNa9d6qscAwD_LRLxg_2um_J7Mw5tnBHuf5LOFAWN7NBw'},
                        type: 'POST',  
                        dataType: 'json',  
                        data:JSON.stringify({"topic": "New Meeting at 2", "type":"1", "start_time": "2019-08-22T14:00:00Z", "duration": "45"}),
                        success: function (data, textStatus, xhr) {  
                            console.log(data);  
                        },  
                        error: function (xhr, textStatus, errorThrown) {  
                            console.log(xhr);  

                            console.log('Error in Operation');  
                        }  
                        });
                    }
            },  
            error: function (xhr, textStatus, errorThrown) {  
                console.log('Error in Operation');  
            }  
        });
        
      
    });

})();

Thanks @gokul,

First of all, calling Zoom APIs via the frontend (jQuery) is not supported. I suggest creating a Node.js server to make http requests to the Zoom API.

What is your full use case so I can provide advice on what type of Zoom App to create (JWT vs. OAuth)?

Nevertheless, I have fixed your code, and now you can get an access_token, but when you call the create meeting endpoint you will get a Invalid CORS request error because we do not support https://cors-anywhere.herokuapp.com/

(function() {

  document.getElementById('join_meeting').addEventListener('click', function(e){
  e.preventDefault();

  const proxyurl = 'https://cors-anywhere.herokuapp.com/';

  var jsonURL = proxyurl + 'https://zoom.us/oauth/token?grant_type=authorization_code&code={{ AUTH CODE FROM URL }}&redirect_uri=https://zoom.us';

  $.ajax({
    url: jsonURL,
    headers: {
      'content-type': 'application/json',
      'Authorization': 'Basic ' + btoa('CLIENT ID' + ':' + 'CLIENT SECRET')
    },
    type: 'POST',
    success: function(data, textStatus, xhr) {
      console.log('Received data is' + data.access_token);

      if (data.access_token) {
        const url = proxyurl + 'https://api.zoom.us/v2/users/me/meetings';

        $.ajax({
          url: url,
          headers: {
            'content-type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Authorization': 'Bearer ' + data.access_token
          },
          type: 'POST',
          dataType: 'json',
          data: JSON.stringify({
            topic: 'New Meeting at 2',
            type: 1,
            start_time: '2019-08-22T14:00:00Z',
            duration: 45
          }),
          success: function(data, textStatus, xhr) {
            console.log(data);
          },
          error: function(xhr, textStatus, errorThrown) {
            console.log(xhr);

            console.log('Error in Operation');
          }
        });
      }
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log('Error in Operation');
    }
  });


  });

})();

NOTE: This will only work once right after you “Install” your app via the install button on your Zoom App Dashboard and paste the code you get (in the redirect url after you click the “Authroize” button) to the {{ AUTH CODE FROM URL }} because each time you request a new access_token with the same auth code it will invalidate the access_token. The OAuth flow is meant to be hosted on a server side application and store the access_token and refresh_tokens in a database.

Also, I would not recommend using the https://cors-anywhere.herokuapp.com/ trick to call our APIs on the frontend. Our APIs are meant to be called from server side applications, to ensure security. For example, anyone will be able to see your client id and client secret if you deploy this code.

Let me know if you have any other questions.

Thanks,
Tommy