Ionic 2 http POST & GET response/request

Ionic Framework ionic-v3
1

I am currently using Ionic 2 to create this application

So in order to properly authenticate a user with my application, my company requires them to sign in with their credentials. To acheive this, I am to utilize 0authv2 and Ionic 2 (preferably typescript). The instructions provided are as follows:

After a user signs in, they are redirected to the redirect uri, with an authorization code attached in the URL: The redirect would look something like this (assuming the application is “demoapp.com”) demoapp.com

At this point, the application will request a token from their server, and pass it to the authorization endpoint. The POST request that they provided me as an example is as follows:

POST              https://INTERNAL_URL_PROVIDED/oauth/ls/connect/token
client_id         <clientid>                    
client_secret     <client secret>                   
code              CODE IN RESPONSE              
grant_type        authorization_code                    
redirect_uri      INTERNAL_URL_PROVIDED

{code=CODE IN RESPONSE&client_id=client.id&client_secret=client.secret&redirect_uri=https%3A%2F%2FINTERNAL_URL_PROVIDED%2Fcallback&grant_type=authorization_code}

If the authorization is valid, the authorization server will send a response containing the access token (and optionally, a refresh token) to the application. The entire will look something like this:

{"access_token":"INTERNAL_ACCESS_TOKEN","expires_in":EXPIRATION_TIME,"token_type":"Bearer","refresh_token":"INTERNAL_REFRESH_TOKEN"}

My question is, how do I go about actually handling this, as well as handling the response that I get to store the token? I would extract the code from the URL, and then post it back to their server? I would assume that I would store it in local storage, and then check to see if it is valid when the user opens the application (these expire every so often). Do I need to utilize a GET request first to properly handle and preface this situation? Any help would be so appreciated.

2

I currently have a logging system with tokens using jwt and I can tell you that what I do is get that json that returns me when I log in and save the token with localstorgage then with that token I check on the server if the user is the correct one, clear I keep in the information token of the user that is the one that decodes the server with another call to be able to make use of it, thus the one that maintains the registry of logueo as such is the client but not the server

3

Thanks for your response. Do you have a scrubbed example on how to handle the response, extract the token, post to the server, and then store the token in local storage? I am planning on checking the local storage to see if the token is valid when the users opens the application. Thanks again.

4

Save token

localStorage.setItem('token', this.data.access_token);

If your application has tabs to call a function there, or if not in the app components

example

 public getUser(){
that.userService.load(that.loginData) .then((data) => { 
this.data = data;
console.log("save data");
},(err) => { 
console.log(err);
 });
}

The function sends the token in the logindata per post to the server and it returns a json with the data that you want of the user, this json you save it or you pass it by events to other pages

5

Thank you for your help. I think I am getting hung up on the response. How do I store a response from a request? The response would look like:

{"access_token":"TOKEN_I_WANT_TO_STORE","expires_in":3600,"token_type":"Bearer","refresh_token":""}

I basically just want to store the access_token in a variable.

6

You get an object you just have to move to the access_token attribute

  this.authService.login(this.loginData).then((result) => {
      this.data = result;
   localStorage.setItem('token', this.data.access_token); // here
// this.data.access_token is the token you will store
}, (err) => {
        console.log(this.data);
    });