Sign in with google (problem with Firefox)



  • Hi everybody, I want to let users sign in my application with their google accounts.
    I searched on google and I found this example that works fine on all browsers: https://jsfiddle.net/phanan/a4qyysrh/

    So I created a new component called gsigninbutton:

    <template> 
    	 <div ref="signinBtn" class="btn-sign-in">Sign In</div>
    </template>
    
    <script>
    export default {
      name: 'gsigninbutton',
     
      data(){
    	return{
    	}
      },
      mounted () {
    
        window.gapi.load('auth2', () => {
    
          const auth2 = window.gapi.auth2.init({
            client_id: 'myclientid.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin'
          })
          auth2.attachClickHandler(this.$refs.signinBtn, {}, googleUser => {
            
            this.$emit('done', googleUser)
          }, error => console.log(error))
        })
      },
      methods: {	
      }
    }
    </script>
    <style lang="stylus">
    </style>
    

    Instead of myclientid I insert, obviously, the client id that google gave me.
    And included this script in the index.html

    <script src="https://apis.google.com/js/platform.js" async defer ></script>
    

    It works on Chrome,Opera and Safari but on Firefox doesn’t. (sorry for my bad english)



  • Does not work? Please be more specific. Do you get an error? What is the error? Are you sure this is a quasar issue and not a javascript/vue issue?



  • I’m quite sure that is a quasar issue because the example works on firefox. On firefox when I click the button it doesn’t show me anything, In the console there are no errors except three warnings that appear also in the example.

    Content Security Policy: Ignoring “‘unsafe-inline’” within script-src: ‘strict-dynamic’ specified
    Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
    Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified

    So I don’t think that the problem is related to these messages.
    Maybe there is a problem with the attachClickHandler but in the example it works.



  • Your example code does not include anything Quasar, and is mostly raw JavaScript inside a Vue mounted function. There is no reason Quasar would interfere with any of that.
    Furthermore, the error you get suggests Firefox is blocking part of the script from running, due to Firefox security policies. Maybe this can help during development



  • I’ve just tried what you said but it still doesn’t work.
    I still don’t understand why the example works on firefox and my code, that it is almost the same, doesn’t. I have the same warning messages of the example but it doesn’t works.



  • I’ve just noticed that the example you posted requires the following file, not the one you mentioned. Also, putting async/deffer may be a bad idea

    https://apis.google.com/js/api:client.js



  • You are right, in fact I tried all the files mentioned by Google. I’ve been trying for 4 days with all possible combinations.



  • I have the same issue too. It works with Vuejs, not with Quasar.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.