Configured federated login with Amazon Cognito to provide a SSO page.…

… Amazon Congnito, Google and Facebook integration is configured and working, but the user credentials are not used in the app yet. Added "Federated Login" menu item on the Account menu for testing.
terafuze · Jul 21, 2019 · 009beca · 009beca
1 parent 2d668f9
commit 009beca
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 26 deletions.
diff --git a/amplify/backend/auth/gohomenotesed112ed1/gohomenotesed112ed1-cloudformation-template.yml b/amplify/backend/auth/gohomenotesed112ed1/gohomenotesed112ed1-cloudformation-template.yml
@@ -116,24 +116,54 @@ Parameters:
   authProvidersUserPool:
     Type: CommaDelimitedList
 
+  hostedUIProviderMeta:
+    Type: String
+
+  dependsOn:
+    Type: CommaDelimitedList
+
+  AllowedOAuthFlows:
+    Type: CommaDelimitedList
+
+  AllowedOAuthScopes:
+    Type: CommaDelimitedList
+
+  CallbackURLs:
+    Type: CommaDelimitedList
+
+  LogoutURLs:
+    Type: CommaDelimitedList
+
+  googleAuthorizeScopes:
+    Type: CommaDelimitedList
+
+  updateFlow:
+    Type: String
+
+  addCallbackOnUpdate:
+    Type: String
+
+  addLogoutOnUpdate:
+    Type: String
+
   googleAppIdUserPool:
     Type: String
 
   googleAppSecretUserPool:
     Type: String
 
-  hostedUIProviderMeta:
+  hostedUIProviderCreds:
     Type: String
 
-  hostedUIProviderCreds:
+  facebookAppIdUserPool:
+    Type: String
+
+  facebookAppSecretUserPool:
     Type: String
 
   oAuthMetadata:
     Type: String
-
-  dependsOn:
-    Type: CommaDelimitedList
-
+
 Conditions:
   ShouldNotCreateEnvResources: !Equals [ !Ref env, NONE ]
 

diff --git a/amplify/backend/auth/gohomenotesed112ed1/parameters.json b/amplify/backend/auth/gohomenotesed112ed1/parameters.json
@@ -64,9 +64,32 @@
         "hptps://gohomenotes.net/signout/"
     ],
     "authProvidersUserPool": [
+        "Facebook",
         "Google"
     ],
-    "hostedUIProviderMeta": "[{\"ProviderName\":\"Google\",\"authorize_scopes\":\"openid email profile\",\"AttributeMapping\":{\"email\":\"email\",\"username\":\"sub\"}}]",
-    "oAuthMetadata": "{\"AllowedOAuthFlows\":[\"code\"],\"AllowedOAuthScopes\":[\"phone\",\"email\",\"openid\",\"profile\",\"aws.cognito.signin.user.admin\"],\"CallbackURLs\":[\"https://gohomenotes.net/\"],\"LogoutURLs\":[\"hptps://gohomenotes.net/signout/\"]}",
-    "dependsOn": []
+    "hostedUIProviderMeta": "[{\"ProviderName\":\"Facebook\",\"authorize_scopes\":\"email,public_profile\",\"AttributeMapping\":{\"email\":\"email\",\"username\":\"id\"}},{\"ProviderName\":\"Google\",\"authorize_scopes\":\"openid email profile\",\"AttributeMapping\":{\"email\":\"email\",\"username\":\"sub\"}}]",
+    "dependsOn": [],
+    "AllowedOAuthFlows": [
+        "code"
+    ],
+    "AllowedOAuthScopes": [
+        "phone",
+        "email",
+        "openid",
+        "profile",
+        "aws.cognito.signin.user.admin"
+    ],
+    "CallbackURLs": [
+        "http://localhost:9000/"
+    ],
+    "LogoutURLs": [
+        "http://localhost:9000/"
+    ],
+    "googleAuthorizeScopes": [
+        "openid email profile"
+    ],
+    "updateFlow": "providers",
+    "addCallbackOnUpdate": false,
+    "addLogoutOnUpdate": false,
+    "oAuthMetadata": "{\"AllowedOAuthFlows\":[\"code\"],\"AllowedOAuthScopes\":[\"phone\",\"email\",\"openid\",\"profile\",\"aws.cognito.signin.user.admin\"],\"CallbackURLs\":[\"http://localhost:9000/\"],\"LogoutURLs\":[\"http://localhost:9000/\"]}"
 }
diff --git a/amplify/backend/backend-config.json b/amplify/backend/backend-config.json
@@ -1,9 +1,9 @@
 {
-	"auth": {
-		"gohomenotesed112ed1": {
-			"service": "Cognito",
-			"providerPlugin": "awscloudformation",
-			"dependsOn": []
-		}
-	}
+    "auth": {
+        "gohomenotesed112ed1": {
+            "service": "Cognito",
+            "providerPlugin": "awscloudformation",
+            "dependsOn": []
+        }
+    }
 }
