OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How bind angular component function to google signin button

  • Thread starter Thread starter Jose
  • Start date Start date
J

Jose

Guest
I'm new to angular so please be kind. I have been struggling to figure out how to connect the google signin callback button to my angular component. I'm trying to receive the OAuth token on the client-side in order to send to my back-end but I am unable to get a hold of the response inside my angular component. The obstacle I'm encountering is the inability to have the google button call my angular component function.

Based on the latest google signin api in order to add a google OAuth button via html you need to do the following. I attempted to do this via their javascript library but wasn't successful.

Code:
<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script> 
    function handleCredentialResponse(e) {
      //e.credential contains the JWT token
    }
    </script>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-callback="handleCredentialResponse">
    </div>
    <div class="g_id_signin" data-type="standard"></div>
  </body>
</html>

I wanted to encapsulate this into a component and get that function called in my component.ts file. So I did the following with onGoogleSignin being a component function.

Code:
<script src="https://accounts.google.com/gsi/client"></script>
<div    id="g_id_onload"
        [attr.data-client_id]="google_login_id"
        [attr.data-callback]="onGoogleSignIn">
</div>
<div    class="g_id_signin" 
        [attr.data-text]="buttonTxt" 
        [attr.data-theme]="theme"
></div>

The project compiles and runs but when I run it I get the following issue in the console

Code:
[GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.

The properties bind no problem but it's the function that doesn't work. So the only hack I have come up with is to put the following in the index.html file

Code:
  <script>
    function onGoogleSignIn(e) {
       console.log(e);
      window.authRef.zone.run(() => { window.authRef.googleSigninFunction(e); });
    }
  </script>

Modifying the component.html to not bind to the component function like below:

Code:
<div    id="g_id_onload"
        [attr.data-client_id]="google_login_id"
        data-callback="onGoogleSignIn">
</div>

And then put the following into the constructor of my component:

Code:
  constructor(
    private ngZone: NgZone)  {
    window['authRef'] = { component: this, zone: this.ngZone, 
      googleSigninFunction: (e:any) => this.onGoogleSignin(e), }; 
  }

All of this works but it requires to have a dependency on my component to be outside of my component which is not good practice. I know this is simply because I lack some basic understanding of angular.

Any help would be greatly appreciated

UPDATE:

I did add code on OnInit to inject the code into the DOM programmatically so that it will exist when google needs to bind to it. This allows me to not have to manually add the code into index.html but I'm sure there is a more elegant way to do this.

<p>I'm new to angular so please be kind. I have been struggling to figure out how to connect the google signin callback button to my angular component. I'm trying to receive the OAuth token on the client-side in order to send to my back-end but I am unable to get a hold of the response inside my angular component. The obstacle I'm encountering is the inability to have the google button call my angular component function.</p>
<p>Based on the latest google signin api in order to add a google OAuth button via html you need to do the following. I attempted to do this via their javascript library but wasn't successful.</p>
<pre><code><html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(e) {
//e.credential contains the JWT token
}
</script>
<div id="g_id_onload"
data-client_id="YOUR_CLIENT_ID"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin" data-type="standard"></div>
</body>
</html>
</code></pre>
<p>I wanted to encapsulate this into a component and get that function called in my component.ts file. So I did the following with <code>onGoogleSignin</code> being a component function.</p>
<pre><code><script src="https://accounts.google.com/gsi/client"></script>
<div id="g_id_onload"
[attr.data-client_id]="google_login_id"
[attr.data-callback]="onGoogleSignIn">
</div>
<div class="g_id_signin"
[attr.data-text]="buttonTxt"
[attr.data-theme]="theme"
></div>
</code></pre>
<p>The project compiles and runs but when I run it I get the following issue in the console</p>
<pre><code>[GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.
</code></pre>
<p>The properties bind no problem but it's the function that doesn't work. So the only hack I have come up with is to put the following in the index.html file</p>
<pre><code> <script>
function onGoogleSignIn(e) {
console.log(e);
window.authRef.zone.run(() => { window.authRef.googleSigninFunction(e); });
}
</script>
</code></pre>
<p>Modifying the component.html to not bind to the component function like below:</p>
<pre><code><div id="g_id_onload"
[attr.data-client_id]="google_login_id"
data-callback="onGoogleSignIn">
</div>
</code></pre>
<p>And then put the following into the constructor of my component:</p>
<pre><code> constructor(
private ngZone: NgZone) {
window['authRef'] = { component: this, zone: this.ngZone,
googleSigninFunction: (e:any) => this.onGoogleSignin(e), };
}
</code></pre>
<p>All of this works but it requires to have a dependency on my component to be outside of my component which is not good practice. I know this is simply because I lack some basic understanding of angular.</p>
<p>Any help would be greatly appreciated</p>
<p><strong>UPDATE:</strong></p>
<p>I did add code on OnInit to inject the code into the DOM programmatically so that it will exist when google needs to bind to it. This allows me to not have to manually add the code into index.html but I'm sure there is a more elegant way to do this.</p>
 

Latest posts

ن
Replies
0
Views
1
نعمان منذر محمود الجميلي
ن
Top