I'm currently working on implementing Google sign-in for my web app. I've been following this tutorial here. However, I'm facing an issue where the Google sign-in button is not appearing. I would like the authentication to happen at http://localhost:4200/home instead of http://localhost:4200.
This is how my home HTML looks:
<html>
<head>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="998210766859-ag7cijtb0md9cj6oj9nvqis5kk8g7929.apps.googleusercontent.com">
</head>
<body>
<br>
<a href="#" onclick="signOut();">Sign out</a>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
</body>
</html>
This is the related component.ts file:
import { Component, OnInit } from '@angular/core';
import { BlogService } from '../blog.service';
import { Blogpost } from '../blogpost';
@Component({
selector: 'app-frontpage',
templateUrl: './frontpage.component.html',
styleUrls: ['./frontpage.component.css']
})
export class FrontpageComponent implements OnInit {
public lis = [];
public l1 ="siba";
constructor(private servo:BlogService) { }
ngOnInit(): void {
this.servo.getblogs()
.subscribe(data => this.lis = data);
}
onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
}
The issue I face is that when running the app, the sign-in button does not appear, only the sign-out anchor tag is visible.