Example Web Setup App (Simple Authentication)

Cloud
21

Thanks @zachary, please forgive my ignorance but would this be added to either the apache or nginx config file depending on the setup?

22

No problem at all! Others will undoubtedly have the same question.

If youā€™re serving static file content, then yes, youā€™ll add that to the webserver (apache, nginx, etc.) config.

If youā€™re responding to the request dynamically (with php, node, ruby, python, C#, java, etc.) then you could either set the header in the webserver config (as above) or in your application code. Just look in your web code frameworkā€™s documentation for how to set a header on the response, which often (kind of a ā€œgotchaā€) must be done before you start serving the actual HTML content of the page.

1 Like
23

Great thanks @zachary! Iā€™ll have a go at that tomorrow and post my results then :slight_smile:
(And yes I am just serving static content for the time being).

24

@G65434_2 I think the problem stems from using an AJAX request for OAuth implicit flow. Because the response does a redirect, you really should be using a normal HTML form. Otherwise the AJAX request is the one being redirected, not the page, which causes the CORS error you are seeing.

2 Likes
25

Thanks @bryce

How would I go about writing a form for this? (Sorry thereā€™s a few different ideas going around here and Iā€™m not a web expert!). Would it be something along the lines of this??

<form action="https://api.particle.io/v1/orgs/myCompany/customers/email=email&password=password&response_type=token&client_id=myappID" method="post">
  email: <input type="text" name="useremail"><br>
  password: <input type="text" name="userpassword"><br>
  <input type="submit" value="Submit">
</form>
26

Use email and password for the names, and hidden inputs for the other arguments, like below:

<form action="https://api.particle.io/v1/orgs/myCompany/customers" method="post">
  <input type="hidden" name="response_type" value="token" />
  <input type="hidden" name="client_id" value="myappID" />
  email: <input type="text" name="email" /><br>
  password: <input type="password" name="password" /><br>
  <input type="submit" value="Submit">
</form>
2 Likes
27

That worked! Thanks @bryce, I spent a crazy amount of time trying to get that to work with ajax.
I have noticed that my client-id now shows up in plain text when viewing the page souce, is this ok? Although I suppose it was trivial to find it before from the developers tool by looking at the JS source anywayā€¦

28

client id being exposed is fine, client secret is the one you want to protect. Implicit flow exists to not expose the secret without the need for a server.

2 Likes
29

Hi,

can you please summarize what is your current progress with " Example Web Setup App " ?
What actually works, do you have any code to share ?

As I lately received info from Particle guys, that they are not going to make ā€œorganizations friendlyā€ JS SDK for at least 3-4 months, Iā€™m wondering what really can be done with JS using HTTP API.
Iā€™m planning the same as you - create customer + setup WiFi + claim

thanks !

30

Hi @kefir135

Sure thing, Iā€™m currently away from my main computer but Iā€™ll post some code as soon as Iā€™m able.
So what Iā€™ve currently been able to do is this:

-Create a login using the JS library
-Create a ā€˜register new userā€™ button below the login one for creating new user accounts
-Subscribe to data pushed from the Particle devices in a dashboard type setup
-Send WiFi credentials to the device using the SoftAP library

What Iā€™m yet to do is add a couple of lines of code in my SoftAP JS to ā€˜claimā€™ the device when itā€™s WiFi is setup. This shouldnā€™t take too long however.

My company is currently going through quite an expensive freedom to operate and IP viability investigation so I canā€™t quite release my website yet but I will as soon as I can. In the mean time I will post some code fragments to help others along. (Once I get back to my computer).

Cheers,

1 Like
31

Hi @G65434_2

thanks, I do have the whole web ready (ready for the device Iā€™m building, with functions and variables) , including SoftAP wifi setting. It allows login with particle credentials.
What Iā€™m still missing is:

eating OAuth credtials (for the app)
creating particle users with it
claiming device

BR

32

Anyone following here, Iā€™ve started a bit of a tutorial over here: Tutorial for a simple web app

33

I have been following this conversation and other posts on this topic and I still have some issues in successfully claiming a Photon (Simple Authentication). Following the example of @G65434_2 and the tutorial, I have succeeded in:

  1. Creating a OAuth client ID.
  2. Create a customer + getting customer access token.
  3. Create a claim code using: https://api.particle.io/v1/device_claims?access_token=access_token_of_customer_created_in_step_2.
  4. Send WiFi credentials using SoftAp (using the work from @mebrunet - https://github.com/mebrunet/softap-setup-page ), including the claim_code parameter generated in step 3 in the url ( http://mydomain.com/softap/?claim_code=claim_code_generated_in_step_3 ).

According to JavaScript console, the claim code is successfully sent to the Photon. From what I understood reading the docs, when the Photon gets the WiFi credentials and connects to the Internet, it sents back the claim code to the Particle Cloud to finish the claiming process, but on my Particle Dashboard I cannot see any claimed device and not even a customer created.

I have read the docs, but I cannot figure out what I am doing wrong.
@kefir135, @bryce, @jeiden any ideas of what might be happening?

Thanks

34

@lia Your process sounds correct. I would start by pinging @mebrunet, the maintainer of the softap-setup-page repo to see if he has ideas. Note that the officially supported way to do this is using our mobile SDKs. This is a community-contributed tool