0

I'm trying to follow this tutorial https://developers.google.com/identity/sign-in/web/sign-in When i log in, the data-onsuccess doesn't run the onSignIn() fucntion.

i put the script in this Code

ngOnInit() {
    this.loadScript('https://apis.google.com/js/platform.js');
  }
  public loadScript(url: string) {
    const body = document.body as HTMLDivElement;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }

in the same component class I put this inside,

public onSignIn(googleUser) {
    const profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
    console.log('Name: ' + profile.getName());
    console.log('Image URL: ' + profile.getImageUrl());
    console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
    console.log('hi');
  }
  public signOut() {
    const auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then( () => {
      console.log('User signed out.');
    });

the div tag is as it is in the tutorial,

<div class="g-signin2" data-onsuccess="onSignIn"></div>
Dave Matthew
  • 51
  • 5
  • Is the script actually loaded? I don't think it is. Instead of appending it, why not just put that on your index.html? – penleychan Jul 09 '19 at 14:00
  • 1
    @penleychan the issue will still persist. Also, the Google Sign in button will not load if I don't just append it – Dave Matthew Jul 09 '19 at 14:04
  • Seems working for me, just tested out on a new project. Do you have your client id on the meta tag? – penleychan Jul 09 '19 at 14:14
  • @penleychan yes I do... May I see a gist of your project? Namely the component.ts, component.html and maybe the index.html – Dave Matthew Jul 09 '19 at 14:27
  • @penleychan thanks for the source. I have reviewed and made changes to my code. However, I am still unable to retrieve the data of the user (i.e run the onSignIn() code when the user has connected) – Dave Matthew Jul 09 '19 at 14:54
  • Where did you put your function `onSignIn()`? If you put it on your component it will not work because it cannot find that function. You can test this out by putting that `onSignIn()` on your `index.html` and you will see the results. Maybe this https://stackoverflow.com/a/41538969/6736888 will help you for angular purposes. – penleychan Jul 09 '19 at 15:07
  • @penleychan Thanks for the link. I saw this earlier. It did work, however, the button that is generated is a custom one and not the one I was hoping to be generated – Dave Matthew Jul 09 '19 at 15:11
  • I have the same problem and I have learned that JS in component HTML files is ignored. If you put the onSignIn() fcn in index.html, data-onsuccess will be able to find it. However then you have to get the user profile info and auth token into your component somehow. It would be nice if Angular provided a way to hand a callback function in a component to data-onsuccess. – snakedog Feb 13 '20 at 00:47
  • @penleychan I followed the same link at Google side, have tried [all](https://stackoverflow.com/questions/48973621/angular-5-import-google-gapi-witn-types-gapi-auth2-not-working), didn't have any error but not getting a button. May I see your component ts and html please? Thanks – Jeb50 Jul 27 '21 at 00:18

0 Answers0