opnarius / Angular2OidcClient

A simple demonstration of using IdentityModel/oidc-client with angular 2

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Angular2OidcClient

This project was generated with angular-cli version 1.0.0-beta.11-webpack.2.

Setup

Clone the repo

git clone https://github.com/jmurphzyo/Angular2OidcClient.git

Go to the projects root dir.

cd Angular2OidcClient

Install required packages.

npm i

I added an extra folder to the project oidc-client-@types copy the contents of that folder, then navigate to node_modules/@types. Create a folder inside the @types folder named oidc-client and paste the copied contents inside.

typings are now included with the library. (side note if you're using vs code and have not updated to typescript 2.0, you need to change your workspace preferences to the following.... this will remove the errors generated by the IDE.) { "typescript.tsdk": "./node_modules/typescript/lib" }

Once these steps are complete make sure the settings inside src/app/shared/services/auth.service.ts#L165 are set to your IdentityServer settings.

Run ng b followed by ng s. Navigate to http://localhost:4200/.

I added a brief section at the bottom of the auth service to show how to make authenicatied request using the Angular 2 request pipe line.

You can also add the identity server settings inside the enviorment area so if you run a production build the urls would change over autoimatically.

Additonal Info

I also added a protected route to show how you can use this client to protect routes and redirect to unauthorized pages.

Side Notes

This project was created for demonstration purposes to show how to use the oidc-client that was created by the IdentityModel team. If you have any questions feel free to add it to the issues section. Also if there is something you would like to add to the repo submit a pull request and if it doesn't break anything I will accept it.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Further help

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.

About

A simple demonstration of using IdentityModel/oidc-client with angular 2

License:GNU General Public License v3.0


Languages

Language:TypeScript 79.1%Language:HTML 11.0%Language:JavaScript 9.0%Language:CSS 0.9%