Merge pull request #2037 from numbersprotocol/feature-pass-new-jwt-to-iframe

Feature pass new jwt to iframe

Author: bafu

src/app/features/home/details/details.page.html

@@ -55,7 +55,9 @@
       "
     >
       <div class="slide">
-        <iframe [src]="iframeUrlWithToken$ | ngrxPush"></iframe>
+        <div *ngIf="iframeUrlWithJWTToken$ | ngrxPush as iframeUrlWithJWTToken">
+          <iframe [src]="iframeUrlWithJWTToken"></iframe>
+        </div>
       </div>
     </ng-template>
   </swiper>

src/app/features/home/details/details.page.ts

@@ -213,6 +213,22 @@ export class DetailsPage {
     })
   );
 
+  readonly iframeUrlWithJWTToken$ = combineLatest([
+    this.activeDetailedCapture$,
+    defer(() => this.diaBackendAuthService.queryJWTToken$()),
+  ]).pipe(
+    distinctUntilChanged(),
+    map(([detailedCapture, token]) => {
+      const params =
+        `nid=${detailedCapture.id}` +
+        `&token=${token.access}` +
+        `&refresh_token=${token.refresh}` +
+        `&from=mycapture`;
+      const url = `${BUBBLE_IFRAME_URL}/asset_page?${params}`;
+      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    })
+  );
+
   readonly isFromSeriesPage$ = this.type$.pipe(map(type => type === 'series'));
 
   constructor(

src/app/features/home/explore-tab/explore-tab/explore-tab.component.html

@@ -6,8 +6,14 @@
 </div>
 
 <ng-template #bubbleIframe>
-  <iframe
-    [src]="bubbleIframeUrl$ | ngrxPush | safeResourceUrl"
-    class="bubble-iframe"
-  ></iframe>
+  <div
+    *ngIf="
+      bubbleIframeUrlWithJWTToken$ | ngrxPush as bubbleIframeUrlWithJWTToken
+    "
+  >
+    <iframe
+      [src]="bubbleIframeUrlWithJWTToken | safeResourceUrl"
+      class="bubble-iframe"
+    ></iframe>
+  </div>
 </ng-template>

src/app/features/home/explore-tab/explore-tab/explore-tab.component.ts

@@ -1,24 +1,25 @@
 import { Component } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { defer } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { DiaBackendAuthService } from '../../../../shared/dia-backend/auth/dia-backend-auth.service';
 import { BUBBLE_IFRAME_URL } from '../../../../shared/dia-backend/secret';
 import { ErrorService } from '../../../../shared/error/error.service';
 import { NetworkService } from '../../../../shared/network/network.service';
-import { isNonNullable } from '../../../../utils/rx-operators/rx-operators';
 
 @Component({
   selector: 'app-explore-tab',
   templateUrl: './explore-tab.component.html',
   styleUrls: ['./explore-tab.component.scss'],
 })
 export class ExploreTabComponent {
-  readonly bubbleIframeUrl$ = this.diaBackendAuthService.token$.pipe(
-    isNonNullable(),
-    map(token => {
-      return `${BUBBLE_IFRAME_URL}/?token=${token}`;
-    })
-  );
+  readonly bubbleIframeUrlWithJWTToken$ = defer(() => {
+    return this.diaBackendAuthService.queryJWTToken$().pipe(
+      map(token => {
+        return `${BUBBLE_IFRAME_URL}/?token=${token.access}&refresh_token=${token.refresh}`;
+      })
+    );
+  });
 
   readonly networkConnected$ = this.networkService.connected$;
 

src/app/shared/dia-backend/auth/dia-backend-auth.service.ts

@@ -128,6 +128,18 @@ export class DiaBackendAuthService {
       );
   }
 
+  queryJWTToken$() {
+    return defer(() => this.getAuthHeaders()).pipe(
+      concatMap(headers => {
+        return this.httpClient.post<QueryJWTTokenResponse>(
+          `${BASE_URL}/api/v3/auth/qjwt/`,
+          {},
+          { headers }
+        );
+      })
+    );
+  }
+
   private readUser$() {
     return defer(() => this.getAuthHeaders()).pipe(
       concatMap(headers =>
@@ -413,6 +425,11 @@ export interface LoginResponse {
   readonly auth_token: string;
 }
 
+export interface QueryJWTTokenResponse {
+  readonly access: string;
+  readonly refresh: string;
+}
+
 export interface ReadUserResponse {
   readonly username: string;
   readonly email: string;