javascript - Next js AMP amp-onetap-google 不工作

Question

我正在尝试在我的下一个 js amp 页面上添加谷歌一键。该实现基于基于此文档https://developers.google.com/identity/gsi/web/amp/intermediate-iframe的中间 iframe 方法

这是代码

托管中间 iframe 页面

/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;

下一个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;

当我转到 example.com/amp-page 时，我得到一个 iframe，但未呈现 google 登录的电子邮件 ID

不知道我做错了什么，或者我对实现的理解不正确，非常感谢任何帮助，在此先感谢。

标签： javascriptreactjsnext.jsamp-html