In the process of building a very simple angular version 14 application, I am working on displaying a 'Sign in with Google button' and incorporating the login functionality.
For information about the new method of Sign in With Google, you can refer to: https://developers.google.com/identity/gsi/web/guides/overview
It is important to note that Google has deprecated the older version of 'Sign in with Google’.
This implementation consists of two components; one component adds the necessary HTML to display the 'Sign in Google' button. However, it requires the script to be dynamically loaded:
https://accounts.google.com/gsi/client
Add the HTML code below to display the Google sign-in button:
login.component.html
<h4>Login works!</h4>
<html>
<body>
<div id="g_id_onload"
data-client_id="xxxxxxxx.apps.googleusercontent.com"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</body>
</html>
The callback function responsible for handling credential responses is defined as follows:
data-callback="handleCredentialResponse"
Next, add the definition of the callback function in the file login.component.ts:
export class LoginComponent implements OnInit {
handleCredentialResponse(response: any){
console.log("handleCredentialResponse called.");
}
//other methods...
}
Issue: Angular is indicating an error related to the callback function handleCredentialResponse, as shown in the provided screenshot. Error Message:
[GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.
https://i.stack.imgur.com/kZghF.png
Question: Is there anyone familiar with how to write the callback function handleCredentialResponse in TypeScript/Angular?
I do not have much experience in frontend development, so any assistance with implementing this would be greatly appreciated.