Skip to content

Angular 9 upgrade #718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 7 additions & 20 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,13 @@

## Lates features

See [Release Notes](https://github.com/manfredsteyer/angular-oauth2-oidc/releases)
See [Release Notes](https://github.com/manfredsteyer/angular-oauth2-oidc/releases) for details on each release.

## New Features in Version 2.1
- New Config API (the original one is still supported)
- New convenience methods in OAuthService to streamline default tasks:
- ``setupAutomaticSilentRefresh()``
- ``loadDiscoveryDocumentAndTryLogin()``
- Single Sign out through Session Status Change Notification according to the OpenID Connect Session Management specs. This means, you can be notified when the user logs out using at the login provider.
- Possibility to define the ValidationHandler, the Config as well as the OAuthStorage via DI
- Better structured documentation
## Older versions

## New Features in Version 2
- Token Refresh for Implicit Flow by implementing "silent refresh"
- Validating the signature of the received id_token
- Providing Events via the observable ``events``.
- The event ``token_expires`` can be used together with a silent refresh to automatically refresh a token when/ before it expires (see also property ``timeoutFactor``).
Since Angular 5, versions of this library matched up with the Angular version.
So versions 5.x were released while Angular 5 was out, the 6.x versions during Angular 6, etc.
If you need to support a specific old version of Angular, you can consider using a version of the library that lines up.

## Breaking Changes in Version 2
- The property ``oidc`` defaults to ``true``.
- If you are just using oauth2, you have to set ``oidc`` to ``false``. Otherwise, the validation of the user profile will fail!
- By default, ``sessionStorage`` is used. To use ``localStorage`` call method setStorage
- Demands using https as OIDC and OAuth2 relay on it. This rule can be relaxed using the property ``requireHttps``, e. g. for local testing.
- Demands that every url provided by the discovery document starts with the issuer's url. This can be relaxed by using the property ``strictDiscoveryDocumentValidation``.
For older release notes check the repository version history, or above-linked release notes.
For even older versions, check out [the old change log](https://github.com/manfredsteyer/angular-oauth2-oidc/blob/5d676101c6118d6fa01bfa05b17fb4a58490eaf7/CHANGELOG.md).
65 changes: 31 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,23 @@ Support for OAuth 2 and OpenId Connect (OIDC) in Angular.
## Credits

- [generator-angular2-library](https://github.com/jvandemo/generator-angular2-library) for scaffolding an Angular library
- [jsrasign](https://kjur.github.io/jsrsasign/) until version 5: For validating token signature and for hashing; beginning with version 6, we are using browser APIs to minimize our bundle size
- [Identity Server](https://github.com/identityserver) (used for testing with an .NET/.NET Core Backend)
- [jsrasign](https://kjur.github.io/jsrsasign/) for validating token signature and for hashing
- [Identity Server](https://github.com/identityserver) for testing with an .NET/.NET Core Backend
- [Keycloak (Redhat)](http://www.keycloak.org/) for testing with Java

## Resources

- Sources and Sample:
https://github.com/manfredsteyer/angular-oauth2-oidc

- Source Code Documentation
https://manfredsteyer.github.io/angular-oauth2-oidc/docs
- Sources and Sample: [https://github.com/manfredsteyer/angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)
- Source Code Documentation: [https://manfredsteyer.github.io/angular-oauth2-oidc/docs](https://manfredsteyer.github.io/angular-oauth2-oidc/docs)
- Community-provided sample implementation: [https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/)

## Tested Environment

Successfully tested with **Angular 7** and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack. At server side we've used IdentityServer (.NET/ .NET Core) and Redhat's Keycloak (Java).
Successfully tested with **Angular 9** and its Router, PathLocationStrategy as well as HashLocationStrategy and CommonJS-Bundling via webpack. At server side we've used IdentityServer (.NET / .NET Core) and Redhat's Keycloak (Java).

**Angular 8**: Use 8.x versions of this library.

**Angular 7**: Use 7.x versions of this library.

**Angular 6**: Use Version 4.x of this library. Version 4.x was tested with Angular 6. You can also try the newer version 5.x of this library which has a much smaller bundle size.

Expand All @@ -30,21 +32,23 @@ Successfully tested with **Angular 7** and its Router, PathLocationStrategy as w
## Release Cycle

- We plan one major release for each Angular version
- Will contain new features
- Will contain bug fixes and PRs
- Will contain new features
- Will contain bug fixes and PRs
- Critical Bugfixes on demand

## Contributions

- Feel free to file pull requests
- The closed issues contain some ideas for PRs and enhancements (see labels)
- If you want to contribute to the docs, you can do so in the `docs-src` folder. Make sure you update `summary.json` as well. Then generate the docs with the following commands:

```
``` sh
npm install -g @compodoc/compodoc
npm run docs
```

# Features
## Features

- Logging in via Implicit Flow (where a user is redirected to Identity Provider)
- Logging in via Code Flow + PKCE
- "Logging in" via Password Flow (where a user enters their password into the client)
Expand All @@ -58,22 +62,24 @@ Successfully tested with **Angular 7** and its Router, PathLocationStrategy as w

## Sample-Auth-Server

You can use the OIDC-Sample-Server mentioned in the samples for Testing. It assumes, that your Web-App runs on http://localhost:8080.
You can use the OIDC-Sample-Server mentioned in the samples for Testing. It assumes, that your Web-App runs on http://localhost:8080

Username/Password: max/geheim

*clientIds:*
*clientIds:*

- spa-demo (implicit flow)
- demo-resource-owner (resource owner password flow)

*redirectUris:*

- localhost:[8080-8089|4200-4202]
- localhost:[8080-8089|4200-4202]/index.html
- localhost:[8080-8089|4200-4202]/silent-refresh.html

## Installing

```
```sh
npm i angular-oauth2-oidc --save
```

Expand All @@ -85,7 +91,7 @@ import { OAuthModule } from 'angular-oauth2-oidc';
// etc.

@NgModule({
imports: [
imports: [
// etc.
HttpClientModule,
OAuthModule.forRoot()
Expand All @@ -96,12 +102,12 @@ import { OAuthModule } from 'angular-oauth2-oidc';
// etc.
],
bootstrap: [
AppComponent
AppComponent
]
})
export class AppModule {
}
```
```

## Configuring for Implicit Flow

Expand All @@ -116,7 +122,6 @@ Hence, the original API is still supported.
import { AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {

// Url of the Identity Provider
issuer: 'https://steyer-identity-server.azurewebsites.net/identity',

Expand Down Expand Up @@ -215,11 +220,10 @@ The following snippet contains the template for the login page:

### Skipping the Login Form

If you don't want to display a login form that tells the user that they are redirected to the identity server, you can use the convenience function ``this.oauthService.loadDiscoveryDocumentAndLogin();`` instead of ``this.oauthService.loadDiscoveryDocumentAndTryLogin();`` when setting up the library.
If you don't want to display a login form that tells the user that they are redirected to the identity server, you can use the convenience function ``this.oauthService.loadDiscoveryDocumentAndLogin();`` instead of ``this.oauthService.loadDiscoveryDocumentAndTryLogin();`` when setting up the library.

This directly redirects the user to the identity server if there are no valid tokens.


### Calling a Web API with an Access Token

You can automate this task by switching ``sendAccessToken`` on and by setting ``allowedUrls`` to an array with prefixes for the respective URLs. Use lower case for the prefixes.
Expand Down Expand Up @@ -253,16 +257,9 @@ See the [documentation](https://manfredsteyer.github.io/angular-oauth2-oidc/docs

## Tutorials

* [Tutorial with Demo Servers available online](https://www.softwarearchitekt.at/post/2016/07/03/authentication-in-angular-2-with-oauth2-oidc-and-guards-for-the-newest-new-router-english-version.aspx)
* [Angular Authentication with OpenID Connect and Okta in 20 Minutes](https://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc)
* [Add Authentication to Your Angular PWA](https://developer.okta.com/blog/2017/06/13/add-authentication-angular-pwa)
* [Build an Ionic App with User Authentication](https://developer.okta.com/blog/2017/08/22/build-an-ionic-app-with-user-authentication)
* [On-Site Workshops](https://www.softwarearchitekt.at)








- [Tutorial with Demo Servers available online](https://www.softwarearchitekt.at/post/2016/07/03/authentication-in-angular-2-with-oauth2-oidc-and-guards-for-the-newest-new-router-english-version.aspx)
- [Angular Authentication with OpenID Connect and Okta in 20 Minutes](https://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc)
- [Add Authentication to Your Angular PWA](https://developer.okta.com/blog/2017/06/13/add-authentication-angular-pwa)
- [Build an Ionic App with User Authentication](https://developer.okta.com/blog/2017/08/22/build-an-ionic-app-with-user-authentication)
- [On-Site Workshops](https://www.softwarearchitekt.at)
- [Angular 6 with Auth0 using this library](https://github.com/jeroenheijmans/sample-auth0-angular-oauth2-oidc)
13 changes: 12 additions & 1 deletion angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
},
"configurations": {
"production": {
"project": "projects/lib/ng-package.prod.json"
"project": "projects/lib/ng-package.prod.json",
"tsConfig": "projects/lib/tsconfig.lib.prod.json"
}
}
},
Expand Down Expand Up @@ -45,6 +46,7 @@
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist/sample",
"index": "projects/sample/src/index.html",
"main": "projects/sample/src/main.ts",
Expand All @@ -63,6 +65,12 @@
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "projects/sample/src/environments/environment.ts",
Expand Down Expand Up @@ -157,5 +165,8 @@
"@schematics/angular:component": {
"styleext": "css"
}
},
"cli": {
"analytics": false
}
}
Loading