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 40e1386

Browse files
committed
Handle the code flow and display user info
1 parent b06fb2c commit 40e1386

File tree

8 files changed

+194
-0
lines changed

8 files changed

+194
-0
lines changed

‎src/app/callback/callback.component.css

Whitespace-only changes.
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="container-fluid" style="margin-top: 10px;">
2+
<div class="card">
3+
<div class="card-body bg-danger" *ngIf="!code">
4+
<div class="card-body">
5+
<p class="card-text">{{error}}</p>
6+
</div>
7+
</div>
8+
<div class="card-body" *ngIf="code">
9+
<h5 class="card-title">Loading...</h5>
10+
</div>
11+
</div>
12+
</div>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { CallbackComponent } from './callback.component';
4+
5+
describe('CallbackComponent', () => {
6+
let component: CallbackComponent;
7+
let fixture: ComponentFixture<CallbackComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ CallbackComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(CallbackComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
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';
15+
16+
@Component({
17+
selector: 'app-callback',
18+
templateUrl: './callback.component.html',
19+
styleUrls: ['./callback.component.css']
20+
})
21+
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;
30+
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}`);
48+
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+
});
78+
}
79+
80+
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();
88+
}
89+
}

‎src/app/profile/profile.component.css

Whitespace-only changes.

‎src/app/profile/profile.component.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="container mt-3">
2+
<div class="card text-white bg-success mb-3" *ngIf="accessToken">
3+
<div class="card-body">
4+
<p class="card-text">Access Token: {{accessToken}}</p>
5+
<h5 class="card-title">User info</h5>
6+
<pre class="card-text">{{userInfo | json}}</pre>
7+
</div>
8+
</div>
9+
10+
<div class="card text-white bg-danger mb-3" *ngIf="!accessToken">
11+
<div class="card-body">
12+
<h5 class="card-title">You are un authenticate!</h5>
13+
</div>
14+
</div>
15+
</div>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ProfileComponent } from './profile.component';
4+
5+
describe('ProfileComponent', () => {
6+
let component: ProfileComponent;
7+
let fixture: ComponentFixture<ProfileComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ProfileComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ProfileComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/profile/profile.component.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import {environment} from '../../environments/environment';
3+
import {HttpClient} from '@angular/common/http';
4+
5+
@Component({
6+
selector: 'app-profile',
7+
templateUrl: './profile.component.html',
8+
styleUrls: ['./profile.component.css']
9+
})
10+
export class ProfileComponent implements OnInit {
11+
accessToken: string = null;
12+
userInfo: any = null;
13+
error: any = null;
14+
15+
constructor(private http: HttpClient) { }
16+
17+
ngOnInit() {
18+
this.accessToken = localStorage.getItem('access_token') || null;
19+
if (!this.accessToken) {
20+
return;
21+
}
22+
23+
this.http.get(environment.OPServer + environment.userInfoEndpoint, {headers: {authorization: 'Bearer ' + this.accessToken}})
24+
.subscribe((response) => {
25+
this.userInfo = response;
26+
});
27+
}
28+
}

0 commit comments

Comments
(0)

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