Skip to content
This repository has been archived by the owner on Jul 22, 2024. It is now read-only.

Home

Jump to bottom
andy shi edited this page Mar 1, 2018 · 9 revisions

Short Name

Use IBM Cloud functions to create an OAuth app with Angular

Short Description

This code pattern we demonstrate given a web app, how to utilize IBM Cloud functions with OAuth 2 to simplify the authentication and authorization.

Offering Type

Cloud

Introduction

Each web app needs authentication and authorization. This seems really redundant yet for so many years there is no reusable solution. OAuth definitely leaped a big step forward by introducing 3rd party authentication and authorization. Still, authentication and authorization takes up a lot of deployment packaging and hosting resource considering user only logs in once for a relatively long time. IBM Cloud functions, the Serverless computing solution is the perfect solution. It only kicks up when user actually logs in and goes away when not needed.

Author

Niklas Heidloff Andy Shi

Code

code

Demo

Video

Overview

In this code pattern, we have a web app written in Angular JS. The next thing we do is to set up the Google OAuth API so users can login to their google account via OAuth. Of course, in the web app, the code already exists to invoke the IBM Cloud functions. Still we need to define the actions via the IBM wsk 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 Google API and return the token to Angular web app. Note that the web application doesn't have to be hosted in a specific environment, as long as it can reach the Serverless apis.

Flow

architecture

  1. User opens Angular via web browser and presses 'login' button.
  2. Angular app opens Google OAuth web page where users authenticate and grant application access.
  3. Google web page redirects to OpenWhisk sequence 'oauth-login-and-redirect' with a 'code' parameter in the URL.
  4. The sequence is triggered. The first OpenWhisk function 'oauth-login' reads the 'code' and invokes a Google API endpoint to exchange the 'code' against a 'token'.
  5. The same 'oauth-login' function invokes with the token another Google API endpoint to read user profile information, for example the user name.
  6. The sequence invokes the next OpenWhisk function 'redirect' which invokes the Angular app with the token and the user name in the url.
  7. 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.
  8. API management validates the token. If valid, the OpenWhisk function 'protected-action' is invoked.
  9. The response from 'protected-action' is displayed in the Angular app.

Included components

  • IBM Cloud functions: Execute code on demand in a highly scalable, serverless environment.

Featured technologies

  • Serverless: An event-action platform that allows you to execute code in response to an event.

Blog

Blog Title

Building Serverless OAuth Applications with IBM Cloud Functions

Blog Author

Andy Shi

Blog Content

Building Serverless OAuth Applications with IBM Cloud Functions

Links

Clone this wiki locally