Basic Ionic 4 Angular 6 WebApp Photon Developer Login

Troubleshooting
1

I’m having an issue trying to generate an access token with a basic login page in chrome using the cloud api endpoint: POST /oauth/token. I already have a particle account with my photon claimed. I know I can hard code my access code from particle build but I want to make a login page to generate an access code for people that are particle developers and already have particle accounts with claimed devices. When I click the login button I get the error below:

image
image1334×597 42.6 KB

Here is the typescript function I am using:

  userAuthentication(email,password) {
    var data = "grant_type=password&username="+email+"&password="+password;
    var reqHeader = new HttpHeaders();
    reqHeader = reqHeader.append('Content-Type','application/x-www-urlencoded');
    reqHeader = reqHeader.append('particle','particle');
    
    console.log(apiRoot+'/oauth/token');
    console.log(reqHeader)
    console.log(data);
    
    return this.http.post(apiRoot+'/oauth/token',data,{headers: reqHeader});
  }

I’m sending two request headers: ‘Content-Type’:‘application/x-www-urlencoded’ and ‘particle’,‘particle’ based on the documentation this is what I think I am supposed to send? Please let me know what I am doing wrong or if you need any more information. Thank you.

2

reqHeader = reqHeader.append('particle','particle');

That's not quite right. It should be a HTTP basic authentication header, like:

reqHeader = reqHeader.append("Authorization", "Basic cGFydGljbGU6cGFydGljbGU=");

The header value is the string particle:particle encoded Base64.

3

Hey rickkas7, thank you for the reply.

Sorry I am new to this and still don’t understand…

Isn’t “POST /oauth/token” used to generate an access token? There wouldn’t be an access token to put in the Authorization header, right? The goal of this post request is to generate an auth token from an email and password so I can pass it to “https://api.particle.io/v1/devices?access_token=access-token-goes-here” to list the devices for the user of my app to select from. This is similar to your git repo for testing the ParticleJS lib. Then once they select the device, it will take them to the home screen of my app and display published vars (assuming they loaded my firmware on their photon).

What does exactly does this mean? “For controlling your own developer account, you can use particle:particle.”

I’m confused as what to put in the http header when generating an access token from an email and password. Do should I use an oAuth Client ID and oAuth Secret? It says for a developer to use particle:particle in place of the oAuth Client ID and oAuth Secret so that’s what I tried.

Here is the documentation I’m following:

image
image1048×826 50.8 KB

Any input is appreciated, thanks!

4

If you are generating a login for a username and password of an existing Particle account, you don’t use an oAuth client ID and secret. Instead, you pass the username and passwords in parameters to the request. This technique allows anyone with an existing Particle account to enter their username and password, for example in an HTML form, and submit it to generate an auth token, which I think it what you want to do.

The Authorization header must be the static string particle:particle, base 64 encoded. Note that the curl command uses the -u option (HTTP basic authentication). That’s why you can’t add the header the way you did, you need to add an Authorization header with the value I wrote above.

The username and passwords as you had specified in the query parameters, that part is fine.

1 Like
5

Thank you so much for the explanation! I get it now!

Here is the code that works:

  userAuthentication(email,password) {
    var data = "grant_type=password&username="+email+"&password="+password;
    var base64Auth = btoa("particle:particle");
    var reqHeader = new HttpHeaders();
    reqHeader = reqHeader.append('Content-Type','application/x-www-form-urlencoded');
    reqHeader = reqHeader.append('Authorization','Basic '+base64Auth);
    
    console.log(apiRoot+'/oauth/token');
    console.log(reqHeader);
    console.log(data);
    console.log(base64Auth);
    
    return this.http.post(apiRoot+'/oauth/token',data,{headers: reqHeader});
  }
2 Likes