https://github.com/swisscom/sample-uaa-angular-client
Oidc sample app for Angular
https://github.com/swisscom/sample-uaa-angular-client
hacktoberfest
Last synced: about 1 year ago
JSON representation
Oidc sample app for Angular
- Host: GitHub
- URL: https://github.com/swisscom/sample-uaa-angular-client
- Owner: swisscom
- License: mit
- Created: 2019-02-25T14:17:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-16T15:18:57.000Z (over 1 year ago)
- Last Synced: 2025-03-04T22:02:06.588Z (over 1 year ago)
- Topics: hacktoberfest
- Language: TypeScript
- Homepage:
- Size: 930 KB
- Stars: 2
- Watchers: 20
- Forks: 4
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# sample-uaa-angular-client
This is a small Angular sample app to demonstrate how to integrate with a UAA service using the implicit flow of OIDC. The code is based on the Angular sample app in [oidc-client-js](https://github.com/IdentityModel/oidc-client-js/tree/dev/samples/Angular/App).
## Running this sample
Here's how you can run the example app in your own space.
### Set up a resource server
To run this sample, you need to first set up a resource server, i.e. an API to which your Angular app will connect once it has the auth token. To achieve this you can either deploy the [Spring Boot sample](https://github.com/swisscom/sample-uaa-spring-boot-service-provider) or the [Ruby sample](https://github.com/swisscom/sample-uaa-ruby-service-provider). We will refer to the URL under which this resource server is running as ``.
### Clone the repo
Next you need to clone this repo.
```
git clone https://github.com/swisscom/sample-uaa-angular-client.git
```
### Adapt the config
Adapt the `manifest.yml` to include the route which you want to assign to your app as well as the URL of the resource server. Note that you will also need to reference this route in the service instance creation step below.
```
---
applications:
- name: sample-uaa-angular-client
env:
SERVER_URL:
memory: 64MB
command: $HOME/public/start.sh
path: dist
routes:
- route:
services:
- oauth2
```
### Create an instance of the UAA service
Use the [Cloud Foundry CLI](https://github.com/cloudfoundry/cli) to create a user provided service instance for the UAA you are targeting. The parameter `redirectUris` will reference your app's route, as specified in the `manifest.yml`. Be sure to tag your service instance with `oauth2` as shown below, so that the the OIDC enpoints of the instace can be picked up by the service binding an served to the browser app.
```
CREDENTIALS='{"logoutEndpoint": "/logout.do", "userInfoEndpoint": "/userinfo", "checkTokenEndpoint": "/check_token", "scope": "openid,roles,user_attributes", "grantTypes": "implicit", "redirectUris": "/callback", "authorizationEndpoint": "/oauth/authorize", "clientId": "HwykJoWyMNmJMLe93OgFiTxeOzYVMk7ff80v7ss87FwUJKIwsyzlM6vm2YVN4u9g", "clientSecret": "null", "accessTokenValidity": "14400", "tokenEndpoint": "/oauth/token"}
cf create-user-provided-service oauth2 -p $CREDENTIALS -t oauth2
```
### Build the Angular app
Run the productive build for the Angular app.
```
npm run build
```
### Push the app
Push the app to Cloud Foundry
```
cf push
```
## Sample overview
### Authorization code
- Service provider (Spring boot): https://github.com/swisscom/sample-uaa-spring-boot-service-provider
- Service provider (Ruby): https://github.com/swisscom/sample-uaa-ruby-service-provider
### Implicit flow & Client Credentials
> **_WARNING:_** [PKCE's](https://oauth.net/2/pkce/) secure implementation renders the implicit flow obsolete, as it is [vulnerable](https://datatracker.ietf.org/doc/html/draft-ietf-oauth-security-topics#section-2.1.2) and must not be used anymore.
- Client (VueJS): https://github.com/swisscom/sample-uaa-vue-client
- Client (React & Redux):https://github.com/swisscom/sample-uaa-react-redux-client
- Client (AngularJS): https://github.com/swisscom/sample-uaa-angular-client
- Resource Server (Spring boot): https://github.com/swisscom/sample-uaa-spring-boot-resource-server
- Resource Server (Ruby): https://github.com/swisscom/sample-uaa-ruby-resource-server