All geek questions in one place

Google API Login Button: Basic.

I am working on adding a Google login button to a website. Google docs offers two options: the "base" button:

https://developers.google.com/identity/sign-in/web/sign-in

and the "custom" button with signin2.render() :

https://developers.google.com/identity/sign-in/web/build-button

The problem I am facing is that two buttons exhibit different behavior. If I log in using any button, the "title" button changes from "Sign In" to "Signed In" to reflect the login status. However, if I am refreshing the page now, then the main button retains the “Signature” heading, and the user button changes its heading to “Login”, suggesting (incorrectly) that the login status has changed through the refresh page.

If I manually check the login status after updating in the browser console by running:

 auth = gapi.auth2.getAuthInstance() auth.isSignedIn.get()

I get true as a return, showing that the update did not really change the login status, as opposed to changing the name of the button.

So my question is: how can I make a custom button behave like a basic button so that its name does not change during the update? Another (related, I guess) behavior of the base button that I like is that the "onsuccess" call is called every time the page loads (if the user is registered), while the user button does not. Therefore, I would also like to change this behavior on a custom button so that it matches the main button. Any suggestions would be greatly appreciated!

The parameters I pass are as follows:

 function renderButton() { gapi.signin2.render('mybutton', { 'scope': 'profile email', 'width': 125, 'height': 40, 'longtitle': false, 'theme': 'light', 'onsuccess': onSuccess, 'onfailure': onFailure }); }
+6
source share
1 answer

Could you provide the options you pass to the button? Could you confirm that there are no errors in the JS console and there are no 400/403/404 / 4xx requests?

I tested this functionality using the following code and it seems to work fine (you should replace YOUR_CLIENT_ID with your actual client_id).

 <head> <meta name="google-signin-client_id" content="YOUR_CLIENT_ID"> </head> <body> <script> function onSuccess(googleUser) { console.log('onSuccess!'); } function onCustomSuccess(googleUser) { console.log('onCustomSignIn!'); } function signOut() { var auth2 = gapi.auth2.getAuthInstance(); auth2.signOut().then(function () { console.log('User signed out.'); }); } function onLoad() { gapi.signin2.render('custom_signin_button', { 'onsuccess': onCustomSuccess }); } </script> <div class="g-signin2" data-onsuccess="onSuccess"></div> <div id="custom_signin_button"></div> <a href="#" onclick="signOut();">Sign out</a> <script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script> </body> </html>

Edit: Declaring the base area as the header meta tag is the best solution.

 <meta name="google-signin-scope" content="profile email">
+7
source

Source: https://habr.com/ru/post/985798/

More articles:


All Articles