Integration of Spring Oauth2 implementation with the HTML front end using javascript - html

Question

I am implementing spring oauth2 for securing my rest api. Basically i am limiting the use of rest api to particular users rather then limiting to every users.
I had implemented the backend and secured my api using spring oauth2.
I am following this steps:
1)Send the GET request with the five parameters.
localhost:8080/SpringRestSecurityOauth/oauth/token?grant_type=password&client_id=Awyi123nasdk89&client_secret=asdj39m32##$s&username=rahul#gmail&password=rahul#9831
2) Server validates the user with the help of spring security and return the json response with access code.
{
"access_token": "22cb0d50-5bb9-463d-8c4a-8ddd680f553f",
"token_type": "bearer",
"refresh_token": "7ac7940a-d29d-4a4c-9a47-25a2167c8c49",
"expires_in": 119
}
3)I access protected resources by passing this access token as a parameter, the request goes something like this:
localhost:8080/SpringRestSecurityOauth/api/users/?access_token=8c191a0f-ebe8-42cb-bc18-8e80f2c4238e
4) In case the token is expired, user needs to get a new token using its refreshing token that was accepted in step(2). A new access token request after expiration looks something like this:
localhost:8080/SpringRestSecurityOauth/oauth/token?grant_type=refresh_token&client_id=restapp&client_secret=restapp&refresh_token=7ac7940a-d29d-4a4c-9a47-25a2167c8c49
All the above step are working fine. Now i need to implement this on my client side. So that a particular client can access this call. I am using HTML/CSS as client side technology.
How client can get the access token? Should it be stored in the browser local storage? Or it should be generated every time the rest call is been made?
Any example would help me to proceed further.

Answer 1

I'm implementing my project like you. I use angularjs and get the access token from response json then store it into cookies.
This link provide sample code for you: http://www.baeldung.com/rest-api-spring-oauth2-angularjs. (See Frontend - Password Flow).
Because refresh token should keep secret and the client is html app, you should see this link http://www.baeldung.com/spring-security-oauth2-refresh-token-angular-js for handling refresh token.
For html client, after obtaining access token using refresh token when access token is expired, I use http-auth-interceptor ([http]://witoldsz.github.io/angular-http-auth/) to retry all rest requests failed because of expired access token.
I'm sorry that I have not enough reputation to post more than 2 links.