Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

192
Views
Need Help in creating Google login HTML CSS JAVASCRIP

I need Help in Creating Google sign in on HTML CSS JAVACRIPT.

This is my HTML CODE -

<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>

This is what I get when I click on open with live server -

1

  • After I click on sign in button it gives me This error

enter image description here

And on Google cloud platform, for the Authorised JavaScript origins url I wrote https://localhost:5500 I'm not sure If this is correct URL Or not.

enter image description here

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Try to regenerate the client Id and clear your cache or Here I have provided the google authentication I have used.It worked for me

App module:

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);
  }




}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!