Comments (10)
Hello,
Mmm, maybe in your case since you are using it in a modal you need to try using the loader plugin. This way the script will be loaded before the modal appears.
Now that I think about it I have to do some clarifications regarding the difference between using the loader plugin and the normal approach.
Try it and tell me how it goes.
from vue-google-login.
Thanks for the reply.
How do I make the GoogleLogin
button component use the loader plugin? Is it enough to just import and register the plugin in main.js
?
from vue-google-login.
Yes, just import and Vue.use with the parameters that you want (at least the clientId).
I have to do some changes so if you use the loader plugin you don't need to add the clientId to the button parameters as well, I don't remember if it's enforced, I need to check it.
from vue-google-login.
Your solution seems to have worked. Now the sign in button is appearing consistently, though the site is taking more time to load. I will close the issue after some more tests. Thanks a lot for your prompt support!
from vue-google-login.
The problem is occurring even if I use the loader plugin. (The slow page load that I mentioned above was because of my link speed). To further test, I duplicated the sign in button outside the modal on my index page, but the problem was still occurring - the button was not rendering even outside the modal. Additionally, the cookie messages were not appearing in the (chrome) console like they do when everything is fine. On the network tab, the 'idpiframe.js' entry is missing (it is present when the button appears). Could it be a problem with the google server and not my app? Or else, why wouldn't the button show up in a typical use case?
from vue-google-login.
The button renders after the script loads since it's getting rendered by google. In the case of this component instead of the user adding the script url to the head the component does it automatically. But to be honest I don't know what could cause the button to disappear, it is just a div with an id, the styling and functionality is controlled by google.
Did you try with the normal button? Just to test if when the rendered button disappears the login functionality remains.
I wish I could be more helpful, one thing you can do is check if the script is loaded in the sources tab and also just in case check if there's a node in the head with the id auth2_script_id
. Besides that I'm out of ideas
from vue-google-login.
I checked that there is a script in the head tag with id auth2_script_id
and there is the platform.js
script loaded in the sources tab, even when the button does not appear. I am yet to test whether the login functionality remains when button does not render. Meanwhile, I noticed that this problem is happening only on chrome - I could not reproduce it even once on firefox.
from vue-google-login.
I tried with the normal button, without google rendering it. The login works. I guess I will proceed with this and not use renderparams.
from vue-google-login.
I will try to use the component in a modal with bootstrap-vue to see if I can replicate it, the weirdest part is that it only happened to you in chrome, usually is the opposite; I'm quite intrigued.
from vue-google-login.
As the login is working, I am not worried about the results I was getting.
from vue-google-login.
Related Issues (20)
- option to add scope HOT 2
- How to set restriced uris? HOT 3
- Will SameSite cookie changes break this plugin? HOT 3
- idpiframe_initialization_failed error HOT 4
- Button fails to render after users signs out
- Type error with Vue 3 HOT 5
- Import LoaderPlugin statement returns undefined object
- grantOfflineAccess not from 'Auth api'
- Can't read access_token inside onSuccess anymore HOT 1
- How to use it in nuxt with SSR?
- Can't able to use for loop inside onsuccess method . HOT 1
- Does not get the user data in a specified form i.e the response get changed after some time
- Localization
- click signin again have popup but no show select acount
- Error about rendering the component
- Google is deprecating the current library - need to migrate to the new one HOT 1
- How can I access the authorization code?
- How to get refresh token?
- On page load button flickers from one design to another
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-google-login.