Estoy tratando de agregar google con un toque en mi próxima página de js amp. La implementación se basa en un enfoque de iframe intermedio basado en este documento https://developers.google.com/identity/gsi/web/amp/intermediate-iframe

este es el codigo

Página Iframe intermedia alojada

 /pages/amp-gtap-iframe.js function AmpGtapIframe(props) { // logic to initialize google gsi , not sure if this is needed but even with this the AMP page one tap does not work const handleGoogleLogin = async (response) => { //logic to handle login }; const initializeGSI = () => { google.accounts.id.initialize({ client_id: GOOGLE_CLIENT_ID, cancel_on_tap_outside: false, callback: handleGoogleLogin, }); }; useEffect(() => { const el = document.createElement('script'); el.setAttribute('src', 'https://accounts.google.com/gsi/client'); el.onload = () => initializeGSI(); document.querySelector('body').appendChild(el); }, []); ///////// return ( <div id="g_id_onload" data-client_id="YOUR_GOOGLE_CLIENT_ID" data-allowed_parent_origin="https://example.com"> </div> ); } export async function getStaticProps(context) { return { props: {}, }; } export default AmpGtapIframe;

La próxima página de js amp

 /pages/amp-page.js export const config = { amp: true, }; function AmpPage(props) { return ( <div> <amp-onetap-google layout="nodisplay" data-src="https://example.com/amp-gtap-iframe" ></amp-onetap-google> </div> ); } export async function getStaticProps(context) { return { props: {}, }; } export default AmpPage;

Cuando voy a example.com/amp-page, obtengo un iframe pero las identificaciones de correo electrónico registradas en Google no se procesan

No estoy seguro de lo que hice mal, o mi comprensión de la implementación es incorrecta, cualquier ayuda es muy apreciada, gracias de antemano.