0

我正在努力解决 Google 登录 (GSI) 库的问题，该库在单击“使用 Google 登录”后拒绝允许非测试环境中的用户继续操作。这在本地工作，我有 localhost/localhost 的变体，并添加了一个端口Authorized JavaScript origins。我还将面向用户的 URL 添加到Authorized JavaScript origins，但当它转到 时，Google 似乎无法识别引用域accounts.google.com/gsi。

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

我试过的：

  • 从头开始重新创建 OAuth2 客户端 ID
  • 从我的浏览器中清除 cookie/缓存数据
  • 使用其他浏览器
  • 创建一个全新的 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 App Service 是否存在一些未在任何地方记录的细微差别/怪异之处？

4

1 回答 1

0

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

于 2022-01-07T14:01:52.033 回答