With May just around the corner, mark your calendars for an exciting event, CloudNativeCon/KubeCon, in Denmark’s capital city of Copenhagen. Many of us in the Cloud Native community already visited this beautiful city for DockerCon EU last year and we’re excited to be able to take in all of the wonderful sites again this year....
IBM Cloud Functions, based on Apache OpenWhisk, is a Function-as-a-Service (FaaS) platform, which executes functions in response to incoming events and costs nothing when not in use. It kicks up when the code is run, and it goes away when not needed. In this developer code pattern, we demonstrate how to utilize IBM Cloud Functions with OAuth 2.0 to enable the authentication and authorization in a web app.
Web apps need authentication and authorization. This seems redundant, yet for so many years, there has been no reusable solution. OAuth definitely took a big step forward by introducing third-party authentication and authorization. Still, authentication and authorization takes up a lot of deployment packaging and hosting resources, considering users only log in once for a relatively long time.
In this code pattern, we have a web app written in Angular. We will set up the Google OAuth API so users can log in to their Google accounts via OAuth. Of course, in the web app, the code already exists to invoke IBM Cloud Functions. We still need to define the actions via the IBM CLI. After we wire everything up, we can see how the login process invokes the IBM Cloud Functions action to fire the OAuth request to the Google API and return the token to the Angular web app. Note that the web app doesn’t have to be hosted in a specific environment; it just needs to reach the serverless APIs.
- User opens Angular via web browser and clicks login.
- Angular app opens Google OAuth web page, where users authenticate and grant application access.
- Google page redirects to OpenWhisk sequence
codeparameter in the URL.
- The sequence is triggered. The first OpenWhisk function
codeand invokes a Google API endpoint to exchange the
- The same
oauth-loginfunction invokes with the token another Google API endpoint to read user profile information, such as the user name.
- The sequence invokes the next OpenWhisk function
redirect, which invokes the Angular app with the token and the user name in the URL.
- When users click on invoke protected action in the Angular app, a REST API to the API management is invoked. The request contains the token.
- API management validates the token. If valid, the OpenWhisk function
- The response from
protected-actionis displayed in the Angular app.