Fix Google Login button disappearing issue

[GspikeHalo]

Purpose:

The current Google login button occasionally disappears. The reason is that the Google script is loaded statically, meaning it is automatically loaded via the <script> tag when the page loads. This approach has a potential issue: if we want to use the onGoogleLibraryLoad callback function to confirm that the script has successfully loaded, we must ensure that the callback is defined before the script finishes loading. Otherwise, when the script completes loading, Google will check whether onGoogleLibraryLoad is defined. If it is not defined, the script load notification will be missed, and the Google login initialization logic will not execute.
fix #3155

Changes:

1. To reduce the maintenance cost caused by frequent updates to the Google official API, we chose to implement Google login using the third-party library angularx-social-login instead of directly relying on the Google official API.
2. Added the dependency @abacritt/angularx-social-login (version 2.1.0). Please use yarn install to install it.
3. Additionally, a test file for the Google Login component has been added to verify whether the component initializes correctly after the script is successfully loaded.

Demos:

Before:

before.mp4

After:

after.mp4

[kunwp1]

It would be better to set up a Promise to guarantee that the window.onGoogleLibraryLoad function is defined before the Google script attempts to call it. In the current implementation, having two separate window.onGoogleLibraryLoad function calls within the same file feels inconsistent.

[GspikeHalo]

It would be better to set up a Promise to guarantee that the window.onGoogleLibraryLoad function is defined before the Google script attempts to call it. In the current implementation, having two separate window.onGoogleLibraryLoad function calls within the same file feels inconsistent.

I made some mistakes in my previous description. Currently, the Google script is loaded statically, meaning it is automatically loaded via the <script> tag when the page loads. This approach has a potential issue: if we want to use the onGoogleLibraryLoad callback function to confirm that the script has successfully loaded, we must ensure that the callback is defined before the script finishes loading. Otherwise, when the script completes loading, Google will check whether onGoogleLibraryLoad is defined. If it is not defined, the script load notification will be missed, and the Google login initialization logic will not execute.

To address this timing issue, I decided to stop relying on the onGoogleLibraryLoad callback. Instead, I will directly check the global variable window.google to determine if the script has finished loading. This approach effectively avoids problems caused by defining onGoogleLibraryLoad after the script has already loaded. I will also update the PR description accordingly.

[kunwp1]

Looks better than the previous version. Please add a comment that timeout is in milliseconds and also add a unit test for the following scenario:

"should initialize Google login button when script is loaded"

[kunwp1]

@aglinxinyuan Adding you to be a second reviewer for this PR since you are familiar with the Google Login feature.

[aglinxinyuan]

The code itself seems fine to me, but maintaining such a simple function might require significant effort on our end. For instance, we would need to monitor any API changes from Google's side and ensure it's always up to date. It might be worth considering using a third-party library instead.
Maybe try this: https://www.npmjs.com/package/@abacritt/angularx-social-login

[aglinxinyuan]

LGTM!

[aglinxinyuan]

Is there any reason to disable oneTap?

[GspikeHalo]

I found that when I enable One Tap, a message 'PR' appears in my console.

I noticed that if I disable it, the message does not appear. If One Tap is necessary, I can try to see if I can eliminate this issue.