Struggling to get basic usage working

36 views
Skip to first unread message

Alex

unread,
Feb 8, 2021, 1:38:34 AM2/8/21
to checkvist-api
Hello,

I'd like to list the contents of one of my checklists on my website. I followed the instructions on the Checkvist blog (https://blog.checkvist.com/post/187654104/openapi-javascript-ruby-example), but I'm running into some problems:
  1. Chrome is complaining about SameSite attributes in cookies (https://web.dev/samesite-cookies-explained/). To be honest, I don't have much experience with web development, so I got a bit lost here. Is this something I need to fix on my end, or would the API need to be changed in order to enable usage with Chrome?
  2. Regardless of the browser, I noticed that the login token doesn't appear to be saved properly. The remote call to get tasks for a given checklist ends up as "https://checkvist.com/checklists/<my checklist id>/tasks.json?callback=load_checklist_callback&token=undefined". The contents of login.json are "checkvist.save_token(<returned token string>)", so I'm not sure what's going wrong.
  3. When I am logged in to Checkvist, I don't run into the above issue. However, the checklist_container is still empty.

Do you have any suggestions regarding these issues? Apologies if these are dumb questions, by the way - I'm a beginner. My source code is below.

Many thanks!
Alex

=====

</!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://checkvist.com/javascripts/checkvist_api.js"></script>

<script type="text/javascript">
  function load_checklist_callback(data) {
    document.getElementById('checklist_container').innerHTML =
         checkvist.create_tasks_html(data);
  }
  function load_checklist() {
    // Remove the next line if your checklist is public
    checkvist.login('my email', 'my OpenID KEY');
    checkvist.get_tasks(<my checklist id>, 'load_checklist_callback');
  }

  var checkvist_interval = setInterval(function() {
    if (document.getElementById('checklist_container')) {
      clearInterval(checkvist_interval);
      load_checklist();
    }
  }, 20);
</script>

<title>To do</title>
</head>

<body>
<div id="checklist_container"></div>
</body>

</html>

Ari Gibson

unread,
Feb 8, 2021, 7:24:00 AM2/8/21
to checkvist-api
Hey Alex!

Assuming this will be on the front-facing part of your site (not hidden behind a login screen), your current setup has major security issues. By retriving the checklist on the front-end, you're exposing your API key to the public, meaning anyone visiting your site could snatch it and have full access to all of your private checklists. This isn't on you for missing something in the guide; the instructions should just have a little warning added. I fell for the same things when I first started out, and it took me way too long to learn about the security of API keys. Here's a good article, but long story short, any request you make using API keys needs to be done on the back end, and then communicated to the front-end.

There are a couple alternatives here:
  1. Make the checklist you want to display public
  2. Retrieve the data on the backend and then display it on the front-end
Before I waste time diving into an incredibly simple way to get your data with a free back-end Node.Js service, I'll wait to hear that you'd prefer that over making the checklist public.

If you do decide that you can make your checklist public, I'm happy to dive into what might be causing you those errors. On first glance, it looks like it's a probably with API helper (the JS file containing the functions you're using) but I'd have to actually look at it more to give you a good answer.

Hopefully that helps!

Reply all
Reply to author
Forward
0 new messages