old-portfolio/frontend-hideyoshi.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[0.0.2] Adds Google and Github OAuth2 Login

Browse Source 
Implements integration with the Backend API feature of OAuth2 Login with Google and Github.
This commit is contained in:
Vitor Hideyoshi
2022-11-10 00:49:03 -03:00
parent 835c4d0cc4
commit 64ec23f2c1
19 changed files with 1596 additions and 1136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app-router.module.ts
View File

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CallbackComponent } from './header/header-popup/callback/callback.component';
const routes: Routes = [
{
@@ -12,6 +13,10 @@ const routes: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'callback',
component: CallbackComponent
}
]

2
src/app/app.module.ts
View File

@@ -25,8 +25,6 @@ import { environment } from '../environments/environment';
FontAwesomeModule,
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: environment.production,
// Register the ServiceWorker as soon as the application is stable
// or after 30 seconds (whichever comes first).
registrationStrategy: 'registerWhenStable:30000'
})
],

0
src/app/header/header-popup/callback/callback.component.css Normal file
View File

1
src/app/header/header-popup/callback/callback.component.html Normal file
View File

@@ -0,0 +1 @@
<p>callback works!</p>

23
src/app/header/header-popup/callback/callback.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CallbackComponent } from './callback.component';
describe('CallbackComponent', () => {
let component: CallbackComponent;
let fixture: ComponentFixture<CallbackComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CallbackComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(CallbackComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

41
src/app/header/header-popup/callback/callback.component.ts Normal file
View File

@@ -0,0 +1,41 @@
import { ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/shared/auth/auth.service';
@Component({
selector: 'app-callback',
templateUrl: './callback.component.html',
styleUrls: ['./callback.component.css']
})
export class CallbackComponent implements OnInit {
constructor(private route: ActivatedRoute,
private router: Router,
private authService: AuthService) { }
ngOnInit(): void {
this.route.queryParams.subscribe(p => {
let auth: 'google' | 'github' = p['auth'];
if (auth === 'google') {
this.loginGoogle(p);
} else if (auth === 'github') {
this.loginGithub(p);
}
this.router.navigate(['/home'])
})
}
private loginGoogle(p: any) {
this.authService.loginGoogleUser(p)
}
private loginGithub(p: any) {
this.authService.loginGithubUser(p)
}
}

7
src/app/header/header-popup/login/login.component.css
View File

@@ -38,6 +38,13 @@
display: flex;
}
.oauth-button {
height: 50px;
width: 250px;
border: #ffffff;
background-color: #ffffff;
}
.separator-line {
justify-content: center;
align-content: center;

17
src/app/header/header-popup/login/login.component.html
View File

@@ -36,9 +36,20 @@
<div class="line"></div>
</div>
<div class="col-lg-6 authentication-body">
<p>Google</p>
<p>Linkedin</p>
<p>Github</p>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGoogleLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="google-logo"></mat-icon>
Login With Google
</button>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGithubLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="github-logo"></mat-icon>
Login With Github
</button>
</div>
</div>
</div>

46
src/app/header/header-popup/login/login.component.ts
View File

@@ -1,5 +1,7 @@
import { AfterContentInit, AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
import { Subscription } from 'rxjs';
import { AuthService } from 'src/app/shared/auth/auth.service';
@@ -8,6 +10,10 @@ import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
import UserChecker from 'src/app/shared/model/user/user.checker';
import { User } from 'src/app/shared/model/user/user.model';
const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
@@ -16,13 +22,13 @@ import { User } from 'src/app/shared/model/user/user.model';
export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
@Input()
state: boolean = false;
state: boolean = false;
@Input()
ignoreClickOutside!: HTMLDivElement[];
ignoreClickOutside!: HTMLDivElement[];
@Output()
stateChange = new EventEmitter<boolean>();
stateChange = new EventEmitter<boolean>();
popupState = false;
@@ -30,7 +36,7 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
authSubject!: Subscription;
errorMessage!: string|null;
errorMessage!: string | null;
_userIcon = faUser;
@@ -38,13 +44,23 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
constructor(
private authService: AuthService,
private changeDetectorRef: ChangeDetectorRef
) { }
private changeDetectorRef: ChangeDetectorRef,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
this.matIconRegistry.addSvgIcon(
"google-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
);
this.matIconRegistry.addSvgIcon(
"github-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
);
}
ngOnInit(): void {
this.loginForm = new FormGroup({
'username' : new FormControl(null, [Validators.required]),
'password' : new FormControl(null, [Validators.required])
'username': new FormControl(null, [Validators.required]),
'password': new FormControl(null, [Validators.required])
});
this.errorMessage = null;
this.authSubject = this.authService.authSubject.subscribe(
@@ -73,10 +89,18 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
password: this.loginForm.controls['password'].value
}
this.authService.login(user);
}
private validateLogin(res: User|HttpError|null) {
onGoogleLogin() {
this.authService.googleLogin();
}
onGithubLogin() {
this.authService.githubLogin();
}
private validateLogin(res: User | HttpError | null) {
if (res && UserChecker.test(res)) {
this.closePopup()
} if (HttpErrorChecker.test(res)) {

8
src/app/header/header-popup/signup/signup.component.css
View File

@@ -42,6 +42,14 @@
display: flex;
}
.oauth-button {
height: 50px;
width: 250px;
border: #ffffff;
background-color: #ffffff;
}
.separator-line {
justify-content: center;
align-content: center;

17
src/app/header/header-popup/signup/signup.component.html
View File

@@ -52,9 +52,20 @@
<div class="line"></div>
</div>
<div class="col-lg-6 auth-body auth-body-links">
<p>Google</p>
<p>Linkedin</p>
<p>Github</p>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGoogleLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="google-logo"></mat-icon>
Login With Google
</button>
<button mat-button
class="oauth-button d-flex justify-content-center align-items-center"
(click)="onGithubLogin()">
<mat-icon style="width: 50px; height:30px"
svgIcon="github-logo"></mat-icon>
Login With Github
</button>
</div>
</div>
</div>

39
src/app/header/header-popup/signup/signup.component.ts
View File

@@ -1,5 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { faEnvelope, faFingerprint, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
import { Subscription } from 'rxjs';
import { AuthService } from 'src/app/shared/auth/auth.service';
@@ -8,6 +10,10 @@ import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
import UserChecker from 'src/app/shared/model/user/user.checker';
import { User } from 'src/app/shared/model/user/user.model';
const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
@@ -16,19 +22,19 @@ import { User } from 'src/app/shared/model/user/user.model';
export class SignupComponent implements OnInit {
@Input()
state: boolean = false;
state: boolean = false;
@Input()
ignoreClickOutside!: HTMLDivElement[];
ignoreClickOutside!: HTMLDivElement[];
@Output()
stateChange = new EventEmitter<boolean>();
stateChange = new EventEmitter<boolean>();
signupForm!: FormGroup;
authSubject!: Subscription;
errorMessage!: string|null;
errorMessage!: string | null;
_fullnameIcon = faFingerprint;
@@ -38,7 +44,18 @@ export class SignupComponent implements OnInit {
_passwordIcon = faLock;
constructor(private authService: AuthService) { }
constructor(private authService: AuthService,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
this.matIconRegistry.addSvgIcon(
"google-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
);
this.matIconRegistry.addSvgIcon(
"github-logo",
this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
);
}
ngOnInit(): void {
this.signupForm = new FormGroup({
@@ -63,7 +80,7 @@ export class SignupComponent implements OnInit {
onSignUp() {
let user: User = {
fullname: this.signupForm.controls['fullname'].value,
name: this.signupForm.controls['fullname'].value,
email: this.signupForm.controls['email'].value,
username: this.signupForm.controls['username'].value,
password: this.signupForm.controls['password'].value
@@ -71,7 +88,15 @@ export class SignupComponent implements OnInit {
this.authService.signup(user);
}
private validateSignup(res: User|HttpError|null) {
onGoogleLogin() {
this.authService.googleLogin();
}
onGithubLogin() {
this.authService.githubLogin();
}
private validateSignup(res: User | HttpError | null) {
if (res && UserChecker.test(res)) {
this.closePopup()
} if (HttpErrorChecker.test(res)) {

6
src/app/header/header.module.ts
View File

@@ -13,6 +13,8 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { LoginComponent } from './header-popup/login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SignupComponent } from './header-popup/signup/signup.component';
import { CallbackComponent } from './header-popup/callback/callback.component';
import {MatIconModule} from '@angular/material/icon';
@@ -24,7 +26,8 @@ import { SignupComponent } from './header-popup/signup/signup.component';
UserSliderComponent,
HeaderDropdownComponent,
LoginComponent,
SignupComponent
SignupComponent,
CallbackComponent
],
imports: [
CommonModule,
@@ -33,6 +36,7 @@ import { SignupComponent } from './header-popup/signup/signup.component';
FontAwesomeModule,
FormsModule,
ReactiveFormsModule,
MatIconModule,
SharedModule
], exports: [
HeaderComponent,

67
src/app/shared/auth/auth.service.ts
View File

@@ -1,7 +1,8 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { first, firstValueFrom, Observable, Subject, take } from 'rxjs';
import { environment } from 'src/environments/environment';
import { param } from 'ts-interface-checker';
import { HttpError } from '../model/httpError/httpError.model';
import { Token } from '../model/token/token.model';
import { User } from '../model/user/user.model';
@@ -13,7 +14,7 @@ export class AuthService {
private userAuthenticated!: User;
authSubject = new Subject<User|HttpError|null>();
authSubject = new Subject<User | HttpError | null>();
readonly BACKEND_PATH = environment.backendPath;
@@ -22,10 +23,26 @@ export class AuthService {
login(userAuthAtempt: User): void {
this.validateUser(this.loginUser(userAuthAtempt));
}
googleLogin() {
window.open(this.BACKEND_PATH + '/oauth2/authorization/google', '_self');
}
githubLogin() {
window.open(this.BACKEND_PATH + '/oauth2/authorization/github', '_self');
}
loginGoogleUser(p: any): void {
this.validateUser(this.fetchGoogleOAuthToken(p))
}
loginGithubUser(p: any): void {
this.validateUser(this.fetchGithubOAuthToken(p))
}
signup(userAuthAtempt: User): void {
this.validateUser(this.createUser(userAuthAtempt));
}
autoLogin(): void {
@@ -39,8 +56,8 @@ export class AuthService {
async getUserAccessToken(): Promise<Token | undefined> {
if (this.userAuthenticated) {
if ((!this.userAuthenticated.accessToken && this.refreshAccessToken ) ||
(this.userAuthenticated.accessToken && this.userAuthenticated.accessToken.expirationDate < Date.now())) {
if ((!this.userAuthenticated.accessToken && this.refreshAccessToken) ||
(this.userAuthenticated.accessToken && this.userAuthenticated.accessToken.expirationDate < Date.now())) {
this.userAuthenticated = <User>(await this.refreshAccessToken());
}
return this.userAuthenticated.accessToken;
@@ -66,6 +83,44 @@ export class AuthService {
)
}
private fetchGoogleOAuthToken(p: any): Observable<User|any> {
let params = new HttpParams(
{
fromObject: p
}
);
return this.http.get<User>(
this.BACKEND_PATH + '/login/oauth2/code/google',
{
withCredentials: true,
params: params
},
).pipe(
first()
);
}
private fetchGithubOAuthToken(p: any): Observable<User|any> {
let params = new HttpParams(
{
fromObject: p
}
);
return this.http.get<User>(
this.BACKEND_PATH + '/login/oauth2/code/github',
{
withCredentials: true,
params: params
},
).pipe(
first()
);
}
private createUser(newUser: User) {
return this.http.post<User>(
this.BACKEND_PATH + "/user/signup",
@@ -114,5 +169,5 @@ export class AuthService {
take(1)
);
}
}

2
src/app/shared/model/user/user.model.ts
View File

@@ -2,7 +2,7 @@ import { Token } from "../token/token.model";
export interface User {
id?: number,
fullname?: string,
name?: string,
email?: string,
username: string,
password?: string,