Ionic 2 Get request and Post request


#1

I am using 0authv2 and Ionic 2
My application needs to create a GET request that looks like this:

Get         GET_URL
client_id     <clientid>
redirect_uri  URL
response_type   code 
scope         offline_access

The response should provide me with an access code to place in a POST request, this will look something like this:

POST              POST_URL
client_id	   <clientid>					
client_secret  <client secret>					
code	 	      CODE_FROM_GET				
grant_type	      authorization_code					
redirect_uri      URL

The instructions provided say to use a get, then URL load the user to the login page. At the point of logging in, they would get a URL that contains the code as well. I would then pass this with the POST to the server to get the access token. I am getting the same code with the GET, so is there a way to store this, then pass it with a POST to receive an access token?

I can provide my broken code if that helps, but I have been looking at combinations for a week with no success. Thanks again!


#2

I guess you are trying to oauth2 grant type code implementation.

There are possible to different approuch. But you can use this:

  • First open the url in browser. Use InAppBrowser for this: http://ionicframework.com/docs/native/in-app-browser/

  • Follow the url with inappbrowser “loadstop” event and get the code.

  • After you get the code, you will send a http post request with this code header and you can get the token.

  • Save the token and add the token all request.


#3

Thanks, the code I have for this is below, but its going right to the error in the console. I used loadstart, because the code is in the redirect after the user signs in.

public createAccountPOST() {

    var access_token: any;

    var urlsp = "COMPANY_SIGN_IN_URL";
    let browser = new InAppBrowser(urlsp, '_blank', 'location=yes,zoom=yes,enableViewportScale=yes');
    browser.on("loadstart").subscribe((event: InAppBrowserEvent) => {

        var url_code = this.getQueryVariable(event.url, "code");
        localStorage.setItem('auth_token', url_code);
        //url_code = localStorage.getItem('url_code');


    //setup for POST
    let details = {
      client_id: "client_id",
      client_secret: "client_secret",
      code: url_code,
      grant_type: "authorization_code",
      redirect_uri: "redirect_uri"

    }

      return this.http.post('TOKEN_ENDPOINT', details)
        .map(res => res.json())
        .subscribe(
        data => {
          this.getData = JSON.stringify(data)
          var access_token = data.getData;
          localStorage.setItem('access_token', access_token);
        },
        (err) => {
          console.log("post didnt work")
          alert("POST failed");
        }
        );
    });

  }

#4

Logging the error would probably be useful. I also think it’s a really important habit to declare return value types for every function in your code. Since createAccountPOST() doesn’t have one, I have to ask: “what are you expecting it to return?”.


#5

What is error ? I think you forget Authorization header. You must add client id to header for token.

let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + this.authClient);

let options = new RequestOptions({ headers: headers });

// use string not object.
 let details = "client_id=client_id&client_secret=client_secret" ...;

this.http.post('TOKEN_ENDPOINT', details, options)
        .map(res => res.json())
        .subscribe(
        data => {
          this.getData = JSON.stringify(data)
          var access_token = data.access_token;
          localStorage.setItem('access_token', access_token);
         // you can use navController. Didn't return anything.
        },
        (err) => {
          console.log("post didnt work")
          alert("POST failed");
        }
        );


#6

Thank you so much for your help. My issue was I was not correctly sending the headers, and I applied the cleaned up logic you made. Your code works, and now I am getting an undefined response. Do I need to convert it so that I can see it?


#7

Ok I converted the response to JSON and now I can pull out elements based on the name. Thank you so much again for your help. Your answer is the solution, and I just added some internal headers for it to work properly.