HTML JavaScript - Get Data From 3rd Party Application Using Client ID And Client Secret In REST API

In this post, I am using REST API to get the feed from a 3rd party application using client ID and client secret.

In this post, I am using REST API to get the feed from a third-party application using client ID and client secret.
 
Before that, you need to have the Client ID and Client Secret ready which we are going to use in this API call. We are making two calls here. The first call is to fetch the access token and the second call will be using the access token we have got in step 1.
 
The first method to fetch access token is getFeed() which will internally call getArticles() which, in-turn, calls the getAccessTokenByPost() method for authorization used in getArticles() function.
 
The feeds you can see as below.
 
Get Data From 3rd Party Application Using ClientID And Client Secret In REST API 
 
Code Section
 
HTML
  1. <div id="feedData"></div>  
JavaScript
  1. <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>  
  2. <script type="text/javascript">  
  3.     $(document).ready(function() {  
  4.         getFeed()  
  5.     });  
  6.   
  7.     function getFeed() {  
  8.         var clientApiKey = "Client ID";  
  9.         var clientSecret = "Client Secret";  
  10.         var getTokenUrl = "https://xxx.com/oauth/token";  
  11.         var generalApiUrl = "https://xxx.com/v2/content?filter.channels.id=114170&filter.state=published";  
  12.         // The URL of the API to call  
  13.         var appAuthToken;  
  14.         getArticles().then(data => {  
  15.             $("#feedData").html("");  
  16.             console.log(data);  
  17.             if (data) {  
  18.                 var myHtml = "";  
  19.                 for (i = 0; i < data.length; i++) {  
  20.                     myHtml += "<br/><table>";  
  21.                     //First Bind Images  
  22.                     var images = data[i].images;  
  23.                     myHtml += "<tr><td><img width='800px' height='300px' src=" + data[i].images[0].image_url + " alt='Image'/></td></tr>";  
  24.                     myHtml += "<tr><td><h2><b><a href=" + data[i].permalink_url + ">" + data[i].title + "</a><b><h2></td></tr>"  
  25.                     myHtml += "<tr><td>" + data[i].author.display_name + "</td></tr>"  
  26.                     myHtml += "<tr><td><h3>" + data[i].summary + "</h3></td></tr>"  
  27.                     myHtml += "<tr><td></td></tr></table><br/>";  
  28.                 }  
  29.                 $("#feedData").html(myHtml);  
  30.             } else {  
  31.                 $("#feedData").html("<b>Failed to Load Articles.</b>");  
  32.             };  
  33.         })  
  34.   
  35.         function getArticles() {  
  36.             var dfd = new $.Deferred();  
  37.             getAccessTokenByPost().done(function() {  
  38.                 return $.ajax({  
  39.                     method: "get",  
  40.                     url: generalApiUrl,  
  41.                     contentType: "application/json; charset=utf-8",  
  42.                     headers: {  
  43.                         'Authorization''Bearer ' + appAuthToken  
  44.                     }  
  45.                 }).done(function(data) {  
  46.                     dfd.resolve(data.data);  
  47.                 }).fail(function() {  
  48.                     dfd.fail();  
  49.                 });  
  50.             });  
  51.             return dfd.promise();  
  52.         }  
  53.   
  54.         function getAccessTokenByPost() {  
  55.             if (appAuthToken) {  
  56.                 alert("using saved Access Token");  
  57.                 return $.Deferred().resolve().promise();  
  58.             } else {  
  59.                 var postData = {  
  60.                     grant_type: 'client_credentials',  
  61.                     client_id: clientApiKey,  
  62.                     client_secret: clientSecret  
  63.                 };  
  64.                 return $.post(getTokenUrl, postData, null'json').done(function(data) {  
  65.                     appAuthToken = data.access_token;  
  66.                 }).fail(function(jqXHR, status, error) {  
  67.                     alert("getting Access Token failed.");  
  68.                 });  
  69.             }  
  70.         }  
  71.     }  
  72. </script>  
Here, we are getting the feeds in JSON format which we can later play to display on HTML based on our requirement. I have displayed in HTML table. 
 
Get Data From 3rd Party Application Using ClientID And Client Secret In REST API
Cheers!!