How to pass API Key with a PHP Wrapper

Viewed 162

I have a HTML form that send a request to API with AJAX. But i would not leave the api key in the JS file. So, i thinked to do a PHP wrapper but i'm at start and i don't know how can i do. Can you give me some exemples for understand this process?

I have this form that redirect to the url:

<form action="www.mysite.com/subscribe" method="POST" accept-charset="utf-8" id="signup-form" name="signup-form">
                    <div class="form-group">
                        <input type="text" class="form-control" name="name" id="name" placeholder="Nome"/>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="cognome" id="cognome" placeholder="Cognome"/>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email"//>
                    </div>


                    <?php include('countries.php'); ?>
                    
                    <div class="form-group">
                        <select class="form-control" id="list" name="list">
                            <option value="" disabled="disabled">Seleziona un interesse</option>
                            <option value="aVD3PdrkiaVJhVU9yN9nMQ">lista 3</option>
                            <option value="spd7cktddsPGTgoDuu892f763Q">lista 2</option>
                            <option value="yCQHvcGxKvBFTeoSp892UxZA">lista 1</option>
                        </select>
                    </div>
                    
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" name="gdpr" id="gdpr" >
                        <label class="form-check-label" for="gdpr">Accetta il gdpr</label>
                    </div>

                    
                    <input type="submit" value="Sign up" id="submit-btn"/>
                    <p id="status"></p>
                </form>

And my JS file with AJAX call (Miss some elements)

$(document).ready(function() {
    $("#signup-form").submit(function(e) {
        console.log('submitting');
      e.preventDefault();

      var $form = $(this),
        url = $form.attr('action');
        url =  'https://sendy.exnovostudio.eu/subscribe';   
        var e = document.getElementById("list");
        var list = e.value;
        

      params = {
        name: $form.find('input[name="name"]').val(),
        email: $form.find('input[name="email"]').val(),
        list: list,
        api_key: <---I WANT HIDE THIS BUT IT DOESN T WORK IF I DELETE
        gdpr  : gdpr,
        boolean: true
      }

      window.message = function(text, color){
          $("#status").css("color", color).text(text);
      }

      $form.find('input').attr("disabled", "disabled");
      message('iscrizione in corso...', 'blue');

What is the best practice to share the api key in the AJAX call?

0 Answers
Related