Sample: add login in popup for both implicit flow and codeflow

Author: linjie997

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',

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>

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();
   }