How can I hide an external API key in a Wordpress PHP file?

Question

I've spent hours trying to research and solve this but am still struggling unfortunately.

I have created a custom 'courses' post type in Wordpress that involves using embedded Calendly event registrations. I am using the Calendly embed API to notify the parent window when an event registration takes place. The notification payload provides the URI of the event, which I then want to look up using the Calendly API and return the name of the event. I am struggling with hiding the API key in the header:

    "Content-Type": "application/json",
    "Authorization": "Bearer MY_API_KEY"
  }

I've tried to add a line in wpconfig to define the key:

define( 'CALENDLY_KEY', '**key**' );

But I don't know how to then use this in my function without exposing it via 'echo'.

Any advice would be much appreciated.

Extended code below:

<!-- Calendly widget script -->
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

<script>function isCalendlyEvent(e) {
  return e.data.event &&
         e.data.event.indexOf('calendly') === 0;
};
 
window.addEventListener(
  'message',
  function(e) {
    if (isCalendlyEvent(e)) {
        if (e.data.event == "calendly.event_scheduled") {
            console.log("event scheduled!");
            let event_uri = e.data.payload.event.uri;
            console.log(event_uri);

            fetch(event_uri, {
  "method": "GET",
  "headers": {
    "Content-Type": "application/json",
    "Authorization": "Bearer MY_API_KEY"
  }
})
.then(response => response.json())
  .then((json) => {
    console.log(json);
    let ordered_course = json.resource.name;
    console.log(ordered_course);

  })



        }
      console.log(e.data);
    }
  }
);</script>

Dont do this request from the front-end if the key has to remain secret. You can put the request in a separate PHP file and use it to update the calendar — Luca Kiebel
– Luca Kiebel, Commented Jan 20, 2022 at 11:04
Thank you @LucaKiebel, appreciate your response. I'm still quite a noob when it comes to PHP and am struggling to understand how to call a separate PHP file in the context of this function, do you have any advice? — Tom Mitchell
– Tom Mitchell, Commented Jan 20, 2022 at 11:22
Instead of getting that event_uri get the new PHP file, just a standard request to it, your logic doesnt have to change, you can use PHP to pass the returned data along to your JS here — Luca Kiebel
– Luca Kiebel, Commented Jan 20, 2022 at 11:24
Thanks @LucaKiebel - I've put all of the above request into a separate PHP file and called it in the following way from the main file but I've clearly got it totally wrong 😑 <script> $(document).ready(function(){ $.get("http://localhost:8888/wordpress/wp-content/themes/cookable/calendly.php") }); </script> — Tom Mitchell
– Tom Mitchell, Commented Jan 20, 2022 at 11:53

Viktor Andonov · Accepted Answer · 2022-01-21 22:32:20Z

2

You should use dotenv (.env) file for your API key.

You can install support for dotenv (.env) via the vlucas/phpdotenv package with Composer package manager for PHP on your server.

Easier option - if you don't have experience as you say, is to use a WordPress plugin dontenv, this you will create .env file and inside you will write MY_API_KEY=123456, then in your code, you can retrieve this .env key by using getenv('MY_API_KEY');

This is for PHP but your code is JS, so you should install npm package manager then run npm i dontenv then in your code Bearer ${process.env.MY_API_KEY}.

Also, .env files should not be uploaded on GitHub.

answered Jan 21, 2022 at 22:32

Viktor Andonov

3741 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I hide an external API key in a Wordpress PHP file?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related