Giter VIP home page Giter VIP logo

Comments (10)

rmartide avatar rmartide commented on June 26, 2024

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.

deb17 avatar deb17 commented on June 26, 2024

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.

rmartide avatar rmartide commented on June 26, 2024

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.

deb17 avatar deb17 commented on June 26, 2024

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.

deb17 avatar deb17 commented on June 26, 2024

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.

rmartide avatar rmartide commented on June 26, 2024

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.

deb17 avatar deb17 commented on June 26, 2024

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.

deb17 avatar deb17 commented on June 26, 2024

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.

rmartide avatar rmartide commented on June 26, 2024

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.

deb17 avatar deb17 commented on June 26, 2024

As the login is working, I am not worried about the results I was getting.

from vue-google-login.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.