Tiven Wang
Wang Tiven February 23, 2017
425 favorite favorites
bookmark bookmark
share share

The project code of the OAuth2 client for YaaS can be downloaded from Github

The live demo: OAuth2 with YaaS

OAuth 2

OAuth 2 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub, and YaaS. It works by delegating user authentication to the service that hosts the user account, and authorizing third-party applications to access the user account. OAuth 2 provides authorization flows for web and desktop applications, and mobile devices.

OAuth defines four roles:

  • Resource Owner
  • Client
  • Resource Server
  • Authorization Server

The resource owner is the user who authorizes an application to access their account. The application’s access to the user’s account is limited to the “scope” of the authorization granted (e.g. read or write access).

The resource server hosts the protected user accounts, and the authorization server verifies the identity of the user then issues access tokens to the application.

From an application developer’s point of view, a service’s API fulfills both the resource and authorization server roles. We will refer to both of these roles combined, as the Service or API role.

The client is the application that wants to access the user’s account. Before it may do so, it must be authorized by the user, and the authorization must be validated by the API.

 +--------+                               +---------------+
 |        |--(A)- Authorization Request ->|   Resource    |
 |        |                               |     Owner     |
 |        |<-(B)-- Authorization Grant ---|               |
 |        |                               +---------------+
 |        |
 |        |                               +---------------+
 |        |--(C)-- Authorization Grant -->| Authorization |
 | Client |                               |     Server    |
 |        |<-(D)----- Access Token -------|               |
 |        |                               +---------------+
 |        |
 |        |                               +---------------+
 |        |--(E)----- Access Token ------>|    Resource   |
 |        |                               |     Server    |
 |        |<-(F)--- Protected Resource ---|               |
 +--------+                               +---------------+

Obtaining Authorization

  • Authorization Code Grant
  • Implicit Grant
  • Resource Owner Password Credentials Grant
  • Client Credentials Grant

OAuth2 in YaaS

Implicit Grant

The implicit grant type is used to obtain access tokens (it does not support the issuance of refresh tokens) and is optimized for public clients known to operate a particular redirection URI. These clients are typically implemented in a browser using a scripting language such as JavaScript.

  +----------+
  | Resource |
  |  Owner   |
  |          |
  +----------+
      ^
      |
     (B)
  +----|-----+          Client Identifier     +---------------+
  |         -+----(A)-- & Redirection URI --->|               |
  |  User-   |                                | Authorization |
  |  Agent  -|----(B)-- User authenticates -->|     Server    |
  |          |                                |               |
  |          |<---(C)--- Redirection URI ----<|               |
  |          |          with Access Token     +---------------+
  |          |            in Fragment
  |          |                                +---------------+
  |          |----(D)--- Redirection URI ---->|   Web-Hosted  |
  |          |          without Fragment      |     Client    |
  |          |                                |    Resource   |
  |     (F)  |<---(E)------- Script ---------<|               |
  |          |                                +---------------+
  +-|--------+
   |    |
  (A)  (G) Access Token
   |    |
   ^    v
  +---------+
  |         |
  |  Client |
  |         |
  +---------+

Step 1: Add Login Button

Add the login with YaaS button in the implicit grant page app/login/implicit-grant.html

<a href="https://api.beta.yaas.io/hybris/oauth2/v1/authorize?response_type=token&client_id=7bTHGrDS9DmuPXPAYbWHOIpV9IzugeUr&redirect_uri=https%3A%2F%2Fyaas-oauth2-client-nonreproducible-coddler.cfapps.us10.hana.ondemand.com%2F%23%2Fimplicit-grant%2Fcallback">
  <button>Login with YaaS</button>
</a>

User can access the page using uri <host>/#/login

Authorization Request
  • response_type
    REQUIRED. Value MUST be set to “token”.
  • client_id
    REQUIRED. The client identifier as described in Section 2.2.
  • redirect_uri
    OPTIONAL. After completing its interaction with the resource owner, the authorization server directs the resource owner’s user-agent back to the client. The authorization server redirects the user-agent to the client’s redirection endpoint previously established with the authorization server during the client registration process or when making the authorization request.
  • scope
    OPTIONAL. The authorization and token endpoints allow the client to specify the scope of the access request using the “scope” request parameter. In turn, the authorization server uses the “scope” response parameter to inform the client of the scope of the access token issued.
  • state
    RECOMMENDED. An opaque value used by the client to maintain state between the request and callback. The authorization server includes this value when redirecting the user-agent back to the client. The parameter SHOULD be used for preventing cross-site request forgery as described in Section 10.12.

Step 2: OAuth Callback URI

