Hi, Is it possible to support google one-tap logi...
# ory-network
f
Hi, Is it possible to support google one-tap login with Ory? https://developers.google.com/identity/gsi/web/guides/display-google-one-tap
m
yes! we recently added it to my demo website here: https://www.tohaheavyindustries.com/ the repo is not public, but I can share the integration, its not complex. Will soon add something to the docs, when I can make some time 🙏
Copy code
<script src="<https://accounts.google.com/gsi/client>" async></script>
    <script>
      window.callbackOneTap = function (otp) {
        fetch("<https://auth.tohaheavyindustries.com/self-service/login/browser>", {
          headers: {
            Accept: "application/json",
          },
        })
          .then((response) => response.json())
          .then((flow) => {
            fetch("<https://auth.tohaheavyindustries.com/self-service/login?flow=>" + flow.id, {
              credentials: "include",
              method: "POST",
              headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                method: "oidc",
                provider: "google",
                id_token: otp.credential,
                csrf_token: flow.ui.nodes[2].attributes.value,
              }),
            }).then((response) => {window.location.reload();});
          });
      };
    </script>
    <div
      id="g_id_onload"
      data-client_id="<http://193053703241-asd.apps.googleusercontent.com|193053703241-asd.apps.googleusercontent.com>"
      data-context="signin"
      data-callback="callbackOneTap"
      data-itp_support="true"
      data-use_fedcm_for_prompt="true"
      data-ux_mode="redirect"
      data-login_uri="<https://auth.tohaheavyindustries.com/self-service/login>"
    ></div>
    <!-- data-use_fedcm_for_prompt="true" -->
f
That would be very appreciated!
m
Essentially you need to add this script and the above div. But proper example coming soon 🙏