SoftAP library with client JS

The Archive Product Creation
1

Hi,

I'm using the SoftAP library to connect customers to wifi. I am accessing endpoints on the /192.168.0.1 port in the browser to do so. The method works seamlessly when I run our app locally, but when I test it in our deployed staging environment, I get this error:

xxx.js:309 Mixed Content: The page at 'https://xxxxxxxx.com/xxx was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.0.1/public-key'. This request has been blocked; the content must be served over HTTPS.

What have other people done to get around the Same Origin Policy disallowing HTTP Ajax requests?

2

You’ll notice the web-based Photon setup at https://setup.particle.io involves download a HTML file instead of just doing it directly from the https page. There are reasons for this, but the main one is that the same origin policy is hard to get around.

2 Likes
3

Thanks for the quick response!

That definitely seems reasonable for a Particle user/customer, but maybe a bit more inconvenient than ideal for a customer of our product. What are the other options for WiFi setup in a Two-Legged Auth strategy? I could see serving a page from the P1, but how would it have that code on it without having previously connected to WiFi?

Is it easier to create a more seamless experience with Simple Auth? It seems like they are pretty similar, sharing steps 4, 5, and 6 in this documentation.

4

It’s really hard to get around same origin for any web-based setup. The method used by setup.particle.io would work if you just did the same thing: generate your two-legged customer claim code and embed it in a downloaded html page. It’s kind of a pain, but doable.

The other alternative is of course to do it entirely device-hosted. The advantage there is that since the device hosted pages are already hosted from http://192.168.0.1 you won’t run into problems hitting the configuration endpoints. Though if you’re running with SoftAP you could also just handle the requests yourself and map them into WiFi API calls, as well.

1 Like
5

@rickkas7 thanks again. I really appreciate all of the help.

Could you say more about this:

Though if you’re running with SoftAP you could also just handle the requests yourself and map them into WiFi API calls, as well.

I'm still a bit uncertain how I will be able to map the WiFi API (in the P1) to the the SoftAP that I'm using in browser (I'm using @mebrunet's Vanilla JS SoftAP setup). As far as I understand it, we can assign base firmware to a customer's P1, but it won't become accessible until it is connected to WiFi, and thus the Particle Cloud. If that's the case, how will we embed the firmware that allows the P1 to spawn a device-hosted setup?

Thanks!

6

@rickkas7 I did a bit more digging today and I think I understand my issue better, but still have some questions.

I think some of my confusion was coming from my use of the SoftAP. I have been serving the softap-setup-page SoftAP externally, from my webpapp and not the device-hosted route, which seems to be more common. This wasn't working on a remote server, as we have been over, because it is a cross-origin request.

I have now added the code in the SoftAP HTTP documentation to my Photon and successfully hosts the softap-setup-page HTTP page at http://192.168.0.1/. There are still a few things I'm confused about:

  1. Assuming I go this device-hosted route, as you suggested is an option, how can I generate a customer claim code?
  2. In the server-hosted strategy, I was able to make requests to the Particle cloud using my product access_token. Do I need to generate the claim code ahead of time manually, and add it to the compiled code on the customer's device?
  3. If so, how is this done in a sensible way, without it expiring? If not, what is my path here?
  4. What did you mean by:

Though if you’re running with SoftAP you could also just handle the requests yourself and map them into WiFi API calls, as well.

7

Any chance you could expand upon this please? We are having a heck of a time getting this to work.

And do you mean host the wifi setup and the claim code portion on the photon?

8

If you could elaborate about what you want SoftAP to do (in addition to what the sample implementation does) we may be able to assist.

For simple additions you could have a look at this

9

We’re trying to set the claim code via the listening mode soft ap. with the files being hosted by the photon itself. and we’re running into problem with url query not redirecting to the proper place. We’re trying to come up with a process for our customers to add devices and set the claim_code on the device to there account without having to use the particle apps. We keep running into the cross origin errors(because the Photon doesn’t provide https pages). And I have not found any guides that explain this from a-z. There’s lots of pieces of information on parts of the process but no clear complete information.

2 Likes
10

We have it working if when we run mebrunet example from the github hosting. But if we try to run it from the photon we get the cross origin error.

11

Mebrunet example from the github hosting works for us because its being hosted with http which we’ve haven’t been able to find any hosting services that still offer http so that we can host our own page to better fit our needs. As of now were using a node server being ran on heroku and firebase for site hosting and cloud hosting all of those are being served over https this creates an error when we use the softap-js package within our application so to get around this issue I have a button that opens up a window and passes the claim code through a url query parameter as per the doc. The issue we’re running into with the url route when hosting from the photon is that it only opens up index.html without the query. We have confirmed that the photon does receive the query with a console log, the photon isn’t properly routing for us though. Routing works fine when we use Mebrunet example and when i’m hosting the softap-pages locally/ withing our app being ran locally. I hope this info helps :smile:

1 Like