Forum Discussion

adamali's avatar
adamali
Occasional Contributor
5 years ago

swaggerui Undocumented Error: OK

Dear All,   I have OpenAPI Specs 3.0 that has APIs doing the below: Get presigned url --> response is 307 redirect to AWS S3 to get the image   Image is downloaded but not displayed and I get ...
  • adamali's avatar
    5 years ago

    I have downloaded Redux DevTools for Developers and I did manage to find the issue with the code. After fixing the code, the problem got resolved and I was able to load the image into the swaggerui.

     

    Error spotted using Redux DevTools:

     

     

    oldCode:

     

            <script>
              window.onload = function() {
                var appKey = '';
                var idToken = '';
                var accessToken = '';
                var replaceAppKey = false;
                const ui = SwaggerUIBundle({
                  url: Drupal.settings.nsw_theme.swagger_url,
                  dom_id: '#tryit',
                  displayRequestDuration: true,
                  withCredentials: true,
                  filter: true,
                  showExtensions: true,
                  showCommonExtensions: true,
                  validatorUrl: "https://validator.swagger.io/validator",
                  presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                  ],
                  parameterMacro: function (operation, parameter) {
                    if((parameter.name == "X-API-Key" || 
                        parameter.name == "apikey"    ||
                        parameter.name == "x-apikey") && replaceAppKey) {
                      parameter.example = appKey;
                    }else if(parameter.name == "X-Id-Token") {
                      parameter.example = idToken;
                    }else if(parameter.name == "X-Access-Token") {
                      parameter.example = accessToken;
                    }
                  },
                  onComplete: function(swaggerApi, swaggerUi) {
                  // "ApiKeyAuth" is the key name of the security scheme in securityDefinitions
                     var result = getApiKey();
                     if(result.httpStatusCode == 200 && result.appKey != ""){
                         appKey = result.appKey;
                         appName = result.appName;
                         Swal.fire({
                           title: 'Replace App key?',
                           text: 'We found that one of your Apps (' + appName + ') have access to this API Product. We can replace all App keys in the OpenAPI Specs with your App Key.',
                           icon: 'question',
                           showCancelButton: true,
                           confirmButtonColor: '#3085d6',
                           cancelButtonColor: '#d33',
                           confirmButtonText: 'Yes, replace it!'
                         }).then((result) => {
                           if (result.value) {
                             ui.preauthorizeApiKey("ApiKeyAuth", appKey);
                             replaceAppKey = true;
                             Swal.fire(
                               'Replaced!',
                               'All App keys have been replaced in the current OpenAPI specs.',
                               'success'
                             )
                           }
                         });
                     }else{
                       if(result.httpStatusCode != 200){
                         Swal.fire({
                           icon: 'error',
                           title: 'Oops...' + result.httpStatusCode,
                           html: result.message,
                           footer: '<a href="/help">Why do I have this issue?</a>'
                         }); 
                       }
                     }
                  },
                  requestInterceptor: function (request) {
                      var headers = request.headers || {};
                      if (headers["X-Id-Token"]) {
                         headers["X-Id-Token"] = idToken;
                      }else if(headers["client_id"]) {
                         headers["client_id"] = accessToken;
                      }
                      return request;
                  },
                  responseInterceptor: function (response) {
                      var headers = response.headers || {};
                      if (response.obj.IdToken) {
                         idToken = response.obj.IdToken;
                      }else if(response.obj.id_token) {
                         idToken = response.obj.id_token;
                      }
                      if (response.obj.AccessToken) {
                         accessToken = response.obj.AccessToken;
                      }else if(response.obj.access_token) {
                         accessToken = response.obj.access_token;
                      }
                      return response;
                  }
                })
    
                window.ui = ui
              }
              
            function getApiKey() {
              "use strict";
              var domainName = window.location.hostname;
              var apiPath = "/app/developer_apps/app.json";
              var apiURI = "https://test:test@" + domainName + apiPath;
              var apiMethod = "GET";
              var httpStatusCode = "";
              var message = "";
              var appName = "";
              var appKey = "";
              var appSecret = "";
              		
              jQuery.ajax({
                async: false,
                type: apiMethod,
                url: apiURI,
                dataType: "json",
                statusCode: {
                  200: function(responseData) {
                         httpStatusCode = "200";
                         message = "Retrieved LoggedIn user summary list of Apps successfully";
                       },
                  204: function(responseData) {
                         httpStatusCode = "204";
                         message = `Retrieved LoggedIn user summary list of Apps is empty
                                    Please create an App to be able to experience what this API
                                    product can offer`;
                       },
                  401: function(responseData) {
                         httpStatusCode = "401";
                         message = `Unable to retrieved LoggedIn user summary list of Apps.
                                    If you want, you can <a href="https://developer-dev.testservicensw.net/user/login">login</a> so that you can experience what this API
                                    product can offer to your App; otherwise just click Ok`;
                       },
                  403: function(responseData) {
                         httpStatusCode = "403";
                         message = "Received unauthorized while trying to retrieved LoggedIn user summary list of Apps";
                       },
                  404: function(responseData) {
                         httpStatusCode = "404";
                         message = "Received resource not found while trying to retrieved LoggedIn user summary list of Apps";
                       }
                  },
                  error: function(responseData){
                       httpStatusCode = responseData.status;
                       message = "Received unknown error";
                  },
                  }).done(function(responseData){
                      if(httpStatusCode == 200) {
                         jQuery.each(responseData, function(index, value) {
                           var dotIndex = Drupal.settings.nsw_theme.swagger_file_name.indexOf(".");
                           var apiProductName = Drupal.settings.nsw_theme.swagger_file_name.substring(0, dotIndex);
                           if(apiProductName.toLowerCase() === value.apiProducts[0].toLowerCase()){
                             appName = value.appName;
                             appKey = value.consumerKey;
                             appSecret = value.consumerSecret;
                           }else{
                             message = "Couldn't find a product match in your list of apps";
    
                           }
                         });
              	  }
                  });
                  return {
                          "httpStatusCode": httpStatusCode, 
                          "message": message, 
                          "appName": appName, 
                          "appKey": appKey, 
                          "appSecret": appSecret
                  };
              }          
            </script>
    
            <!--
             *
             * End of Swagger UI Configuration
             * -------------------------------
             *
             -->

    NEWCode:
    The section that was changed was the responseInterceptor section

            <script>
              window.onload = function() {
                var appKey = '';
                var idToken = '';
                var accessToken = '';
                var replaceAppKey = false;
                const ui = SwaggerUIBundle({
                  url: Drupal.settings.nsw_theme.swagger_url,
                  dom_id: '#tryit',
                  displayRequestDuration: true,
                  withCredentials: true,
                  filter: true,
                  showExtensions: true,
                  showCommonExtensions: true,
                  validatorUrl: "https://validator.swagger.io/validator",
                  presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                  ],
                  parameterMacro: function (operation, parameter) {
                    if((parameter.name == "X-API-Key" || 
                        parameter.name == "apikey"    ||
                        parameter.name == "x-apikey") && replaceAppKey) {
                      parameter.example = appKey;
                    }else if(parameter.name == "X-Id-Token") {
                      parameter.example = idToken;
                    }else if(parameter.name == "X-Access-Token") {
                      parameter.example = accessToken;
                    }
                  },
                  onComplete: function(swaggerApi, swaggerUi) {
                  // "ApiKeyAuth" is the key name of the security scheme in securityDefinitions
                     var result = getApiKey();
                     if(result.httpStatusCode == 200 && result.appKey != ""){
                         appKey = result.appKey;
                         appName = result.appName;
                         Swal.fire({
                           title: 'Replace App key?',
                           text: 'We found that one of your Apps (' + appName + ') have access to this API Product. We can replace all App keys in the OpenAPI Specs with your App Key.',
                           icon: 'question',
                           showCancelButton: true,
                           confirmButtonColor: '#3085d6',
                           cancelButtonColor: '#d33',
                           confirmButtonText: 'Yes, replace it!'
                         }).then((result) => {
                           if (result.value) {
                             ui.preauthorizeApiKey("ApiKeyAuth", appKey);
                             replaceAppKey = true;
                             Swal.fire(
                               'Replaced!',
                               'All App keys have been replaced in the current OpenAPI specs.',
                               'success'
                             )
                           }
                         });
                     }else{
                       if(result.httpStatusCode != 200){
                         Swal.fire({
                           icon: 'error',
                           title: 'Oops...' + result.httpStatusCode,
                           html: result.message,
                           footer: '<a href="/help">Why do I have this issue?</a>'
                         }); 
                       }
                     }
                  },
                  requestInterceptor: function (request) {
                      var headers = request.headers || {};
                      if (headers["X-Id-Token"]) {
                         headers["X-Id-Token"] = idToken;
                      }else if(headers["client_id"]) {
                         headers["client_id"] = accessToken;
                      }
                      if (headers["Use-Proxy"]) {
                         if (headers["Use-Proxy"] != "") {
                             request.url = headers["Use-Proxy"] + "?url=" + request.url;
                             headers["Use-Proxy"] = "";
                         }
                      }
                      return request;
                  },
                  responseInterceptor: function (response) {
                      var headers = response.headers || {};
                      if (response.obj) {
                         if ("IdToken" in response.obj) {
                            idToken = response.obj.IdToken;
                         }else if(response.obj.id_token) {
                            idToken = response.obj.id_token;
                         }
                         if (response.obj.AccessToken) {
                            accessToken = response.obj.AccessToken;
                         }else if(response.obj.access_token) {
                            accessToken = response.obj.access_token;
                         }
                      }
                      return response;
                  }
                })
    
                window.ui = ui
              }
              
            function getApiKey() {
              "use strict";
              var domainName = window.location.hostname;
              var apiPath = "/app/developer_apps/app.json";
              var apiURI = "https://test:test@" + domainName + apiPath;
              var apiMethod = "GET";
              var httpStatusCode = "";
              var message = "";
              var appName = "";
              var appKey = "";
              var appSecret = "";
              		
              jQuery.ajax({
                async: false,
                type: apiMethod,
                url: apiURI,
                dataType: "json",
                statusCode: {
                  200: function(responseData) {
                         httpStatusCode = "200";
                         message = "Retrieved LoggedIn user summary list of Apps successfully";
                       },
                  204: function(responseData) {
                         httpStatusCode = "204";
                         message = `Retrieved LoggedIn user summary list of Apps is empty
                                    Please create an App to be able to experience what this API
                                    product can offer`;
                       },
                  401: function(responseData) {
                         httpStatusCode = "401";
                         message = `Unable to retrieved LoggedIn user summary list of Apps.
                                    If you want, you can <a href="https://developer-dev.testservicensw.net/user/login">login</a> so that you can experience what this API
                                    product can offer to your App; otherwise just click Ok`;
                       },
                  403: function(responseData) {
                         httpStatusCode = "403";
                         message = "Received unauthorized while trying to retrieved LoggedIn user summary list of Apps";
                       },
                  404: function(responseData) {
                         httpStatusCode = "404";
                         message = "Received resource not found while trying to retrieved LoggedIn user summary list of Apps";
                       }
                  },
                  error: function(responseData){
                       httpStatusCode = responseData.status;
                       message = "Received unknown error";
                  },
                  }).done(function(responseData){
                      if(httpStatusCode == 200) {
                         jQuery.each(responseData, function(index, value) {
                           var dotIndex = Drupal.settings.nsw_theme.swagger_file_name.indexOf(".");
                           var apiProductName = Drupal.settings.nsw_theme.swagger_file_name.substring(0, dotIndex);
                           if(apiProductName.toLowerCase() === value.apiProducts[0].toLowerCase()){
                             appName = value.appName;
                             appKey = value.consumerKey;
                             appSecret = value.consumerSecret;
                           }else{
                             message = "Couldn't find a product match in your list of apps";
    
                           }
                         });
              	  }
                  });
                  return {
                          "httpStatusCode": httpStatusCode, 
                          "message": message, 
                          "appName": appName, 
                          "appKey": appKey, 
                          "appSecret": appSecret
                  };
              }          
            </script>
    
            <!--
             *
             * End of Swagger UI Configuration
             * -------------------------------
             *
             -->
    
            </div>

     

     

    Result after fixing the code: