Name: IBM-function-webapp
Owner: International Business Machines
Description: Utilize IBM Cloud Functions with OAuth 2.0 to enable authentication and authorization
Created: 2017-11-28 00:30:10.0
Updated: 2018-04-16 22:10:52.0
Pushed: 2018-05-07 20:26:58.0
Homepage: https://developer.ibm.com/code/patterns/develop-protected-serverless-web-applications/
Size: 6814
Language: TypeScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This code pattern shows how to write Angular web applications which use IBM cloud functions actions to implement backend logic. Users need to log in with their Google accounts via OAuth. After this users can access IBM cloud functions actions that have been protected via IBM cloud functions API management. Through this exercise, users will get familiar with:
install -g @angular/cli
install
1. Clone the repo
In a terminal, run:
git clone https://github.com/IBM/IBM-function-webapp.git
2. Create protected API
Run wsk bluemix login
or wsk bluemix login --sso
if you have sso enabled. This command will make you pick a openwisk namespace, like this:
ct a namespace:
andy.shi_dev
Developer Advocacy_dev
Developer Advocacy_Watson Developer Advocacy
Developer Advocacy_Cloud Developer Advocacy namespace>1 ok: User 'Andy.Shi@ibm.com' logged into Bluemix
se a namespace from the list and remember it.
Modify openwhisk-protected/my-api-swagger.json
. Replace all the occurances of the namespace with your picked namespace. Here is what it should like after the change:
“x-openwhisk”: {
"namespace": "andy.shi_dev",
"url": "https://openwhisk.ng.bluemix.net/api/v1/web/andy.shi_dev/default/protected-action.json"
}, “x-ibm-configuration”: {
"assembly": {
"execute": [{
"operation-switch": {
"case": [{
"operations": ["getAction"],
"execute": [{
"invoke": {
"target-url": "https://openwhisk.ng.bluemix.net/api/v1/web/andy.shi_dev/default/protected-action.json"
}
}]
}]
}
}]
}
}
n:
cd openwhisk-protected /init.sh
command will create a "protected action". You should see the result like:
ok: updated action protected-action ok: created API /path/action get for action /andy.shi_dev/default/protected-action https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/b8c64953ec67f9443f7a79710b0b1aa59f3980f7590bc03b51262b22002c650c/path/action
last url here is needed for the "pretectedUrl" field in step 6.
Deploy OpenWhisk OAuth Actions**
n:
cd .. cd openwhisk-oauth /init.sh cd ..
Create Google Application**
en the [Google Developers API Console](https://console.developers.google.com/apis). From the left side bars, choose `Credentials` bar.
[img1](screenshots/Oauth1.png)
om the `Create credentials` menu bar pick `OAuth client ID`
g2](screenshots/Oauth2.png)
xt you will see the warning message: "To create an OAuth client ID, you must first set a product name on the consent screen". Click "Configure content screen" button and finish the screen. That is pretty straightforward.
ming back to the "Create client id" tab, pick the first choice `Web Application`. You will see the tab expands.
"Authorized JavaScript origins", enter the domain of IBM cloud functions. For "Authorized redirect URIs", enter the "oauth-login-and-redirect" url(mind the namespace).
g3](screenshots/Oauth3.png)
ick "Create" button and you will get the client id and secret in a popup. Save that information.
g4](screenshots/Oauth4.png)
Deploy OpenWhisk OAuth Actions again**
en `openwhisk-oauth/providers-template.json` and save it as `openwhisk-oauth/providers.json`.
ange redirect URL to reflect your namespace.
ll in client id, secret from previous step. You should have something like this:
{
"authorization_type": "Bearer",
"token_endpoint_form": {
"grant_type": "authorization_code",
"redirect_uri": "https://openwhisk.ng.bluemix.net/api/v1/web/andy.shi_dev/default/oauth-login-and-redirect"
},
"userinfo_identifier": "email",
"credentials": {
"client_id": "453375156318-edqjkls99e9jiv0f1f7of2tvbe1k7k0m.apps.googleusercontent.com",
"client_secret": "rPc_cR7UZomFtOMZ5uT6DBU1"
}
}
n `openwhisk-oauth/init.sh`.
Configure and run the Angular App**
en `angular/src/assets/providers-template.json`, and save as `angular/src/assets/providers.json`.
ange redirectUrl, clientId and protectedUrl. "protectedUrl" is acquired at step 2.
{
"google": {
"authorizationUrl": "https://accounts.google.com/o/oauth2/v2/auth",
"redirectUrl": "https://openwhisk.ng.bluemix.net/api/v1/web/andy.shi_dev/default/oauth-login-and-redirect",
"clientId": "453375156318-edqjkls99e9jiv0f1f7of2tvbe1k7k0m.apps.googleusercontent.com",
"protectedUrl": "https://service.us.apiconnect.ibmcloud.com/gws/apigateway/api/b8c64953ec67f9443f7a79710b0b1aa59f3980f7590bc03b51262b22002c650c/path/action"
}
}
to `angular` folder and run `ng serve`.
a browser, open `localhost:4200`.
ick on `login` button first to invoke the oauth action. Then click the `Invoke Protected Action` to invoke the protected action.
sult](screenshots/web-app.png)
redits
developer code pattern is developed by **Niklas Heidloff**. Thanks to **Nick Mitchell** and **Lionel Villard** for their work on the open source project [openwhisk-oauth](https://github.com/starpit/openwhisk-oauth), especially for the OAuth login functionality.
icense
che 2.0](LICENSE)