diff --git a/amplify/team-provider-info.json b/amplify/team-provider-info.json
@@ -13,9 +13,11 @@
         "categories": {
             "auth": {
                 "gohomenotesed112ed1": {
+                    "facebookAppIdUserPool": "2277603469018809",
+                    "facebookAppSecretUserPool": "dea4f7729c117af04464075afd5dae2f",
                     "googleAppIdUserPool": "428422803827-b30ofv5iurpovhlt0e8n5fri9nk6d3gs.apps.googleusercontent.com",
                     "googleAppSecretUserPool": "towztgGdNjx6dq5f0SoDb8Qd",
-                    "hostedUIProviderCreds": "[{\"ProviderName\":\"Google\",\"client_id\":\"428422803827-b30ofv5iurpovhlt0e8n5fri9nk6d3gs.apps.googleusercontent.com\",\"client_secret\":\"towztgGdNjx6dq5f0SoDb8Qd\"}]"
+                    "hostedUIProviderCreds": "[{\"ProviderName\":\"Facebook\",\"client_id\":\"2277603469018809\",\"client_secret\":\"dea4f7729c117af04464075afd5dae2f\"},{\"ProviderName\":\"Google\",\"client_id\":\"428422803827-b30ofv5iurpovhlt0e8n5fri9nk6d3gs.apps.googleusercontent.com\",\"client_secret\":\"towztgGdNjx6dq5f0SoDb8Qd\"}]"
                 }
             }
         }

diff --git a/src/main/webapp/app/app.main.ts b/src/main/webapp/app/app.main.ts
@@ -1,14 +1,18 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { ProdConfig } from './blocks/config/prod.config';
 import { AppModule } from './app.module';
+import Amplify from 'aws-amplify';
+import awsconfig from '../../../aws-exports';
+
+Amplify.configure(awsconfig);
 
 ProdConfig();
 
 if (module['hot']) {
-    module['hot'].accept();
+  module['hot'].accept();
 }
 
 platformBrowserDynamic()
-    .bootstrapModule(AppModule, { preserveWhitespaces: true })
-    .then(success => console.log(`Application started`))
-    .catch(err => console.error(err));
+  .bootstrapModule(AppModule, { preserveWhitespaces: true })
+  .then(success => console.log(`Application started`))
+  .catch(err => console.error(err));
diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts
@@ -18,6 +18,8 @@ import { HomeModule } from './home/home.module';
 import { AccountModule } from './account/account.module';
 import { FeaturesModule } from './features/features.module';
 import * as moment from 'moment';
+import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';
+
 import {
   JhiMainComponent,
   NavbarComponent,
@@ -44,7 +46,8 @@ import {
     HomeModule,
     AccountModule,
     FeaturesModule,
-    AppRoutingModule
+    AppRoutingModule,
+    AmplifyAngularModule
   ],
   declarations: [
     JhiMainComponent,
@@ -75,7 +78,8 @@ import {
       provide: HTTP_INTERCEPTORS,
       useClass: NotificationInterceptor,
       multi: true
-    }
+    },
+    AmplifyService
   ],
   bootstrap: [JhiMainComponent]
 })

diff --git a/src/main/webapp/app/layouts/navbar/navbar.component.html b/src/main/webapp/app/layouts/navbar/navbar.component.html
@@ -260,7 +260,7 @@
                             <span jhiTranslate="global.menu.account.password">Password</span>
                         </a>
                     </li>
-                    <li *ngSwitchCase="true">
+                    <li>
                         <a class="dropdown-item" (click)="logout()" id="logout">
                             <fa-icon [icon]="'sign-out-alt'" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.logout">Sign out</span>
@@ -271,7 +271,13 @@
                             <fa-icon [icon]="'sign-in-alt'" [fixedWidth]="true"></fa-icon>
                             <span jhiTranslate="global.menu.account.login">Sign in</span>
                         </a>
-                    </li>
+                    </li>                    
+                    <li *ngSwitchCase="false">
+                            <a class="dropdown-item" (click)="federatedLogin()" id="login">
+                                <fa-icon [icon]="'sign-in-alt'" [fixedWidth]="true"></fa-icon>
+                                <span jhiTranslate="global.menu.account.federatedLogin">Federated Sign in</span>
+                            </a>
+                        </li>
                     <li *ngSwitchCase="false">
                         <a class="dropdown-item" routerLink="register" routerLinkActive="active" (click)="collapseNavbar()">
                             <fa-icon [icon]="'user-plus'" [fixedWidth]="true"></fa-icon>

diff --git a/src/main/webapp/app/layouts/navbar/navbar.component.ts b/src/main/webapp/app/layouts/navbar/navbar.component.ts
@@ -7,6 +7,7 @@ import { SessionStorageService } from 'ngx-webstorage';
 import { VERSION } from 'app/app.constants';
 import { JhiLanguageHelper, AccountService, LoginModalService, LoginService, UserContext } from 'app/core';
 import { ProfileService } from 'app/layouts/profiles/profile.service';
+import { AmplifyService } from 'aws-amplify-angular';
 
 @Component({
   selector: 'app-navbar',
@@ -31,7 +32,8 @@ export class NavbarComponent implements OnInit {
     private loginModalService: LoginModalService,
     private profileService: ProfileService,
     private userContext: UserContext,
-    private router: Router
+    private router: Router,
+    private amplifyService: AmplifyService
   ) {
     this.version = VERSION ? 'v' + VERSION : '';
     this.isNavbarCollapsed = true;
@@ -67,9 +69,14 @@ export class NavbarComponent implements OnInit {
     this.modalRef = this.loginModalService.open();
   }
 
+  federatedLogin() {
+    this.amplifyService.auth().federatedSignIn();
+  }
+
   logout() {
     this.collapseNavbar();
     this.loginService.logout();
+    this.amplifyService.auth().signOut();
     this.router.navigate(['']);
   }
 

diff --git a/src/main/webapp/i18n/en/global.json b/src/main/webapp/i18n/en/global.json
@@ -35,6 +35,7 @@
         "password": "Password",
         "sessions": "Sessions",
         "login": "Sign in",
+        "federatedLogin": "Federated Login",
         "logout": "Sign out",
         "register": "Register"
       },