Merge pull request #755 from linjie997/master

manfredsteyer · web-flow · commit c60ffec1469e · 2020-03-21T16:47:56.000+01:00
Update sample app and silent-refresh.html script
diff --git a/docs-src/implicit-flow.md b/docs-src/implicit-flow.md
@@ -154,7 +154,7 @@ This file is loaded into the hidden iframe after getting new tokens. Its only ta
 <html>
 <body>
     <script>
-    window.parent.postMessage(location.hash || ('#' + location.search), location.origin);
+        (window.opener || window.parent).postMessage(location.hash || ('#' + location.search), location.origin);
     </script>
 </body>
 </html>
@@ -190,4 +190,4 @@ To automatically refresh a token when/ some time before it expires, just call th
 this.oauthService.setupAutomaticSilentRefresh();
 ```
 
-By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property ``timeoutFactor`` to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.
+By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property ``timeoutFactor`` to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.
diff --git a/projects/sample/src/app/auth-code-flow.config.ts b/projects/sample/src/app/auth-code-flow.config.ts
@@ -9,6 +9,8 @@ export const authCodeFlowConfig: AuthConfig = {
       ? '/#/index.html'
       : '/index.html'),
 
+  silentRefreshRedirectUri: `${window.location.origin}/silent-refresh.html`,
+
   // The SPA's id. The SPA is registerd with this id at the auth-server
   // clientId: 'server.code',
   clientId: 'spa',
diff --git a/projects/sample/src/app/home/home.component.html b/projects/sample/src/app/home/home.component.html
@@ -28,6 +28,17 @@ <h2>Login with Implicit Flow</h2>
     </div>
 </div>
 
+<div class="panel panel-default">
+    <div class="panel-body">
+        <h2>Login with Implicit Flow in popup</h2>
+        <p>
+            <button class="btn btn-default" (click)="loginImplicitInPopup()">Login</button>
+            <button class="btn btn-default" (click)="logout()">Logout</button>
+        </p>
+        <b>Username/Password:</b> max/geheim
+    </div>
+</div>
+
 <div class="panel panel-default">
     <div class="panel-body">
         <h2>Login with Code Flow</h2>
@@ -39,6 +50,17 @@ <h2>Login with Code Flow</h2>
     </div>
 </div>
 
+<div class="panel panel-default">
+    <div class="panel-body">
+        <h2>Login with Code Flow in popup</h2>
+        <p>
+            <button class="btn btn-default" (click)="loginCodeInPopup()">Login</button>
+            <button class="btn btn-default" (click)="logout()">Logout</button>
+        </p>
+        <b>Username/Password:</b> alice/alice
+    </div>
+</div>
+
 <div class="panel panel-default">
     <div class="panel-body">
         <p>
diff --git a/projects/sample/src/app/home/home.component.ts b/projects/sample/src/app/home/home.component.ts
@@ -34,6 +34,19 @@ export class HomeComponent implements OnInit {
       // the parameter here is optional. It's passed around and can be used after logging in
   }
 
+  async loginImplicitInPopup() {
+
+    // Tweak config for implicit flow
+    this.oauthService.configure(authConfig);
+    await this.oauthService.loadDiscoveryDocument();
+    sessionStorage.setItem('flow', 'implicit');
+
+    this.oauthService.initLoginFlowInPopup().then(() => {
+      this.loadUserProfile();
+    });
+      // the parameter here is optional. It's passed around and can be used after logging in
+  }
+
   async loginCode() {
       // Tweak config for code flow
       this.oauthService.configure(authCodeFlowConfig);
@@ -44,6 +57,17 @@ export class HomeComponent implements OnInit {
        // the parameter here is optional. It's passed around and can be used after logging in
   }
 
+  async loginCodeInPopup() {
+      // Tweak config for code flow
+      this.oauthService.configure(authCodeFlowConfig);
+      await this.oauthService.loadDiscoveryDocument();
+      sessionStorage.setItem('flow', 'code');
+
+      this.oauthService.initLoginFlowInPopup().then(() => {
+        this.loadUserProfile();
+      });
+  }
+
   logout() {
     this.oauthService.logOut();
   }
diff --git a/projects/sample/src/silent-refresh.html b/projects/sample/src/silent-refresh.html
@@ -1,7 +1,7 @@
 <html>
     <body>
         <script>
-            parent.postMessage(location.hash, location.origin);
+            (window.opener || window.parent).postMessage(location.hash || ('#' + location.search), location.origin);
         </script>
     </body>
-</html>
+</html>
