Google 一次点击 - "The given origin is not allowed for the given client ID" 在 Azure 应用服务 w/custom 域上

Question

我正在努力解决 Google 登录 (GSI) 库的问题，它拒绝让非测试环境中的用户在单击“使用 Google”。 这在本地有效，我有 localhost/variations 个本地主机，其中一个端口添加到 Authorized JavaScript origins。我还将面向用户的 URL 添加到 Authorized JavaScript origins，但 Google 在转到 accounts.google.com/gsi.

时似乎无法识别引用域

我已经尝试在本地调试该网页以弄清楚它认为给定来源是什么。我在 Google 的 gsi 缩小代码中找到了对 client_origin 属性的引用，但是当值实际被评估时我无法得到任何地方。

我尝试过的：

从头开始重新创建 OAuth2 客户端 ID
正在从我的浏览器中清除 cookies/cache 数据
使用其他浏览器
正在创建一个全新的 Google Cloud Platform 项目

其他上下文：

我是运行 Azure 应用服务上的 Next.js 应用
它托管在自定义域上，尽管它似乎也不适用于提供的 Azure 域
这在本地有效

代码：

import { Fragment, MutableRefObject, useEffect, useRef } from "react";
import getPublicRuntimeConfig from "lib/utils/get_public_runtime_config";
import Head from "next/head";
import Script from "next/script";

const { publicRuntimeConfig } = getPublicRuntimeConfig();

function handleGsiScriptLoad({
  context = "signin",
  signonButtonRef
}: {
  context?: string;
  signonButtonRef: MutableRefObject<HTMLDivElement>;
}) {
  google.accounts.id.initialize({
    client_id: publicRuntimeConfig.GOOGLE_SSO_CLIENT_ID,
    context,
    login_uri: publicRuntimeConfig.GAUTH_ENDPOINT,
    // Necessary for the cookie to be accessible on the backend (subdomain)
    state_cookie_domain: new URL(publicRuntimeConfig.MENTRA_PLATFORM_URL).host,
    ux_mode: "redirect"
  });
  google.accounts.id.renderButton(signonButtonRef.current, {
    size: "large",
    text: context === "signup" ? "signup_with" : "signin_with",
    theme: "outline"
  });
}

interface Props {
  context?: "signup" | "signin";
}

const GoogleSignon = (props: Props) => {
  const signonButtonRef = useRef<HTMLDivElement>();
  useEffect(() => {
    handleGsiScriptLoad({ context: props.context, signonButtonRef });
  }, [props.context]);
  return (
    <Fragment>
      <Head>
        {/* Necessary to set the correct origin URL from Azure */}
        <meta name="referrer" content="no-referrer-when-downgrade" />
      </Head>
      <Script
        onLoad={handleGsiScriptLoad}
        src="https://accounts.google.com/gsi/client"
        strategy="beforeInteractive"
      />
      <div ref={signonButtonRef} />
    </Fragment>
  );
};

export default GoogleSignon;

我是否错过了阻止 Google 登录识别我的域的某些步骤？ Azure 应用服务是否有一些 nuance/weirdness 没有在任何地方记录？

Answer 1

我想通了 - 我还需要提供 login_uri 作为授权来源，即使它实际上并非源自 URL。这在任何地方都没有记录，但这是我的本地环境和生产环境之间的唯一区别。 Google 现在可以按预期登录了！

Google 一次点击 - "The given origin is not allowed for the given client ID" 在 Azure 应用服务 w/custom 域上

Google One Tap - "The given origin is not allowed for the given client ID" on Azure App Service w/custom domain

javascript

google-cloud-platform

azure-web-app-service

google-signin

google-one-tap