Help with Spark API Vue & access from the front-end
Spark allows me to consume my API routes hassle free with the JWT-token. This is awesome and I can use Vue.JS to pull data from these routes to display in my front-end.
What I can't figure it out is why I'm getting a 401 (unauthorized) whenever I consume the API when I'm not logged in as a user. this isn't the case when I'm logged in. I get status of 200. I thought the JWT-token was supposed to solve this? Can someone please help me understand why I it's unauthorized when I'm logged out of the App?
When logged into the web app, it automatically appends the token to requests using the users token. When making calls to the api from OUTSIDE of the app, you have to manually append the token (?api_token=alskdjfal;kjf) to the query string.
@Cronix Got it. Should I just have my app make API requests with this api_token sent along with ajax requests? My concern is that this isn't secure and anyone could take my api_token by sniffing the traffic and then have complete access to the internal API.
My goal here is to allow for just my app to make requests to API whether a user is logged in or not. It seems like Spark limits this option to having to be logged in, which is super annoying.
I could make the api route not have the API middleware, but that would still expose the API route. Do I need to write custom middleware for this?
You could also possibly make an account for a "fake user" and generating an api key for that user. Then check if the current user is logged into the app and if not, automatically log that "fake" user in so everything just works. I guess it really depends on what you're building.
@Cronix Yes, I'm building a video subscription service. All courses are behind a paywall. But, I want to display the courses on the home page to a user that is logged out (they just wont be able to watch the videos).
To do this I'm making an ajax request to my internal API to get JSON data of all my courses and the respective videos. Make sense? I'm trying to use the same Vue.Js component (which makes the ajax request)... it works when a user is logged in, but returns 401(unauthorized) to the guest.
I think I may be overcomplicating this... thoughts?
For the things that are supposed to be accessible to the public, I'd either put them in the api middleware and not auth:api, or I'd bypass using the api on pages where you want to display the public data. It sounds like there would only be a handful of cases for public data so that might not get too hairy. Yes any public person could use the api for those routes, but if they are just a list of video titles or something I'm not sure how much harm there would be in that.
Or you can try what I suggested and make a "guest" account that would be automatically logged in if the current user isn't authenticated and restrict that guest users access using "abilities".
https://spark.laravel.com/docs/4.0/api#abilities
I haven't tried any of that. Just throwing out suggestions...
@Cronix Thanks, this makes sense. I'll play around with it and let you know what I come up with. The one thing I was thinking to try first is to just pass the courses traditionally from an eloquent call straight to the view for the public home page. And then when a user is logged in, I will call the API route instead. The only annoying thing here is that both views will look exactly the same, but I'm using different ways to get the data to render it on the front-end.
@Cronix Is there anyway to register my own application with an api_token and secure this down? So that no one can use the token to gain access to the API? You mentioned SSL, that's a given. Any other techniques I can take to harden the security of this? The benefit I see in this is that I can keep every route in the API locked down, but used everywhere in my app regardless of logged-in/logged-out