From 15a4f0cedf1a1134d8f07935558017a4928d9290 Mon Sep 17 00:00:00 2001 From: gitcommitshow Date: Mon, 1 Aug 2022 20:26:41 +0530 Subject: [PATCH] fix: web cookies workflow integration issues and content update --- app.js | 17 ++++++++- frontend/src/app/app.component.html | 6 ++-- frontend/src/app/finish/finish.component.html | 2 +- .../app/send-jwt3/send-jwt3.component.html | 4 +-- .../app/send-jwt4/send-jwt4.component.html | 10 +++--- .../app/send-jwt4/send-jwt4.component.scss | 7 +++- .../src/app/send-jwt4/send-jwt4.component.ts | 35 ++++++++++++++----- .../src/app/shared/services/demo.service.ts | 8 +++-- frontend/src/assets/i18n/en.json | 10 +++--- routes/demo.js | 18 +++++----- views/demo/authorize.ejs | 3 ++ 11 files changed, 80 insertions(+), 40 deletions(-) diff --git a/app.js b/app.js index 2e477e5..81b28cc 100644 --- a/app.js +++ b/app.js @@ -47,7 +47,22 @@ app.use(function(req, res, next){ next(); }) -app.use(cors()); +// app.use(cors()); + +//Using explicit header settings for cors instead of cors package to make it easier to understand what exaxtly we are doing +app.use(function (req, res, next) { + // Website you wish to allow to connect + res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200'); + // Request methods you wish to allow + res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); + // Request headers you wish to allow + res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,authorization'); + // Set to true if you need the website to include cookies in the requests sent + // to the API (e.g. in case you use sessions) + res.setHeader('Access-Control-Allow-Credentials', true); + // Pass to next layer of middleware + next(); +}); app.use("/", homeRouter); app.use("/jwt", jwtRouter); diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 0b81eb4..cc66750 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -113,12 +113,12 @@ + \ No newline at end of file diff --git a/frontend/src/app/finish/finish.component.html b/frontend/src/app/finish/finish.component.html index cda81bb..60ba2e1 100644 --- a/frontend/src/app/finish/finish.component.html +++ b/frontend/src/app/finish/finish.component.html @@ -8,7 +8,7 @@

{{ "finish.introduction" | transloco }}

- {{ "finish.celebrate" | transloco}} + {{ "finish.celebrate" | transloco}}
diff --git a/frontend/src/app/send-jwt3/send-jwt3.component.html b/frontend/src/app/send-jwt3/send-jwt3.component.html index 1588a24..d97c09d 100644 --- a/frontend/src/app/send-jwt3/send-jwt3.component.html +++ b/frontend/src/app/send-jwt3/send-jwt3.component.html @@ -5,12 +5,10 @@

{{ "send-jwt3.introduction" | transloco }}

- - {{ successText }} + 
{{ successText }}
- {{ errorText | transloco | uppercase }}
diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.html b/frontend/src/app/send-jwt4/send-jwt4.component.html index 1971a31..bb2c181 100644 --- a/frontend/src/app/send-jwt4/send-jwt4.component.html +++ b/frontend/src/app/send-jwt4/send-jwt4.component.html @@ -5,13 +5,11 @@

{{ "send-jwt4.introduction" | transloco }}

- - {{ successText }} + 
{{ successText }}
- -{{ errorText | transloco | uppercase }} + {{ errorText | transloco | uppercase }}
@@ -48,8 +46,8 @@

{{ "send-jwt4.request" | transloco }}

