Necesito ayuda para crear el inicio de sesión de Google en HTML CSS JAVACRIPT.
Este es mi CÓDIGO HTML -
<html> <head> <title>Google Auth Demo</title> <meta name="google-signin-client_id" content="111111-not-real"> <script src ="https://apis.google.com/js/platform.js" async defer></script> </head> <body> <h1>Welcome to the Demo</h1> <div class="g-signin2"></div> </body> </html>Esto es lo que obtengo cuando hago clic en abrir con servidor en vivo:


Y en la plataforma en la nube de Google, para la URL de orígenes de JavaScript autorizados, escribí https://localhost:5500. No estoy seguro de si esta es la URL correcta o no.

Intente regenerar la identificación del cliente y borre su caché o Aquí proporcioné la autenticación de Google que he usado. Funcionó para mí
Módulo de aplicación:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { FormsModule } from '@angular/forms'; import { AuthComponent } from './auth/auth.component'; import { ReactiveFormsModule } from '@angular/forms'; import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login'; import { GoogleLoginProvider } from 'angularx-social-login'; import { NavbarComponent } from './navbar/navbar.component'; import { MyChannelComponent } from './my-channel/my-channel.component'; @NgModule({ declarations: [ AppComponent, HomeComponent, AuthComponent, NavbarComponent, MyChannelComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule, ReactiveFormsModule, SocialLoginModule ], providers: [ { provide: 'SocialAuthServiceConfig', useValue: { autoLogin: false, providers: [ { id: GoogleLoginProvider.PROVIDER_ID, provider: new GoogleLoginProvider( '271611125754-vr0512mqoes0jrmhttei64vvrehragcj.apps.googleusercontent.com' ) } ] } as SocialAuthServiceConfig, } ], bootstrap: [AppComponent] }) export class AppModule { }Auth.ts
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { GoogleLoginProvider, SocialAuthService, SocialUser } from 'angularx-social-login'; import { YoutubeService } from '../youtube.service'; @Component({ selector: 'app-auth', templateUrl: './auth.component.html', styleUrls: ['./auth.component.css'] }) export class AuthComponent implements OnInit { loginForm!: FormGroup; public socialUser!: SocialUser; public username:any; isLoggedin: boolean=false; subscription:any; constructor(private formBuilder: FormBuilder, private socialAuthService: SocialAuthService,private service:YoutubeService) { } ngOnInit(): void { this.loginForm = this.formBuilder.group({ email: ['', Validators.required], password: ['', Validators.required] }); this.socialAuthService.authState.subscribe((user) => { this.socialUser = user; this.username=this.socialUser.firstName; this.isLoggedin = (user != null); console.log(this.socialUser); //this.GetChannel(this.username); }); } loginWithGoogle(): void { this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID); } }