6 |
7 | ### Email flow
8 | 
9 |
10 | ## Development Environment
11 | - Sql Server Express 2017 & Sql Server Management Studio 2017
12 | - Runs in both Visual Studio 2017 & Visual Studio Code
13 | - Node 8.9.4 & NPM 5.6.0
14 | - .NET Core 2.0 sdk
15 | - Angular CLI -> `npm install -g @angular/cli` https://github.com/angular/angular-cli
16 |
17 |
18 | ## Setup
19 | To build and run the project using the command line:
20 | 1. Install npm packages with `src>npm install` in the `src` directory.
21 | 2. Restore nuget packages with `src>dotnet restore` in the `src` directory.
22 | 3. Create the database with `src>dotnet ef database update` in the `src` directory.
23 | 4. Run the project with `src>dotnet run` in the `src` directory.
24 | 5. Point your browser to **http://localhost:5000**.
25 |
26 | Of course, you can also run it from either Visual Studio 2017 or Visual Studio Code with the IDE handling most of the steps above. If you have issues, try running the above steps from the command line to ensure things are setup properly.
27 |
28 | ## Facebook App Setup
29 | You're free to use the demo facebook app _Fullstack Cafe_ that the project is already configured with. To setup and use your own application
2 |
14 |
--------------------------------------------------------------------------------
/src/src/app/account/facebook-login/facebook-login.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmacneil/AngularASPNETCore2WebApiAuth/43ee286acaf745f11b2e06a10248e2d00a169896/src/src/app/account/facebook-login/facebook-login.component.scss
--------------------------------------------------------------------------------
/src/src/app/account/facebook-login/facebook-login.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { FacebookLoginComponent } from './facebook-login.component';
4 |
5 | describe('FacebookLoginComponent', () => {
6 | let component: FacebookLoginComponent;
7 | let fixture: ComponentFixture
3 | 
4 |
13 |
4 |
6 |
12 | Oops! Your facebook login failed.
7 |-
8 |
- Error: {{error}} 9 |
- Description: {{errorDescription}} 10 |
2 |
9 |
10 |
3 |
8 |
4 | All set! Please login with your account
5 |
6 | Login
7 |
11 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/src/app/account/login-form/login-form.component.scss:
--------------------------------------------------------------------------------
1 | .new-user-alert{padding-top:2.5rem}
--------------------------------------------------------------------------------
/src/src/app/account/login-form/login-form.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LoginFormComponent } from './login-form.component';
4 |
5 | describe('LoginFormComponent', () => {
6 | let component: LoginFormComponent;
7 | let fixture: ComponentFixture
12 |
34 |
35 |
2 |
6 |
7 |
3 |
5 | Please enter your information
4 |
8 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/src/app/account/registration-form/registration-form.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmacneil/AngularASPNETCore2WebApiAuth/43ee286acaf745f11b2e06a10248e2d00a169896/src/src/app/account/registration-form/registration-form.component.scss
--------------------------------------------------------------------------------
/src/src/app/account/registration-form/registration-form.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { RegistrationFormComponent } from './registration-form.component';
4 |
5 | describe('RegistrationFormComponent', () => {
6 | let component: RegistrationFormComponent;
7 | let fixture: ComponentFixture
9 |
42 |
43 |
4 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmacneil/AngularASPNETCore2WebApiAuth/43ee286acaf745f11b2e06a10248e2d00a169896/src/src/app/app.component.scss
--------------------------------------------------------------------------------
/src/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 | describe('AppComponent', () => {
4 | beforeEach(async(() => {
5 | TestBed.configureTestingModule({
6 | declarations: [
7 | AppComponent
8 | ],
9 | }).compileComponents();
10 | }));
11 | it('should create the app', async(() => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.debugElement.componentInstance;
14 | expect(app).toBeTruthy();
15 | }));
16 | it(`should have as title 'app'`, async(() => {
17 | const fixture = TestBed.createComponent(AppComponent);
18 | const app = fixture.debugElement.componentInstance;
19 | expect(app.title).toEqual('app');
20 | }));
21 | it('should render title in a h1 tag', async(() => {
22 | const fixture = TestBed.createComponent(AppComponent);
23 | fixture.detectChanges();
24 | const compiled = fixture.debugElement.nativeElement;
25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
26 | }));
27 | });
28 |
--------------------------------------------------------------------------------
/src/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss']
7 | })
8 | export class AppComponent {
9 | title = 'app';
10 | }
11 |
--------------------------------------------------------------------------------
/src/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { HttpModule, XHRBackend } from '@angular/http';
5 | import { AuthenticateXHRBackend } from './authenticate-xhr.backend';
6 |
7 | import { routing } from './app.routing';
8 |
9 | /* App Root */
10 | import { AppComponent } from './app.component';
11 | import { HeaderComponent } from './header/header.component';
12 | import { HomeComponent } from './home/home.component';
13 |
14 | /* Account Imports */
15 | import { AccountModule } from './account/account.module';
16 | /* Dashboard Imports */
17 | import { DashboardModule } from './dashboard/dashboard.module';
18 |
19 | import { ConfigService } from './shared/utils/config.service';
20 |
21 | @NgModule({
22 | declarations: [
23 | AppComponent,
24 | HeaderComponent,
25 | HomeComponent
26 | ],
27 | imports: [
28 | AccountModule,
29 | DashboardModule,
30 | BrowserModule,
31 | FormsModule,
32 | HttpModule,
33 | routing
34 | ],
35 | providers: [ConfigService, {
36 | provide: XHRBackend,
37 | useClass: AuthenticateXHRBackend
38 | }],
39 | bootstrap: [AppComponent]
40 | })
41 | export class AppModule { }
42 |
--------------------------------------------------------------------------------
/src/src/app/app.routing.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { HomeComponent } from './home/home.component';
5 |
6 | const appRoutes: Routes = [
7 | { path: '', component: HomeComponent }
8 | ];
9 |
10 | export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
--------------------------------------------------------------------------------
/src/src/app/auth.guard.ts:
--------------------------------------------------------------------------------
1 | // auth.guard.ts
2 | import { Injectable } from '@angular/core';
3 | import { Router, CanActivate } from '@angular/router';
4 | import { UserService } from './shared/services/user.service';
5 |
6 | @Injectable()
7 | export class AuthGuard implements CanActivate {
8 | constructor(private user: UserService,private router: Router) {}
9 |
10 | canActivate() {
11 |
12 | if(!this.user.isLoggedIn())
13 | {
14 | this.router.navigate(['/account/login']);
15 | return false;
16 | }
17 |
18 | return true;
19 | }
20 | }
--------------------------------------------------------------------------------
/src/src/app/authenticate-xhr.backend.ts:
--------------------------------------------------------------------------------
1 | import { Request, XHRBackend, BrowserXhr, ResponseOptions, XSRFStrategy, Response } from '@angular/http';
2 | import { Observable } from 'rxjs/Observable';
3 | import 'rxjs/add/operator/catch';
4 | import 'rxjs/add/observable/throw';
5 | import { Injectable } from '@angular/core';
6 |
7 | // sweet global way to handle 401s - works in tandem with existing AuthGuard route checks
8 | // http://stackoverflow.com/questions/34934009/handling-401s-globally-with-angular-2
9 |
10 | @Injectable()
11 | export class AuthenticateXHRBackend extends XHRBackend {
12 |
13 | constructor(_browserXhr: BrowserXhr, _baseResponseOptions: ResponseOptions, _xsrfStrategy: XSRFStrategy) {
14 | super(_browserXhr, _baseResponseOptions, _xsrfStrategy);
15 | }
16 |
17 | createConnection(request: Request) {
18 | let xhrConnection = super.createConnection(request);
19 | xhrConnection.response = xhrConnection.response.catch((error: Response) => {
20 | if ((error.status === 401 || error.status === 403) && (window.location.href.match(/\?/g) || []).length < 2) {
21 |
22 | console.log('The authentication session expired or the user is not authorized. Force refresh of the current page.');
23 | /* Great solution for bundling with Auth Guard!
24 | 1. Auth Guard checks authorized user (e.g. by looking into LocalStorage).
25 | 2. On 401/403 response you clean authorized user for the Guard (e.g. by removing coresponding parameters in LocalStorage).
26 | 3. As at this early stage you can't access the Router for forwarding to the login page,
27 | 4. refreshing the same page will trigger the Guard checks, which will forward you to the login screen */
28 | localStorage.removeItem('auth_token');
29 | window.location.href = window.location.href + '?' + new Date().getMilliseconds();
30 | }
31 | return Observable.throw(error);
32 | });
33 | return xhrConnection;
34 | }
35 | }
--------------------------------------------------------------------------------
/src/src/app/dashboard/dashboard.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { SharedModule } from '../shared/modules/shared.module';
5 |
6 | import { routing } from './dashboard.routing';
7 | import { RootComponent } from './root/root.component';
8 | import { HomeComponent } from './home/home.component';
9 | import { DashboardService } from './services/dashboard.service';
10 |
11 | import { AuthGuard } from '../auth.guard';
12 | import { SettingsComponent } from './settings/settings.component';
13 |
14 |
15 | @NgModule({
16 | imports: [
17 | CommonModule,
18 | FormsModule,
19 | routing,
20 | SharedModule
21 | ],
22 | declarations: [RootComponent,HomeComponent, SettingsComponent],
23 | exports: [ ],
24 | providers: [AuthGuard,DashboardService]
25 | })
26 | export class DashboardModule { }
27 |
--------------------------------------------------------------------------------
/src/src/app/dashboard/dashboard.routing.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { RootComponent } from './root/root.component';
5 | import { HomeComponent } from './home/home.component';
6 | import { SettingsComponent } from './settings/settings.component';
7 |
8 | import { AuthGuard } from '../auth.guard';
9 |
10 | export const routing: ModuleWithProviders = RouterModule.forChild([
11 | {
12 | path: 'dashboard',
13 | component: RootComponent, canActivate: [AuthGuard],
14 |
15 | children: [
16 | { path: '', component: HomeComponent },
17 | { path: 'home', component: HomeComponent },
18 | { path: 'settings', component: SettingsComponent },
19 | ]
20 | }
21 | ]);
22 |
23 |
--------------------------------------------------------------------------------
/src/src/app/dashboard/home/home.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/src/app/dashboard/home/home.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmacneil/AngularASPNETCore2WebApiAuth/43ee286acaf745f11b2e06a10248e2d00a169896/src/src/app/dashboard/home/home.component.scss
--------------------------------------------------------------------------------
/src/src/app/dashboard/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomeComponent } from './home.component';
4 |
5 | describe('HomeComponent', () => {
6 | let component: HomeComponent;
7 | let fixture: ComponentFixture
4 | 
11 |
12 | {{homeDetails?.message}}
5 |Name: {{homeDetails?.firstName}} {{homeDetails?.lastName}}
6 |Location: {{homeDetails?.location}}
7 |Locale: {{homeDetails?.locale}}
8 |Gender: {{homeDetails?.gender}}
9 |Facebook Id: {{homeDetails?.facebookId}}
10 |
2 |
12 |
13 |
15 |
16 |
--------------------------------------------------------------------------------
/src/src/app/dashboard/root/root.component.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Sidebar
3 | */
4 |
5 | .sidebar {
6 | position: fixed;
7 | top: 51px;
8 | bottom: 0;
9 | left: 0;
10 | z-index: 1000;
11 | padding: 20px 0;
12 | overflow-x: hidden;
13 | overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
14 | border-right: 1px solid #eee;
15 | }
16 |
17 | .sidebar .nav {
18 | margin-bottom: 20px;
19 | }
20 |
21 | .sidebar .nav-item {
22 | width: 100%;
23 | }
24 |
25 | .sidebar .nav-item + .nav-item {
26 | margin-left: 0;
27 | }
28 |
29 | .sidebar .nav-link {
30 | border-radius: 0;
31 | }
32 |
--------------------------------------------------------------------------------
/src/src/app/dashboard/root/root.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { RootComponent } from './root.component';
4 |
5 | describe('RootComponent', () => {
6 | let component: RootComponent;
7 | let fixture: ComponentFixture2 | settings works! 3 |
4 | -------------------------------------------------------------------------------- /src/src/app/dashboard/settings/settings.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmacneil/AngularASPNETCore2WebApiAuth/43ee286acaf745f11b2e06a10248e2d00a169896/src/src/app/dashboard/settings/settings.component.scss -------------------------------------------------------------------------------- /src/src/app/dashboard/settings/settings.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SettingsComponent } from './settings.component'; 4 | 5 | describe('SettingsComponent', () => { 6 | let component: SettingsComponent; 7 | let fixture: ComponentFixture
4 |
10 |
5 |
9 | JWT Auth Demo
6 |This demo shows local and facebook user registration and login flow using Angular v5.2.1, ASP.NET Core 2.0 WebApi and Facebook api
7 |Signup with email Login with email Signup/login with facebook
8 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/src/app/spinner/spinner.component.scss:
--------------------------------------------------------------------------------
1 | .spinner {
2 | width: 40px;
3 | height: 40px;
4 |
5 | position: relative;
6 | margin: 30px auto;
7 | }
8 |
9 | .double-bounce1, .double-bounce2 {
10 | width: 100%;
11 | height: 100%;
12 | border-radius: 50%;
13 | background-color: #333;
14 | opacity: 0.6;
15 | position: absolute;
16 | top: 0;
17 | left: 0;
18 |
19 | -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
20 | animation: sk-bounce 2.0s infinite ease-in-out;
21 | }
22 |
23 | .double-bounce2 {
24 | -webkit-animation-delay: -1.0s;
25 | animation-delay: -1.0s;
26 | }
27 |
28 | @-webkit-keyframes sk-bounce {
29 | 0%, 100% { -webkit-transform: scale(0.0) }
30 | 50% { -webkit-transform: scale(1.0) }
31 | }
32 |
33 | @keyframes sk-bounce {
34 | 0%, 100% {
35 | transform: scale(0.0);
36 | -webkit-transform: scale(0.0);
37 | } 50% {
38 | transform: scale(1.0);
39 | -webkit-transform: scale(1.0);
40 | }
41 | }
--------------------------------------------------------------------------------
/src/src/app/spinner/spinner.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SpinnerComponent } from './spinner.component';
4 |
5 | describe('SpinnerComponent', () => {
6 | let component: SpinnerComponent;
7 | let fixture: ComponentFixture