- - {{ "send-jwt4.queryParameter" | 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 b8e818e..8c73c55 100644 --- a/frontend/src/app/send-jwt4/send-jwt4.component.scss +++ b/frontend/src/app/send-jwt4/send-jwt4.component.scss @@ -1,6 +1,6 @@ .rectangle { width: 667px; - height: 53px; + height: fit-content; padding: 16.5px 223.1px 15.5px 19.9px; border-radius: 12px; border: solid 1px rgba(0, 195, 15, 0.75); @@ -20,6 +20,11 @@ } } +.rectangle.error { + border: solid 1px rgba(255, 5, 5, 0.75); + background-color: rgba(209, 66, 31, 0.15); +} + .rectangle1 { width: 668px; height: 529px; diff --git a/frontend/src/app/send-jwt4/send-jwt4.component.ts b/frontend/src/app/send-jwt4/send-jwt4.component.ts index ba2b78f..8c8048d 100644 --- a/frontend/src/app/send-jwt4/send-jwt4.component.ts +++ b/frontend/src/app/send-jwt4/send-jwt4.component.ts @@ -3,6 +3,7 @@ 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'; +import { environment } from '../../environments/environment' @Component({ selector: 'app-send-jwt4', @@ -11,6 +12,7 @@ import { StepService } from '../shared/services/step.service'; }) export class SendJwt4Component implements OnInit { + AUTH_SERVER = `${environment.server}`; successText = ""; errorText = ""; @@ -26,17 +28,18 @@ export class SendJwt4Component implements OnInit { } getAuthorizePage(){ - this.router.navigate(['authorize']) + window.open(this.AUTH_SERVER+"/demo/authorize", "_blank"); + // this.router.navigate(['authorize']) } getProtectedUserData(){ - this.demoService.remote().webCookies().subscribe({ + this.demoService.remote().sendTokenViaWebCookies().subscribe({ next: (success: any)=>{ console.log("success") this.errorText = "" this.successText = JSON.stringify(success, null, 4) }, - complete: () => console.log("Sent token in header"), + complete: () => console.log("Sent token in cookies"), error: (error: HttpErrorResponse) => { this.successText = "" this.errorText = error.statusText || "Unsuccessful" @@ -46,15 +49,31 @@ export class SendJwt4Component implements OnInit { } getUser(){ - this.demoService.remote().getUser().subscribe((user)=>{ - console.log(user) + var token: any = localStorage.getItem('token'); + var headers = new HttpHeaders() + .set("Content-Type", "application\/json") + if(token) headers.set("Authorization", token); + this.demoService.remote().getUserViaHeaderOrCookies(headers).subscribe({ + next: (success: any)=>{ + console.log("success") + this.errorText = "" + this.successText = JSON.stringify(success, null, 4) + }, + complete: () => console.log("Sent token in header/cookies"), + error: (error: HttpErrorResponse) => { + this.successText = "" + this.errorText = error.statusText || "Unsuccessful" + console.error('error:', error) + } }) } logOut(){ - this.demoService.remote().logOut().subscribe(success=>{ - console.log(success) - }) + let popup = window.open(this.AUTH_SERVER+"/demo/logout", "_blank"); + setTimeout(() => popup?.close(), 1000); + // this.demoService.remote().logOut().subscribe(success=>{ + // console.log(success) + // }) } backStep() { diff --git a/frontend/src/app/shared/services/demo.service.ts b/frontend/src/app/shared/services/demo.service.ts index f25c3f7..fd9527a 100644 --- a/frontend/src/app/shared/services/demo.service.ts +++ b/frontend/src/app/shared/services/demo.service.ts @@ -38,18 +38,20 @@ export class DemoService { return httpRequest.get(url, {headers: headers}); }, login(body: any): Observable { + //NOT TO BE USED. Otherwise, cookies won't set correctly let url = REMOTE_SERVER+ENDPOINTS.login return httpRequest.post(url, body); }, sendTokenViaWebCookies(): Observable { let url = REMOTE_SERVER+ENDPOINTS.webCookies - return httpRequest.get(url); + return httpRequest.get(url, { withCredentials: true }); }, - getUser(): Observable { + getUserViaHeaderOrCookies(headers: any): Observable { let url = REMOTE_SERVER+ENDPOINTS.getUser - return httpRequest.get(url); + return httpRequest.get(url, { headers: headers, withCredentials: true }); }, logOut(): Observable { + //NOT TO BE USED. Otherwise, cookies won't reset correctly let url = REMOTE_SERVER+ENDPOINTS.logOut return httpRequest.get(url); } diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index fee9533..2117169 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -125,7 +125,7 @@ }, "send-jwt1": { - "introduction": "2. Send JWT to backend with request to access to resources", + "introduction": "2. Send JWT to backend requesting protected resources", "ways": "There are 4 ways you can send JWT to backend", "authenticated": "you have been successfully authenticated", "request": "Send JWT in request parameter", @@ -138,7 +138,7 @@ }, "send-jwt2": { - "introduction": "2. Send JWT to backend with request to access to resources", + "introduction": "2. Send JWT to backend requesting protected resources", "ways": "There are 4 ways you can send JWT to backend", "authenticated": "you have been successfully authenticated", "request": "Send token in form body", @@ -152,7 +152,7 @@ }, "send-jwt3": { - "introduction": "2. Send JWT to backend with request to access to resources", + "introduction": "2. Send JWT to backend requesting protected resources", "ways": "There are 4 ways you can send JWT to backend", "authenticated": "you have been successfully authenticated", "request": "Send token in request header", @@ -169,7 +169,7 @@ "closeBracket": "}" }, "send-jwt4": { - "introduction": "2. Send JWT to backend with request to access to resources", + "introduction": "2. Send JWT to backend requesting protected resources", "ways": "There are 4 ways you can send JWT to backend", "request": "Send token via cookies", "request1": "Anything stored in cookies is sent with the request by default. So there's nothing special that you need to do in this case as long as the backend server had set the cookie header when it generted the token.", @@ -178,7 +178,7 @@ "step2": "Get protected user data", "step3" : "User data link accessible via token in authorization header with fall back to cookies", "step4" : "Logout", - "queryParameter": "Read about standards to send token via headers", + "queryParameter": "Read about securely storing cookies", "body": "Next: Choosing the best method", "authenticated": "you have been successfully authenticated" }, diff --git a/routes/demo.js b/routes/demo.js index 7b73188..937a61d 100644 --- a/routes/demo.js +++ b/routes/demo.js @@ -111,16 +111,16 @@ router.get('/protected/web-cookies', DemoAuthService.isAuthenticated, function(r router.get('/user', DemoAuthService.isAuthenticated, function(req, res) { if (req.wantsJson) { - return res.send( - `
-            { 
-                success: true, 
-                user: ${JSON.stringify(req.user)}
-            }
- Logout - `) + return res.status(200).send({ success: true, user: req.user, statusText: "Authorized" }) } - return res.send({ success: true, user: req.user }) + res.send( + `
+        { 
+            success: true, 
+            user: ${JSON.stringify(req.user)}
+        }
+ Logout + `) }) router.get('/logout', [], function(req, res) { diff --git a/views/demo/authorize.ejs b/views/demo/authorize.ejs index b5b90b3..c2de72a 100644 --- a/views/demo/authorize.ejs +++ b/views/demo/authorize.ejs @@ -1,9 +1,12 @@ +

Welcome to the authorization server

Sign in





+

After successful login, a cookie access_token will be set in your browser. +
So next time, when you make a request to authorization server,
this cookie access_token will be sent to the auth server.