From 4d853acd9715a441cda366cc087ee5091aea8617 Mon Sep 17 00:00:00 2001 From: gspikehalo <2318002579@qq.com> Date: Wed, 15 Jan 2025 16:13:26 -0800 Subject: [PATCH] use angularx social login --- core/gui/package.json | 1 + core/gui/src/app/app.module.ts | 24 ++++++++ .../app/common/service/user/auth.service.ts | 8 ++- .../service/user/google-auth.service.ts | 55 ++++++------------- .../app/common/service/user/user.service.ts | 1 + .../component/dashboard.component.scss | 6 ++ .../google-login/google-login.component.html | 3 + .../google-login/google-login.component.ts | 18 +++--- core/gui/yarn.lock | 20 +++++++ 9 files changed, 87 insertions(+), 49 deletions(-) create mode 100644 core/gui/src/app/dashboard/component/user/google-login/google-login.component.html diff --git a/core/gui/package.json b/core/gui/package.json index 29a4bb0588e..6208258a3dd 100644 --- a/core/gui/package.json +++ b/core/gui/package.json @@ -21,6 +21,7 @@ }, "private": true, "dependencies": { + "@abacritt/angularx-social-login": "2.1.0", "@ali-hm/angular-tree-component": "12.0.5", "@angular/animations": "16.2.12", "@angular/cdk": "16.2.12", diff --git a/core/gui/src/app/app.module.ts b/core/gui/src/app/app.module.ts index c477a8af9c0..2045ca5af09 100644 --- a/core/gui/src/app/app.module.ts +++ b/core/gui/src/app/app.module.ts @@ -140,6 +140,10 @@ import { LandingPageComponent } from "./hub/component/landing-page/landing-page. import { BrowseSectionComponent } from "./hub/component/browse-section/browse-section.component"; import { BreakpointConditionInputComponent } from "./workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component"; import { CodeDebuggerComponent } from "./workspace/component/code-editor-dialog/code-debugger.component"; +import { SocialLoginModule, SocialAuthServiceConfig, GoogleSigninButtonModule } from "@abacritt/angularx-social-login"; +import { + GoogleLoginProvider, +} from "@abacritt/angularx-social-login"; registerLocaleData(en); @@ -289,6 +293,8 @@ registerLocaleData(en); NzTreeViewModule, NzNoAnimationModule, TreeModule, + SocialLoginModule, + GoogleSigninButtonModule, ], providers: [ provideNzI18n(en_US), @@ -303,6 +309,24 @@ registerLocaleData(en); useClass: BlobErrorHttpInterceptor, multi: true, }, + { + provide: "SocialAuthServiceConfig", + useValue: { + autoLogin: false, + lang: "en", + providers: [ + { + id: GoogleLoginProvider.PROVIDER_ID, + provider: new GoogleLoginProvider( + "127689596526-if7cekkg5fv1kpva65h0cdth2l2sadts.apps.googleusercontent.com" + ), + }, + ], + onError: err => { + console.error(err); + }, + } as SocialAuthServiceConfig, + }, ], bootstrap: [AppComponent], }) diff --git a/core/gui/src/app/common/service/user/auth.service.ts b/core/gui/src/app/common/service/user/auth.service.ts index 71699e3eadd..85f875e6007 100644 --- a/core/gui/src/app/common/service/user/auth.service.ts +++ b/core/gui/src/app/common/service/user/auth.service.ts @@ -61,7 +61,13 @@ export class AuthService { public googleAuth(credential: string): Observable> { return this.http.post>( `${AppSettings.getApiEndpoint()}/${AuthService.GOOGLE_LOGIN_ENDPOINT}`, - `${credential}` + credential, + { + headers: { + "Content-Type": "text/plain", + "Accept": "application/json", + }, + } ); } diff --git a/core/gui/src/app/common/service/user/google-auth.service.ts b/core/gui/src/app/common/service/user/google-auth.service.ts index 124b6aa5b90..001d533b61c 100644 --- a/core/gui/src/app/common/service/user/google-auth.service.ts +++ b/core/gui/src/app/common/service/user/google-auth.service.ts @@ -15,45 +15,22 @@ export class GoogleAuthService { private _googleCredentialResponse = new Subject(); constructor(private http: HttpClient) {} public googleAuthInit(parent: HTMLElement | null) { - this.waitForGoogleScript(2000) - .then(() => { - this.http.get(`${AppSettings.getApiEndpoint()}/auth/google/clientid`, { responseType: "text" }).subscribe({ - next: response => { - window.google.accounts.id.initialize({ - client_id: response, - callback: (auth: CredentialResponse) => { - this._googleCredentialResponse.next(auth); - }, - }); - window.google.accounts.id.renderButton(parent, { width: 200 }); - window.google.accounts.id.prompt(); - }, - error: (err: unknown) => { - console.error(err); - }, - }); - }) - .catch(err => { - console.error(err.message); - }); - } - - private waitForGoogleScript(timeout: number): Promise { - return new Promise((resolve, reject) => { - const interval = 100; - let elapsedTime = 0; - - const checkGoogleScript = setInterval(() => { - elapsedTime += interval; - - if (typeof window.google !== "undefined") { - clearInterval(checkGoogleScript); - resolve(); - } else if (elapsedTime >= timeout) { - clearInterval(checkGoogleScript); - reject(new Error("Google script is not loaded or not available within the timeout period.")); - } - }, interval); + this.http.get(`${AppSettings.getApiEndpoint()}/auth/google/clientid`, { responseType: "text" }).subscribe({ + next: response => { + window.onGoogleLibraryLoad = () => { + window.google.accounts.id.initialize({ + client_id: response, + callback: (auth: CredentialResponse) => { + this._googleCredentialResponse.next(auth); + }, + }); + window.google.accounts.id.renderButton(parent, { width: 200 }); + window.google.accounts.id.prompt(); + }; + }, + error: (err: unknown) => { + console.error(err); + }, }); } diff --git a/core/gui/src/app/common/service/user/user.service.ts b/core/gui/src/app/common/service/user/user.service.ts index 9517e931604..bebc4ed7afb 100644 --- a/core/gui/src/app/common/service/user/user.service.ts +++ b/core/gui/src/app/common/service/user/user.service.ts @@ -53,6 +53,7 @@ export class UserService { } public logout(): void { + console.log("log out!!!!!") this.authService.logout(); this.changeUser(undefined); } diff --git a/core/gui/src/app/dashboard/component/dashboard.component.scss b/core/gui/src/app/dashboard/component/dashboard.component.scss index c51701e4c64..22491879e99 100644 --- a/core/gui/src/app/dashboard/component/dashboard.component.scss +++ b/core/gui/src/app/dashboard/component/dashboard.component.scss @@ -70,3 +70,9 @@ nz-content { .hidden { display: none; } + +#nav { + max-width: 100%; + max-height: 100%; + overflow: hidden; +} diff --git a/core/gui/src/app/dashboard/component/user/google-login/google-login.component.html b/core/gui/src/app/dashboard/component/user/google-login/google-login.component.html new file mode 100644 index 00000000000..b4520afa3f1 --- /dev/null +++ b/core/gui/src/app/dashboard/component/user/google-login/google-login.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/core/gui/src/app/dashboard/component/user/google-login/google-login.component.ts b/core/gui/src/app/dashboard/component/user/google-login/google-login.component.ts index f446a337d1a..e7d666bc2f9 100644 --- a/core/gui/src/app/dashboard/component/user/google-login/google-login.component.ts +++ b/core/gui/src/app/dashboard/component/user/google-login/google-login.component.ts @@ -1,31 +1,31 @@ -import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core"; +import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; import { UserService } from "../../../../common/service/user/user.service"; import { mergeMap } from "rxjs/operators"; import { GoogleAuthService } from "../../../../common/service/user/google-auth.service"; import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy"; import { DASHBOARD_USER_WORKFLOW } from "../../../../app-routing.constant"; import { ActivatedRoute, Router } from "@angular/router"; +import { SocialAuthService } from "@abacritt/angularx-social-login"; @UntilDestroy() @Component({ selector: "texera-google-login", - template: "", + templateUrl: "./google-login.component.html", }) -export class GoogleLoginComponent implements AfterViewInit { +export class GoogleLoginComponent implements OnInit { @ViewChild("googleButton") googleButton!: ElementRef; constructor( private userService: UserService, private route: ActivatedRoute, - private googleAuthService: GoogleAuthService, private router: Router, - private elementRef: ElementRef + private elementRef: ElementRef, + private socialAuthService: SocialAuthService ) {} - ngAfterViewInit(): void { - this.googleAuthService.googleAuthInit(this.elementRef.nativeElement); - this.googleAuthService.googleCredentialResponse + ngOnInit() { + this.socialAuthService.authState .pipe( - mergeMap(res => this.userService.googleLogin(res.credential)), + mergeMap(res => this.userService.googleLogin(res.idToken)), untilDestroyed(this) ) .subscribe(() => { diff --git a/core/gui/yarn.lock b/core/gui/yarn.lock index 5926766289c..8bbe7249723 100644 --- a/core/gui/yarn.lock +++ b/core/gui/yarn.lock @@ -5,6 +5,18 @@ __metadata: version: 8 cacheKey: 10c0 +"@abacritt/angularx-social-login@npm:2.1.0": + version: 2.1.0 + resolution: "@abacritt/angularx-social-login@npm:2.1.0" + dependencies: + tslib: "npm:>=2.5.0" + peerDependencies: + "@angular/common": ">=16.0.0" + "@angular/core": ">=16.0.0" + checksum: 10c0/b1759db0d79fdbc902180aa1974c5aa8db5372a7c4750127bbf5b1d94aadeb1f7bad27a0ac488e98cbe53a600a438a3900b4974009e4a648df5edf583cc5eb0d + languageName: node + linkType: hard + "@adobe/css-tools@npm:^4.0.1": version: 4.4.0 resolution: "@adobe/css-tools@npm:4.4.0" @@ -11066,6 +11078,7 @@ __metadata: version: 0.0.0-use.local resolution: "gui@workspace:." dependencies: + "@abacritt/angularx-social-login": "npm:2.1.0" "@ali-hm/angular-tree-component": "npm:12.0.5" "@angular-builders/custom-webpack": "npm:16.0.1" "@angular-devkit/build-angular": "npm:16.2.12" @@ -17971,6 +17984,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:>=2.5.0": + version: 2.8.1 + resolution: "tslib@npm:2.8.1" + checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62 + languageName: node + linkType: hard + "tslib@npm:^1.6.0, tslib@npm:^1.8.1": version: 1.14.1 resolution: "tslib@npm:1.14.1"