Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a8b1d6c

Browse files
committed
Updated readme and made a single service to handle all the operations
1 parent 203fd74 commit a8b1d6c

File tree

4 files changed

+125
-110
lines changed

4 files changed

+125
-110
lines changed

‎README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
66
## Prerequisites
77

88
1. Node JS >= 10.x.x
9-
1. Auth0 client - Currently for I am using auth0.com as a OP Server. Demo should work with every OP Provider.
9+
2. @angular/cli >= 8.3.21
10+
3. Auth0 client - Currently for I am using auth0.com as a OP Server. Demo should work with every OP Provider.
1011

1112
## Configuration
1213

@@ -21,3 +22,8 @@ npm install
2122
```
2223

2324
2. 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.
25+
26+
# Usage
27+
28+
## Get the authorization url and redirect
29+

‎src/app/authenticaion.service.ts

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { Injectable } from '@angular/core';
2+
import {environment} from '../environments/environment';
3+
import {
4+
AuthorizationServiceConfigurationJson,
5+
AuthorizationServiceConfiguration,
6+
AuthorizationRequest,
7+
RedirectRequestHandler,
8+
FetchRequestor,
9+
LocalStorageBackend,
10+
DefaultCrypto,
11+
BaseTokenRequestHandler,
12+
AuthorizationNotifier,
13+
TokenRequest,
14+
GRANT_TYPE_AUTHORIZATION_CODE
15+
} from '@openid/appauth';
16+
import {NoHashQueryStringUtils} from './noHashQueryStringUtils';
17+
import {ActivatedRoute, Router} from '@angular/router';
18+
19+
20+
@Injectable({
21+
providedIn: 'root',
22+
})
23+
export class AuthenticationService {
24+
25+
configuration: AuthorizationServiceConfigurationJson = null;
26+
error: any = null;
27+
authorizationHandler: any = null;
28+
tokenHandler: any = null;
29+
notifier: any = null;
30+
request: any = null;
31+
response: any = null;
32+
code: string;
33+
34+
constructor(private route: ActivatedRoute, private router: Router) {
35+
this.authorizationHandler = new RedirectRequestHandler(
36+
new LocalStorageBackend(),
37+
new NoHashQueryStringUtils(),
38+
window.location,
39+
new DefaultCrypto()
40+
);
41+
42+
this.tokenHandler = new BaseTokenRequestHandler(new FetchRequestor());
43+
this.notifier = new AuthorizationNotifier();
44+
this.authorizationHandler.setAuthorizationNotifier(this.notifier);
45+
this.notifier.setAuthorizationListener((request, response, error) => {
46+
console.log('Authorization request complete ', request, response, error);
47+
if (response) {
48+
this.request = request;
49+
this.response = response;
50+
this.code = response.code;
51+
console.log(`Authorization Code ${response.code}`);
52+
53+
let extras = null;
54+
if (this.request && this.request.internal) {
55+
extras = {};
56+
extras.code_verifier = this.request.internal.code_verifier;
57+
}
58+
59+
const tokenRequest = new TokenRequest({
60+
client_id: environment.clientId,
61+
redirect_uri: environment.redirectURL,
62+
grant_type: GRANT_TYPE_AUTHORIZATION_CODE,
63+
code: this.code,
64+
refresh_token: undefined,
65+
extras
66+
});
67+
68+
AuthorizationServiceConfiguration.fetchFromIssuer(environment.OPServer, new FetchRequestor())
69+
.then((oResponse: any) => {
70+
this.configuration = oResponse;
71+
return this.tokenHandler.performTokenRequest(this.configuration, tokenRequest);
72+
})
73+
.then((oResponse) => {
74+
localStorage.setItem('access_token', oResponse.accessToken);
75+
this.router.navigate(['/profile']);
76+
})
77+
.catch(oError => {
78+
this.error = oError;
79+
});
80+
}
81+
});
82+
}
83+
84+
redirect() {
85+
AuthorizationServiceConfiguration.fetchFromIssuer(environment.OPServer, new FetchRequestor())
86+
.then((response: any) => {
87+
this.configuration = response;
88+
const authRequest = new AuthorizationRequest({
89+
client_id: environment.clientId,
90+
redirect_uri: environment.redirectURL,
91+
scope: environment.scope,
92+
response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
93+
state: undefined,
94+
// extras: environment.extra
95+
});
96+
this.authorizationHandler.performAuthorizationRequest(this.configuration, authRequest);
97+
})
98+
.catch(error => {
99+
this.error = error;
100+
});
101+
}
102+
103+
handleCode() {
104+
this.code = this.route.snapshot.queryParams.code;
105+
106+
if (!this.code) {
107+
this.error = 'Unable to get authorization code';
108+
return;
109+
}
110+
this.authorizationHandler.completeAuthorizationRequestIfPossible();
111+
}
112+
}

‎src/app/callback/callback.component.ts

Lines changed: 3 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,18 @@
11
import {Component, OnInit} from '@angular/core';
2-
import {
3-
TokenRequest,
4-
BaseTokenRequestHandler,
5-
GRANT_TYPE_AUTHORIZATION_CODE,
6-
AuthorizationServiceConfiguration,
7-
AuthorizationServiceConfigurationJson,
8-
RedirectRequestHandler,
9-
AuthorizationNotifier,
10-
FetchRequestor, LocalStorageBackend, DefaultCrypto
11-
} from '@openid/appauth';
12-
import {environment} from '../../environments/environment';
13-
import {NoHashQueryStringUtils} from '../noHashQueryStringUtils';
14-
import {ActivatedRoute, Router} from '@angular/router';
2+
import {AuthenticationService} from '../authenticaion.service';
153

164
@Component({
175
selector: 'app-callback',
186
templateUrl: './callback.component.html',
197
styleUrls: ['./callback.component.css']
208
})
219
export class CallbackComponent implements OnInit {
22-
code: string;
23-
tokenHandler: any = null;
24-
configuration: AuthorizationServiceConfigurationJson;
25-
error: any = null;
26-
notifier: any = null;
27-
request: any = null;
28-
response: any = null;
29-
authorizationHandler: any = null;
3010

31-
constructor(private route: ActivatedRoute, private router: Router) {
32-
this.tokenHandler = new BaseTokenRequestHandler(new FetchRequestor());
33-
this.authorizationHandler = new RedirectRequestHandler(
34-
new LocalStorageBackend(),
35-
new NoHashQueryStringUtils(),
36-
window.location,
37-
new DefaultCrypto()
38-
);
39-
this.notifier = new AuthorizationNotifier();
40-
this.authorizationHandler.setAuthorizationNotifier(this.notifier);
41-
this.notifier.setAuthorizationListener((request, response, error) => {
42-
console.log('Authorization request complete ', request, response, error);
43-
if (response) {
44-
this.request = request;
45-
this.response = response;
46-
this.code = response.code;
47-
console.log(`Authorization Code ${response.code}`);
11+
constructor(private authenticationService: AuthenticationService) {
4812

49-
let extras = null;
50-
if (this.request && this.request.internal) {
51-
extras = {};
52-
extras.code_verifier = this.request.internal.code_verifier;
53-
}
54-
55-
const tokenRequest = new TokenRequest({
56-
client_id: environment.clientId,
57-
redirect_uri: environment.redirectURL,
58-
grant_type: GRANT_TYPE_AUTHORIZATION_CODE,
59-
code: this.code,
60-
refresh_token: undefined,
61-
extras
62-
});
63-
64-
AuthorizationServiceConfiguration.fetchFromIssuer(environment.OPServer, new FetchRequestor())
65-
.then((oResponse: any) => {
66-
this.configuration = oResponse;
67-
return this.tokenHandler.performTokenRequest(this.configuration, tokenRequest);
68-
})
69-
.then((oResponse) => {
70-
localStorage.setItem('access_token', oResponse.accessToken);
71-
this.router.navigate(['/profile']);
72-
})
73-
.catch(oError => {
74-
this.error = oError;
75-
});
76-
}
77-
});
7813
}
7914

8015
ngOnInit() {
81-
this.code = this.route.snapshot.queryParams.code;
82-
83-
if (!this.code) {
84-
this.error = 'Unable to get authorization code';
85-
return;
86-
}
87-
this.authorizationHandler.completeAuthorizationRequestIfPossible();
16+
this.authenticationService.handleCode();
8817
}
8918
}

‎src/app/home/home.component.ts

Lines changed: 3 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2-
import {environment} from '../../environments/environment';
3-
import {
4-
AuthorizationServiceConfigurationJson,
5-
AuthorizationServiceConfiguration,
6-
AuthorizationRequest, RedirectRequestHandler,
7-
FetchRequestor, LocalStorageBackend, DefaultCrypto
8-
} from '@openid/appauth';
9-
import {NoHashQueryStringUtils} from '../noHashQueryStringUtils';
2+
import {AuthenticationService} from '../authenticaion.service';
103

114
@Component({
125
selector: 'app-home',
@@ -15,37 +8,12 @@ import {NoHashQueryStringUtils} from '../noHashQueryStringUtils';
158
})
169
export class HomeComponent implements OnInit {
1710

18-
configuration: AuthorizationServiceConfigurationJson = null;
19-
error: any = null;
20-
authorizationHandler: any = null;
21-
22-
constructor() {
23-
this.authorizationHandler = new RedirectRequestHandler(
24-
new LocalStorageBackend(),
25-
new NoHashQueryStringUtils(),
26-
window.location,
27-
new DefaultCrypto()
28-
);
11+
constructor(private authenticationService: AuthenticationService) {
2912
}
3013

3114
ngOnInit() {}
3215

3316
redirect() {
34-
AuthorizationServiceConfiguration.fetchFromIssuer(environment.OPServer, new FetchRequestor())
35-
.then((response: any) => {
36-
this.configuration = response;
37-
const authRequest = new AuthorizationRequest({
38-
client_id: environment.clientId,
39-
redirect_uri: environment.redirectURL,
40-
scope: environment.scope,
41-
response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
42-
state: undefined,
43-
// extras: environment.extra
44-
});
45-
this.authorizationHandler.performAuthorizationRequest(this.configuration, authRequest);
46-
})
47-
.catch(error => {
48-
this.error = error;
49-
});
17+
this.authenticationService.redirect();
5018
}
5119
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /