forked from manfredsteyer/angular-oauth2-oidc
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
305 lines (256 loc) · 14.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-oauth2-oidc</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="./" class="navbar-brand">angular-oauth2-oidc</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content getting-started">
<div class="content-data">
<h1 id="angular-oauth2-oidc">angular-oauth2-oidc</h1>
<p>Support for OAuth 2 and OpenId Connect (OIDC) in Angular.</p>
<p><img src="https://raw.githubusercontent.com/manfredsteyer/angular-oauth2-oidc/master/oidc.png" alt="OIDC Certified Logo" class="img-responsive"></p>
<h2 id="credits">Credits</h2>
<ul>
<li><a href="https://github.com/jvandemo/generator-angular2-library">generator-angular2-library</a> for scaffolding an Angular library</li>
<li><a href="https://kjur.github.io/jsrsasign/">jsrasign</a> until version 5: For validating token signature and for hashing; beginning with version 6, we are using browser APIs to minimize our bundle size</li>
<li><a href="https://github.com/identityserver">Identity Server</a> (used for testing with an .NET/.NET Core Backend)</li>
<li><a href="http://www.keycloak.org/">Keycloak (Redhat)</a> for testing with Java</li>
</ul>
<h2 id="resources">Resources</h2>
<ul>
<li><p>Sources and Sample:
<a href="https://github.com/manfredsteyer/angular-oauth2-oidc">https://github.com/manfredsteyer/angular-oauth2-oidc</a></p>
</li>
<li><p>Source Code Documentation
<a href="https://manfredsteyer.github.io/angular-oauth2-oidc/docs">https://manfredsteyer.github.io/angular-oauth2-oidc/docs</a></p>
</li>
</ul>
<h2 id="tested-environment">Tested Environment</h2>
<p>Successfully tested with <strong>Angular 7</strong> 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).</p>
<p><strong>Angular 6</strong>: 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.</p>
<p><strong>Angular 5.x or 4.3</strong>: If you need support for Angular < 6 (4.3 to 5.x) you can download the former version 3.1.4 (npm i angular-oauth2-oidc@^3 --save).</p>
<h2 id="release-cycle">Release Cycle</h2>
<ul>
<li>We plan one major release for each Angular version<ul>
<li>Will contain new features</li>
<li>Will contain bug fixes and PRs</li>
</ul>
</li>
<li>Critical Bugfixes on demand</li>
</ul>
<h2 id="contributions">Contributions</h2>
<ul>
<li><p>Feel free to file pull requests</p>
</li>
<li><p>The closed issues contain some ideas for PRs and enhancements (see labels)</p>
</li>
<li><p>If you want to contribute to the docs, you can do so in the <code>docs-src</code> folder. Make sure you update <code>summary.json</code> as well. Then generate the docs with the following commands:</p>
<div><pre class="line-numbers"><code class="language-none">npm install -g @compodoc/compodoc
npm run docs</code></pre></div></li>
</ul>
<h1 id="features">Features</h1>
<ul>
<li>Logging in via Implicit Flow (where a user is redirected to Identity Provider)</li>
<li>Logging in via Code Flow + PKCE</li>
<li>"Logging in" via Password Flow (where a user enters their password into the client)</li>
<li>Token Refresh for all supported flows</li>
<li>Automatically refreshing a token when/some time before it expires</li>
<li>Querying Userinfo Endpoint</li>
<li>Querying Discovery Document to ease configuration</li>
<li>Validating claims of the id_token regarding the specs</li>
<li>Hook for further custom validations</li>
<li>Single-Sign-Out by redirecting to the auth-server's logout-endpoint</li>
</ul>
<h2 id="sample-auth-server">Sample-Auth-Server</h2>
<p>You can use the OIDC-Sample-Server mentioned in the samples for Testing. It assumes, that your Web-App runs on <a href="http://localhost:8080">http://localhost:8080</a>.</p>
<p>Username/Password: max/geheim</p>
<p><em>clientIds:</em> </p>
<ul>
<li>spa-demo (implicit flow)</li>
<li>demo-resource-owner (resource owner password flow)</li>
</ul>
<p><em>redirectUris:</em></p>
<ul>
<li>localhost:[8080-8089|4200-4202]</li>
<li>localhost:[8080-8089|4200-4202]/index.html</li>
<li>localhost:[8080-8089|4200-4202]/silent-refresh.html</li>
</ul>
<h2 id="installing">Installing</h2>
<div><pre class="line-numbers"><code class="language-none">npm i angular-oauth2-oidc --save</code></pre></div><h2 id="importing-the-ngmodule">Importing the NgModule</h2>
<div><pre class="line-numbers"><code class="language-TypeScript">import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';
// etc.
@NgModule({
imports: [
// etc.
HttpClientModule,
OAuthModule.forRoot()
],
declarations: [
AppComponent,
HomeComponent,
// etc.
],
bootstrap: [
AppComponent
]
})
export class AppModule {
}</code></pre></div><h2 id="configuring-for-implicit-flow">Configuring for Implicit Flow</h2>
<p>This section shows how to implement login leveraging implicit flow. This is the OAuth2/OIDC flow best suitable for
Single Page Application. It sends the user to the Identity Provider's login page. After logging in, the SPA gets tokens.
This also allows for single sign on as well as single sign off.</p>
<p>To configure the library, the following sample uses the new configuration API introduced with Version 2.1.
Hence, the original API is still supported.</p>
<div><pre class="line-numbers"><code class="language-TypeScript">import { AuthConfig } from 'angular-oauth2-oidc';
export const authConfig: AuthConfig = {
// Url of the Identity Provider
issuer: 'https://steyer-identity-server.azurewebsites.net/identity',
// URL of the SPA to redirect the user to after login
redirectUri: window.location.origin + '/index.html',
// The SPA's id. The SPA is registered with this id at the auth-server
clientId: 'spa-demo',
// set the scope for the permissions the client should request
// The first three are defined by OIDC. The 4th is a usecase-specific one
scope: 'openid profile email voucher',
}</code></pre></div><p>Configure the <code>OAuthService</code> with this config object when the application starts up:</p>
<div><pre class="line-numbers"><code class="language-TypeScript">import { OAuthService } from 'angular-oauth2-oidc';
import { JwksValidationHandler } from 'angular-oauth2-oidc';
import { authConfig } from './auth.config';
import { Component } from '@angular/core';
@Component({
selector: 'flight-app',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private oauthService: OAuthService) {
this.configure();
}
private configure() {
this.oauthService.configure(authConfig);
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.loadDiscoveryDocumentAndTryLogin();
}
}</code></pre></div><h3 id="implementing-a-login-form">Implementing a Login Form</h3>
<p>After you've configured the library, you just have to call <code>initImplicitFlow</code> to login using OAuth2/ OIDC.</p>
<div><pre class="line-numbers"><code class="language-TypeScript">import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
@Component({
templateUrl: "app/home.html"
})
export class HomeComponent {
constructor(private oauthService: OAuthService) {
}
public login() {
this.oauthService.initLoginFlow();
}
public logoff() {
this.oauthService.logOut();
}
public get name() {
let claims = this.oauthService.getIdentityClaims();
if (!claims) return null;
return claims.given_name;
}
}</code></pre></div><p>The following snippet contains the template for the login page:</p>
<div><pre class="line-numbers"><code class="language-HTML"><h1 *ngIf="!name">
Hallo
</h1>
<h1 *ngIf="name">
Hallo, {{name}}
</h1>
<button class="btn btn-default" (click)="login()">
Login
</button>
<button class="btn btn-default" (click)="logoff()">
Logout
</button>
<div>
Username/Passwort zum Testen: max/geheim
</div></code></pre></div><h3 id="skipping-the-login-form">Skipping the Login Form</h3>
<p>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 <code>this.oauthService.loadDiscoveryDocumentAndLogin();</code> instead of <code>this.oauthService.loadDiscoveryDocumentAndTryLogin();</code> when setting up the library. </p>
<p>This directly redirects the user to the identity server if there are no valid tokens. </p>
<h3 id="calling-a-web-api-with-an-access-token">Calling a Web API with an Access Token</h3>
<p>You can automate this task by switching <code>sendAccessToken</code> on and by setting <code>allowedUrls</code> to an array with prefixes for the respective URLs. Use lower case for the prefixes.</p>
<div><pre class="line-numbers"><code class="language-TypeScript">OAuthModule.forRoot({
resourceServer: {
allowedUrls: ['http://www.angular.at/api'],
sendAccessToken: true
}
})</code></pre></div><p>If you need more versatility, you can look in the <a href="https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/working-with-httpinterceptors.html">documentation</a> how to setup a custom interceptor.</p>
<h2 id="code-flow--pkce">Code Flow + PKCE</h2>
<p>See docs: <a href="https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/code-flow-+-pcke.html">https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/code-flow-+-pcke.html</a></p>
<h2 id="token-refresh">Token Refresh</h2>
<p>See docs: <a href="https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/refreshing-a-token.html">https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/refreshing-a-token.html</a></p>
<h2 id="routing">Routing</h2>
<p>If you use the <code>PathLocationStrategy</code> (which is on by default) and have a general catch-all-route (<code>path: '**'</code>) you should be fine. Otherwise look up the section <code>Routing with the HashStrategy</code> in the <a href="https://manfredsteyer.github.io/angular-oauth2-oidc/docs/">documentation</a>.</p>
<h2 id="more-documentation-">More Documentation (!)</h2>
<p>See the <a href="https://manfredsteyer.github.io/angular-oauth2-oidc/docs/">documentation</a> for more information about this library.</p>
<h2 id="tutorials">Tutorials</h2>
<ul>
<li><a href="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">Tutorial with Demo Servers available online</a></li>
<li><a href="https://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc">Angular Authentication with OpenID Connect and Okta in 20 Minutes</a></li>
<li><a href="https://developer.okta.com/blog/2017/06/13/add-authentication-angular-pwa">Add Authentication to Your Angular PWA</a></li>
<li><a href="https://developer.okta.com/blog/2017/08/22/build-an-ionic-app-with-user-authentication">Build an Ionic App with User Authentication</a></li>
<li><a href="https://www.softwarearchitekt.at">On-Site Workshops</a></li>
</ul>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 0;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'getting-started';
var COMPODOC_CURRENT_PAGE_URL = 'index.html';
</script>
<script src="./js/libs/custom-elements.min.js"></script>
<script src="./js/libs/lit-html.js"></script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script src="./js/libs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
<script src="./js/menu-wc.js" defer></script>
<script src="./js/libs/bootstrap-native.js"></script>
<script src="./js/libs/es6-shim.min.js"></script>
<script src="./js/libs/EventDispatcher.js"></script>
<script src="./js/libs/promise.min.js"></script>
<script src="./js/libs/zepto.min.js"></script>
<script src="./js/compodoc.js"></script>
<script src="./js/tabs.js"></script>
<script src="./js/menu.js"></script>
<script src="./js/libs/clipboard.min.js"></script>
<script src="./js/libs/prism.js"></script>
<script src="./js/sourceCode.js"></script>
<script src="./js/search/search.js"></script>
<script src="./js/search/lunr.min.js"></script>
<script src="./js/search/search-lunr.js"></script>
<script src="./js/search/search_index.js"></script>
<script src="./js/lazy-load-graphs.js"></script>
</body>
</html>