将 Amadeus 机场和城市搜索自动完成添加到 Rails 应用程序

Posted 2023-03-05

【中文标题】将 Amadeus 机场和城市搜索自动完成添加到 Rails 应用程序

【英文标题】：Add Amadeus airport and city search autocomplete to Rails app

【发布时间】：2021-03-13 21:31:48

【问题描述】：

向 Amadeus API 发送请求的最佳方法是使用 Rails 应用中使用自动完成功能的表单字段？

我正在向搜索表单添加自动完成功能以查询 Amadeus“机场和城市搜索”。

我正在使用 Rails 6 和 gem 'amadeus'。

我在搜索表单中输入 3 个字母时收到 401 Unauthorized 错误。如何授权我的请求并使此自动完成功能起作用？

这是我的 javascript：

$(function() 
    function log(message) 
      $("<div>").text(message).prependTo("#log");
      $("#log").scrollTop(0);
    
    $("#city").autocomplete(
      source: function(request, response) 
        $.ajax(
          url: "https://test.api.amadeus.com/v1/reference-data/locations",
          dataType: "json",
          data: 
            apikey: "my_api_key_here",
            keyword: request.term
          ,
          success: function(data) 
            response(data);
          
        );
      ,
      minLength: 3,
      select: function(event, ui) 
        log(ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      ,
      open: function() 
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
      ,
      close: function() 
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
      
    );
);

【问题讨论】：

我不熟悉 Rails，但我相信您可以将 AJAX 请求重定向到后端并使用您安装的 Ruby 库进行 API 调用。这些链接即使使用不同的堆栈也可能很有用，但逻辑​​应该相似：-developers.amadeus.com/blog/airport-autocomplete-jquery-ajax-developers.amadeus.com/blog/…

作为最佳实践，最好将您的凭据存储在后端而不是客户端，否则其他人可以访问它们。

【参考方案1】：

这是一个使用 gon gem 的 javascript 授权请求，以获取 javascript 中的访问令牌。

$(function() 
  amadeus_client = gon.amadeus
  function log(message) 
    $("<div>").text(message).prependTo("#log");
    $("#log").scrollTop(0);
  
  console.log("Requesting Token...");
  var settings = 
    "url": "https://test.api.amadeus.com/v1/security/oauth2/token",
    "method": "POST",
    "timeout": 0,
    "data": 
      "client_id": amadeus_client.client_id,
      "client_secret": amadeus_client.client_secret,
      "grant_type": "client_credentials"
    
  ;
  $.ajax(settings).done(function (response) 
    console.log("Assigning Token variables...");
    ACCESS_TOKEN = response.access_token;
    console.log("Access Token : " + ACCESS_TOKEN);
  );
  $("#city").autocomplete( 
    source: function(request, response) 
      $.ajax(
        type: "get",
        url: "https://test.api.amadeus.com/v1/reference-data/locations",
        dataType: "json",
        beforeSend: function(xhr) 
          xhr.setRequestHeader('Authorization',
          'Bearer ' + ACCESS_TOKEN);
        ,
        data: 
          keyword: request.term,
          subType: "CITY"
        ,
        success: function(data)
          // console.log(data);
          response($.map(data.data, function(el)
            return 
              label: el.detailedName,
              value: el.iataCode
            
          ));
        
      );
    ,
    minLength: 3,
    select: function(event, ui) 
      log(ui.item ?
        "Selected: " + ui.item.label :
        "Nothing selected, input was " + this.value);
    ,
    open: function() 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    ,
    close: function() 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    
  );
);