# angular-oidc-lib

> Angular OIDC library

Latest version **1.0.3** (published 2017-07-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install angular-oidc-lib
pnpm add angular-oidc-lib
yarn add angular-oidc-lib
bun add angular-oidc-lib
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-07-13 |
| First published | 2017-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 6.9.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | iurie_m |

## Links

- npm: https://www.npmjs.com/package/angular-oidc-lib
- Repository: https://iurie.marchitan@stash.collinsoncloud.com/stash/scm/cidp/cidp-angular-npm-sdk
- Homepage: https://stash.collinsoncloud.com/stash/projects/CIDP/repos/cidp-angular-npm-sdk/browse
- npm.io page: https://npm.io/package/angular-oidc-lib

## Dependencies (1)

- [oidc-client](https://npm.io/package/oidc-client.md) ^1.3.0

## Recent versions

- 1.0.3 (latest) — 2017-07-13
- 1.0.2 — 2017-07-11
- 1.0.1 — 2017-07-11

## README

# OIDC Angular SDK
A library for application built on angular 2 and above. Is used to integrate with identity server for authentication and authorization.

Features:

- anuglar library
- unit tests for the library
- a demo application that consumes the library in JIT mode and runs in watch mode
- an integration app that consumes the library in JIT and AOT mode and runs e2e tests

Common tasks are present as npm scripts:

- `npm start` to run a live-reload server with the demo app
- `npm run test` to test in watch mode, or `npm run test:once` to only run once
- `npm run build` to build the library
- `npm run lint` to lint 
- `npm run clean` to clean
- `npm run integration` to run the integration e2e tests
- `npm install ./relative/path/to/lib` after `npm run build` to test locally in another app

If you need to debug the integration app, please check `./integration/README.md`.
Before running integration test, need to make sure CIDP server is running and contains client oidc settings (clientId, scope, etc).


## What's in the OIDC Angular SDK?

The **OIDC Angular SDK** contains a similar structure to the [Quickstart lib](https://github.com/filipesilva/angular-quickstart-lib).

Consequently, there are _many different files_ in the project.
Focus on the following TypeScript (`.ts`) files in the **`/src`** folder.

```
src/
├── demo/
|  └── app/
|     ├── app.component.ts
|     └── app.module.ts
└── lib/
   ├── index.ts
   └── src/
      ├── component/
      |  └── lib.component.ts
      |  └── lib.service.ts
      |  └── module.ts

```

Files outside `src/` concern building, deploying, and testing app.
They include configuration files and external dependencies.

Files inside `src/lib/` "belong" to  library, while `src/demo/` contains a demo application
that loads your library.

Libraries do not run by themselves, so it's very useful to have this "demo" app while developing 
to see how your library would look like to consumers.

When you run `npm start`, the demo application is served.

## The build step

You can build the library by running `npm run build`. 
This will generate a `dist/` directory with all the entry points described above.

All the logic for creating the build can be found in `./build.js`. It consists of roughly 5 steps:

- Compile with the AOT Compiler (AOT compiler or `ngc`) for ES5 and ES2015.
- Inline html and css inside the generated JavaScript files.
- Copy typings, metatada, html and css.
- Create each bundle using Rollup.
- Copy `LICENSE`, `package.json` and `README.md` files


## Testing 

The **OIDC Angular SDK** includes a directory called `integration` containing a standalone
app that consumes your built library in both AOT and JIT modes, with end-to-end tests to verify
it works.

To run the integration tests, do `npm run integration:jit` and `npm run integration:aot` which does the following:

- Build your library.
- Enter the integration app's directory.
- Install dependencies.
- Build the app in AOT mode.
- Test the app in AOT mode.
- Test the app in JIT mode.

Running integration tests gives you greater confidence that your library is properly built.

In addition to integration tests, you can also run unit tests in watch mode via `npm run test`,
or single-run via `npm run test:once`.

## Appendix: Supporting AOT

AOT plays an important role in optimizing Angular applications. 
It's therefore important that third party libraries be published in a format compatible with AOT
compilation.
Otherwise it will not be possible to include the library in an AOT compiled application.

## Appendix: Supporting JIT

AOT compiled code is the preferred format for production builds, but due to the long compilation
time it may not be practical to use AOT during development.

## Using in the angular application

Import the module and services in your module. Set the ClientOidcSettings properties to match the server configuration. Also configure logging.
Available log levels:

- NONE
- ERROR
- WARN
- INFO
- DEBUG
  
```typescript
import { NgModule } from '@angular/core';

import { OidcModule, ClientOidcSettings, OidcService, Log } from 'angular-oidc-lib';

@NgModule({
    imports: [
        ...
        OidcModule
    ],
    ...
})

export class AppModule {
  constructor(private oidcService: OidcService) {
    Log.level = Log.DEBUG;
    let oidcSettings = new ClientOidcSettings(
      'http://localhost:5200', // authority url
      'spa_client', // client id
      'id_token token', // response type
      'openid profile', // scope
      'profile', //post login redirect  route name
      'home' // post logout redirect route name,
      'unauthorized' // route name in case of any CIDP error. Error message is attached to errMsg query string. The route should be       registerd as unauthorized/:errMsg
    );
    oidcService.Init(oidcSettings);
  }

```

Create the login, logout component and use the oidcService

```typescript
  import { Subscription } from 'rxjs/Subscription';
  import { OidcService, OidcUser,ClientOidcSettings } from 'angular-oidc-lib';
  subscription: Subscription;
  user:OidcUser;
  constructor(public oidcService: OidcService) {    }

  ngOnInit() {
        ngOnInit() {
        this.user = this.oidcService.user;
        this.subscription = this.oidcService.onUserDataLoaded.subscribe((user: OidcUser) => {
          this.user = user;
        });
      }
  }

  signIn() {
    this.oidcService.signin();
  }

  signOut() {
    this.oidcService.signout();
  }

```

In the http services, add the token to the header using the oidcService.user.
OidcService.user provides details about identity and access tokens.

```typescript
private setHeaders() {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.headers.append('Accept', 'application/json');

        let token = this.oidcService.user.accessToken;
        if (token !== '') {
            let tokenValue = 'Bearer ' + token;
            this.headers.append('Authorization', tokenValue);
        }
    }

```

---
_Source: https://npm.io/package/angular-oidc-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._