{{ "send-jwt1.introduction" | transloco }}
-
+
{{ "send-jwt1.authenticated" | transloco | uppercase }}
@@ -12,14 +12,15 @@
{{ "send-jwt1.authenticated" | transloco | uppercase }}
{{ "send-jwt1.introduction" | transloco }}
{{ "send-jwt1.request" | transloco }}
{{ "send-jwt1.request2" | transloco}}
-
-
+
+
{{ "send-jwt1.queryParameter" | transloco}}
diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.scss b/frontend/src/app/send-jwt1/send-jwt1.component.scss
index c7e5b70..10691f6 100644
--- a/frontend/src/app/send-jwt1/send-jwt1.component.scss
+++ b/frontend/src/app/send-jwt1/send-jwt1.component.scss
@@ -40,12 +40,13 @@
display: flex;
align-items: center;
- a {
+ button {
font-size: 13px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
- letter-spacing: 0.13px;
+ border: none;
+ background: transparent;
color: #2a2f44;
text-decoration: none;
}
diff --git a/frontend/src/app/send-jwt1/send-jwt1.component.ts b/frontend/src/app/send-jwt1/send-jwt1.component.ts
index 76cc178..20702d1 100644
--- a/frontend/src/app/send-jwt1/send-jwt1.component.ts
+++ b/frontend/src/app/send-jwt1/send-jwt1.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
+import { DemoService } from '../shared/services/demo.service';
import { StepService } from '../shared/services/step.service';
@Component({
@@ -11,13 +12,24 @@ export class SendJwt1Component implements OnInit {
constructor(
private router: Router,
+ private demoService: DemoService,
private stepService: StepService
) {
this.stepService.setStep(7)
}
-
ngOnInit(): void {
}
+ successToken = false
+ sendJwtThroughRequestParameter(){
+ var myToken = localStorage.getItem('token')
+ this.demoService.remote().getFromRequestParameter(myToken).subscribe({
+ next: (success: any)=>{
+ this.successToken = true
+ }, error: (error: any) => {
+ console.error('error:', error);
+ },
+ })
+ }
backStep() {
this.stepService.setStep(6)
diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.html b/frontend/src/app/send-jwt2/send-jwt2.component.html
index 9372f96..3742ada 100644
--- a/frontend/src/app/send-jwt2/send-jwt2.component.html
+++ b/frontend/src/app/send-jwt2/send-jwt2.component.html
@@ -11,9 +11,12 @@
+ {{ "send-jwt1.code" | transloco }}
{{ "send-jwt2.introduction" | transloco }}
{{ "send-jwt2.request" | transloco }}
- +
{{ "send-jwt2.inputParameter" | transloco }}
{{ "send-jwt2.contentType" | transloco }}
diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.scss b/frontend/src/app/send-jwt2/send-jwt2.component.scss
index ed7896a..7a3de42 100644
--- a/frontend/src/app/send-jwt2/send-jwt2.component.scss
+++ b/frontend/src/app/send-jwt2/send-jwt2.component.scss
@@ -40,13 +40,15 @@
display: flex;
align-items: center;
- a {
+ button {
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
font-style: oblique;
color: #1a2035;
+ border: none;
+ background: transparent;
text-decoration: none;
}
diff --git a/frontend/src/app/send-jwt2/send-jwt2.component.ts b/frontend/src/app/send-jwt2/send-jwt2.component.ts
index b92b72e..002a38a 100644
--- a/frontend/src/app/send-jwt2/send-jwt2.component.ts
+++ b/frontend/src/app/send-jwt2/send-jwt2.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { StepService } from '../shared/services/step.service';
+import { DemoService } from '../shared/services/demo.service';
@Component({
selector: 'app-send-jwt2',
@@ -9,14 +10,30 @@ import { StepService } from '../shared/services/step.service';
})
export class SendJwt2Component implements OnInit {
+ token: any | null
+
constructor(
private router : Router,
+ private demoService : DemoService,
private stepService: StepService
) {
this.stepService.setStep(8)
}
ngOnInit(): void {
+ var outToken : any = localStorage.getItem('token')
+ this.token = outToken
+ }
+
+ sendJwtThroughBody(value: string){
+ this.token = value
+ this.demoService.remote().postFromBody(value).subscribe({
+ next: (success: any)=>{
+ console.log('yes')
+ }, error: (error: any) => {
+ console.error('error:', error);
+ },
+ })
}
backStep() {
diff --git a/frontend/src/app/send-jwt2/send-jwt2.module.ts b/frontend/src/app/send-jwt2/send-jwt2.module.ts
index 3aabfe8..d24d329 100644
--- a/frontend/src/app/send-jwt2/send-jwt2.module.ts
+++ b/frontend/src/app/send-jwt2/send-jwt2.module.ts
@@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
import { SendJwt2RoutingModule } from './send-jwt2-routing.module';
import { TranslocoModule } from '@ngneat/transloco';
import { SendJwt2Component } from './send-jwt2.component';
-
+import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
@@ -13,6 +13,7 @@ import { SendJwt2Component } from './send-jwt2.component';
imports: [
CommonModule,
TranslocoModule,
+ FormsModule,
SendJwt2RoutingModule
]
})
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.html b/frontend/src/app/send-jwt3/send-jwt3.component.html
index 676e02e..26507c7 100644
--- a/frontend/src/app/send-jwt3/send-jwt3.component.html
+++ b/frontend/src/app/send-jwt3/send-jwt3.component.html
@@ -16,7 +16,20 @@
{
+ let url = REMOTE_SERVER+ENDPOINTS.protected
+ let params = {
+ access_token: accessToken
+ }
+ return httpRequest.get(url, {params: params});
+ },
+ postFromBody(body: any): Observable {
+ let url = REMOTE_SERVER+ENDPOINTS.webForm
+ return httpRequest.post(url, body.access_token);
+ },
+ getFromRequestHeader(headers: any): Observable {
+ let url = REMOTE_SERVER+ENDPOINTS.bearer
+ return httpRequest.get(url, {headers: headers});
+ },
+ login(body: any): Observable {
+ let url = REMOTE_SERVER+ENDPOINTS.login
+ return httpRequest.post(url, body);
+ },
+ webCookies(): Observable {
+ let url = REMOTE_SERVER+ENDPOINTS.webCookies
+ return httpRequest.get(url);
+ },
+ getUser(): Observable {
+ let url = REMOTE_SERVER+ENDPOINTS.getUser
+ return httpRequest.get(url);
+ },
+ logOut(): Observable {
+ let url = REMOTE_SERVER+ENDPOINTS.logOut
+ return httpRequest.get(url);
+ }
+ }
+ }
+
+ constructor(private http: HttpClient) {
+
+ }
+
+
+
+}
diff --git a/frontend/src/app/shared/services/jwt.service.ts b/frontend/src/app/shared/services/jwt.service.ts
index 57ee3fa..a5e4f1d 100644
--- a/frontend/src/app/shared/services/jwt.service.ts
+++ b/frontend/src/app/shared/services/jwt.service.ts
@@ -19,6 +19,10 @@ export class JwtService {
return this.http.get(this.url);
}
+ public post(options: any): Observable {
+ return this.http.post(this.url, options)
+ }
+
public verifyToken(token: string): Observable {
return this.http.get(`${this.url}/verify/${token}`);
}
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index 8aceb60..8f7a358 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -133,7 +133,8 @@
"request2": "In this request, we sent token via request URI parameters",
"queryParameter": "Read about standards to follow while sending token via URI Query Parameter",
"secureWay": "Let's learn about more secure ways to send the token to the authorization server.",
- "body": "Next: Send token in form body"
+ "body": "Next: Send token in form body",
+ "code": "GET /demo/protected-endpoint?access_token=mF_9.B5f-4.1JqM HTTP/1.1"
},
"send-jwt2": {
@@ -163,7 +164,9 @@
"errorCodes": "Error Codes:",
"queryParameter": "Read about standards to send token via headers",
"body": "Next: Sending token in cookies",
- "requestHeader": "send token to request header"
+ "requestHeader": "send token to request header",
+ "openBracket": "{",
+ "closeBracket": "}"
},
"send-jwt4": {
"introduction": "2. Send JWT to backend with request to access to resources",
{{ "send-jwt3.request" | transloco }}
-
+
Edit
@@ -24,7 +37,7 @@
+ Sample Response
+ HTTP/1.1 200 OK
+ Content-Type: application/json;charset=UTF-8
+ Cache-Control: no-store
+ Pragma: no-cache
+
+ {{'send-jwt3.openBracket' | transloco}}
+ "access_token":"mF_9.B5f-4.1JqM",
+ "token_type":"Bearer",
+ "expires_in":3600,
+ "refresh_token":"tGzv3JOkF0XG5Qx2TlKWIA"
+ {{ 'send-jwt3.closeBracket' | transloco}}
+
{{ "send-jwt3.request" | transloco }}
-
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.scss b/frontend/src/app/send-jwt3/send-jwt3.component.scss
index a07d1bc..7dd65c8 100644
--- a/frontend/src/app/send-jwt3/send-jwt3.component.scss
+++ b/frontend/src/app/send-jwt3/send-jwt3.component.scss
@@ -33,7 +33,7 @@
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border: solid 1px #3c4053;
- padding: 20px 35.9px 274.5px;
+ padding: 20px ;
display: flex;
.sampleContent {
flex-basis: 80%;
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.ts b/frontend/src/app/send-jwt3/send-jwt3.component.ts
index dc57340..a4beeef 100644
--- a/frontend/src/app/send-jwt3/send-jwt3.component.ts
+++ b/frontend/src/app/send-jwt3/send-jwt3.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { StepService } from '../shared/services/step.service';
+import { DemoService } from '../shared/services/demo.service'
+import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-send-jwt3',
@@ -11,6 +13,7 @@ export class SendJwt3Component implements OnInit {
constructor(
private router: Router,
+ private demoService: DemoService,
private stepService: StepService
) {
this.stepService.setStep(9)
@@ -19,6 +22,16 @@ export class SendJwt3Component implements OnInit {
ngOnInit(): void {
}
+ sendTokenThroughRequestHeaders(){
+ var token = localStorage.getItem('token')
+ var headers = new HttpHeaders()
+ .set("Content-Type", "application\/json")
+ .set("Authorization", "Bearer " + token)
+ this.demoService.remote().getFromRequestHeader(headers).subscribe((response)=>{
+ console.log(response)
+ })
+ }
+
backStep(){
this.stepService.setStep(8)
this.router.navigate(['send-jwt2'])
diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.html b/frontend/src/app/send-jwt4/send-jwt4.component.html
index b1947ce..602a946 100644
--- a/frontend/src/app/send-jwt4/send-jwt4.component.html
+++ b/frontend/src/app/send-jwt4/send-jwt4.component.html
@@ -18,30 +18,30 @@ {{ "send-jwt4.request" | transloco }}
1. - {{"send-jwt4.step1" | transloco}} + +
2. - {{"send-jwt4.step2" | transloco}} + +
3. - {{"send-jwt4.step3" | transloco}} + +
4. - {{"send-jwt4.step4" | transloco}} + +
{{ "send-jwt4.queryParameter" | transloco}} diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.scss b/frontend/src/app/send-jwt4/send-jwt4.component.scss index 2a9d023..b8e818e 100644 --- a/frontend/src/app/send-jwt4/send-jwt4.component.scss +++ b/frontend/src/app/send-jwt4/send-jwt4.component.scss @@ -39,7 +39,11 @@ span { color: #fff; } - a { + button { + background: transparent; + border: none; + color: #0d6efd; + text-align: left; margin-left: 6px; } } diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.ts b/frontend/src/app/send-jwt4/send-jwt4.component.ts index bfb285d..3c99975 100644 --- a/frontend/src/app/send-jwt4/send-jwt4.component.ts +++ b/frontend/src/app/send-jwt4/send-jwt4.component.ts @@ -1,5 +1,7 @@ +import { HttpHeaders } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import { DemoService } from '../shared/services/demo.service'; import { StepService } from '../shared/services/step.service'; @Component({ @@ -11,6 +13,7 @@ export class SendJwt4Component implements OnInit { constructor( private router : Router, + private demoService: DemoService, private stepService: StepService ) { this.stepService.setStep(10) @@ -19,6 +22,28 @@ export class SendJwt4Component implements OnInit { ngOnInit(): void { } + getAuthorizePage(){ + this.router.navigate(['authorize']) + } + + getProtectedUserData(){ + this.demoService.remote().webCookies().subscribe((success)=>{ + console.log(success) + }) + } + + getUser(){ + this.demoService.remote().getUser().subscribe((user)=>{ + console.log(user) + }) + } + + logOut(){ + this.demoService.remote().logOut().subscribe(success=>{ + console.log(success) + }) + } + backStep() { this.stepService.setStep(9) this.router.navigate(['send-jwt3']) diff --git a/frontend/src/app/shared/services/demo.service.ts b/frontend/src/app/shared/services/demo.service.ts new file mode 100644 index 0000000..3bc34b6 --- /dev/null +++ b/frontend/src/app/shared/services/demo.service.ts @@ -0,0 +1,65 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +import { environment } from '../../../environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class DemoService { + + remote(){ + const REMOTE_SERVER = `${environment.server}`; + const ENDPOINTS = { + "protected": "/demo/protected", + "webForm": "/demo/protected/web-form", + "bearer": "/demo/protected/api/bearer", + "login": "/demo/oauth/token", + "webCookies": '/demo/protected/web-cookies', + "getUser": "/demo/user", + "logOut": "/demo/logout" + } + let httpRequest = this.http + return { + getFromRequestParameter(accessToken: any): Observable