Add the callback uri https://yaas-oauth2-client-nonreproducible-coddler.cfapps.us10.hana.ondemand.com/#/implicit-grant/callback into the redirect URIs of the client in YaaS.

Define an controller and uri to receive the callback from authorization of YaaS. The callback uri from authorization server of YaaS will be https://yaas-oauth2-client-nonreproducible-coddler.cfapps.us10.hana.ondemand.com/#/implicit-grant/callback#token_type=Bearer&access_token=022-62d66b3e-0d8c-4ae2-9ae6-0ef7b55c1e96&expires_in=3600&scope=hybris.tenant=testdigaccount

module.exports = ['$scope', '$location', function($scope, $location) {
  var oauth2Response =  $location.hash();
  var oauth2Params = oauth2Response.split('&');
  var auths = {};
  oauth2Params.forEach(function(e, i) {
    var params = e.split('=');
    auths[params[0]] = params.splice(1).join('=');
  })
  $scope.auths = auths;
 }];

The output in callback page will be

{
  "token_type": "Bearer",
  "access_token": "022-62d66b3e-0d8c-4ae2-9ae6-0ef7b55c1e96",
  "expires_in": "3600",
  "scope": "hybris.tenant=testdigaccount"
}

Then you can use the access_token to access the resource in YaaS service from your web app client.

Resource Owner Password Credentials Grant

If the client application is trusted by the user (e.g. it is owned by the service, or the user’s desktop OS), this grant type can be enabled on the authorization server.

The authorization request is https://api.beta.yaas.io/hybris/oauth2/v1/token?grant_type=password&client_id=CLIENT_ID&username=USERNAME&password=PASSWORD

The JavaScript implementation for the ‘Resource Owner Password Credentials Grant’ like:

var YaaSOAuth2 = $resource('https://api.beta.yaas.io/hybris/oauth2/v1/token',
                    {},
                    {
                      authorize: {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        transformRequest : function(obj){
                          var str = [];
                          for(var p in obj)
                            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                          return str.join("&");
                        }
                      }
                    }
                  );

var credentials = {
  "grant_type":'password',
  "client_id": '7bTHGrDS9DmuPXPAYbWHOIpV9IzugeUr'
};

/**
 * Submit the authorization request when user click "submit" button
 */
$scope.submit = function(user) {
  credentials.username = user.name;
  credentials.password = user.password;
  $scope.credentials = credentials;
  YaaSOAuth2.authorize(credentials, function(response) {
    $scope.response = response;
  }, function(error) {
    $scope.response = error;
  });
};

The Access Token Response

{
  "token_type": "Bearer",
  "access_token": "022-f447e930-3bad-4da0-8629-a95f8618a32b",
  "expires_in": 3600,
  "scope": "hybris.tenant=testdigaccount"
}

Client Credentials Grant

The client credentials grant type provides an application a way to access its own service account.

The authorization request is https://api.beta.yaas.io/hybris/oauth2/v1/token?grant_type=client_credentials&client_id=CLIENT_ID&client_secret=CLIENT_SECRET

The JavaScript implementation for the ‘Client Credentials Grant’ like

...
var credentials = {
  "grant_type":'client_credentials',
  "client_id": '7bTHGrDS9DmuPXPAYbWHOIpV9IzugeUr',
  "client_secret": 'H2LYBpaNVDwk9E5A'
};
YaaSOAuth2.authorize(credentials, function(response) {
  $scope.credentials = credentials;
  $scope.response = response;
});

The Access Token Response

{
  "token_type": "Bearer",
  "access_token": "022-6fabea3c-10a6-486a-888a-beaa61b380e7",
  "expires_in": 3600,
  "scope": "hybris.tenant=testdigaccount"
}

Next Steps

References

Similar Posts

  • Cloud-Native Applications How to build cloud-native applications on a cloud platform.
  • Serverless Architecture
  • Firebase - Hello world
  • Microservices
  • Training JavaScript - 3. Angular for Frontend Development Angular (commonly referred to as 'Angular 2+' or 'Angular 2') is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer's workflow while building complex web applications. Angular is a complete rewrite from the same team that built AngularJS.
  • Try Cloud Foundry 5 - UAA OAuth2 This article explains how to use Cloud Foundry APIs from a user application using the built in identity management solution in the User Account and Authentication Service (UAA). The UAA acts (amongst other things) as an OAuth 2.0 Authorization Server, granting access tokens to Client applications for them to use when accessing Resource Servers in the platform, such as the Cloud Controller. This article describes the responsibilities of a Client application and the mechanics of setting one up.

Comments

comments powered by Disqus
Back to Top