[FIXED] How to close google one tap login iframe programmatically?

Issue

I have one login form in which I used google one tap login. I am developing this functionality in angular. so when I move into login page, google one tap login iframe will load into page. but actual problem is raised when I move into another page, my google one tap login iframe keep as it is at corner of page.

I already try to remove iframe using jquery, but in this scenario, iframe is removed successfully, but iframe not show again when login page load again through navigation from one page to another page.

So I think that if I fire close event of iframe close button pragmatically, then my problem is solved. but I can't find any official doc. for it.

Is there any way to close that iframe pragmatically?

Solution

Here is answer that I found after more googling.

Delcare it first on component :

declare const googleyolo: any;

I was added that iframe into Login Form like this :

    const hintPromise = googleyolo.hint({
      supportedAuthMethods: [
        "https://accounts.google.com"
      ],
      supportedIdTokenProviders: [
        {
          uri: "https://accounts.google.com",
          clientId: "Your google yolo client id"
        }
      ]
    }).then((credential) => {
          // automatically Call this function after click on one account
      }
    }, (error) => {
      console.log('error', error);
    });

    const bodyObserver = new MutationObserver(mutationsList => {
      mutationsList.forEach((mutation: any) => {
        mutation.addedNodes.forEach((node: any) => {
          if (node.nodeName === 'IFRAME' && node.src.includes('smartlock.google.com/iframe/')) {
            bodyObserver.disconnect();
            node.classList.add('google-inserted-frame');
            node.setAttribute('id', 'googleYoloIframe');
          }
        });
      });
    });
    bodyObserver.observe(window.document.body, {
      childList: true
    });
  }

And here is programmaticaly dismiss that IFrame :

var iframe = $('#googleYoloIframe');
if(iframe.length > 0){
  googleyolo.cancelLastOperation();
}

Answered By - Mayur Kukadiya

Answer Checked By - Pedro (PHPFixing Volunteer)