react-native - Expo Go 与 Google/Facebook OAuth - auth.expo.io 登录屏幕 - "Not Found"

Question

我正在尝试在 native react 、世博会托管应用程序中设置 google oauth。 我在 Expo Go 中使用我的应用程序时仅遇到以下问题 - 当我创建应用程序的构建时，oauth 流程运行良好。但以这种方式开发很难，我需要能够通过 Expo Go 与非开发团队成员共享工作应用程序。我已经设置了我认为与 expo go google auth documentation 相同的流程。已描述。概述

• 在 Google 控制台中创建一个项目，并为网络应用程序设置一个新的 ClientID。设置授权来源和重定向 uri:

其中 myorg 是拥有该项目的 expo 组织帐户的名称，projectname 与 app 中的 slug 值相同。 json。

• 设置完毕后，我获取了此 oauth 登录方法的客户端 ID 和客户端 key 。

• 在我的应用代码中，我按照说明使用 Google 的 expo-auth-session 库:

import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";

WebBrowser.maybeCompleteAuthSession();

export const OAuthButtons: React.FC = () => {
  const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: "clientId-from-google-console.apps.googleusercontent.com",
    iosClientId: "will set this up eventually",
    androidClientId: "will set this up eventually",
  });

  return; // markup for sign in buttons

}

现在在我的应用程序中，当我单击 google 登录按钮时，我会收到正确打开网络浏览器的提示:

单击该按钮可以正确打开 expo Web 浏览器，但我看到一条“未找到”消息:

有关更多详细信息，当我记录请求时，我得到了一些相当预期的值

"{
  "url": "https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https%3A%2F%2Fauth.expo.io%2FMyProject&client_id=id-from-console.apps.googleusercontent.com&response_type=token&state=5xWG83SsoJ&scope=openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email",
  "responseType": "token",
  "clientId": "client-id-from-console.apps.googleusercontent.com",
  "redirectUri": "https://auth.expo.io/MyProject",
  "scopes": [
    "openid",
    "https://www.googleapis.com/auth/userinfo.profile",
    "https://www.googleapis.com/auth/userinfo.email"
  ],
  "state": "5xWG83SsoJ",
  "extraParams": {},
  "codeChallengeMethod": "S256",
  "usePKCE": false
}"

这里唯一有点意外的值是 redirectUri 和 redirect_uri，它们附加了 /MyProject，即不完全是我在谷歌控制台中的重定向 uri 中输入的内容。它是如何附加到那里的？这可能是问题所在吗？

据我所知，我已按照描述设置了所有内容。这里“未找到”到底是什么？这个特定博览会应用程序的 oauth 页面？我的设置哪里出了问题？

编辑 - 与 Facebook.useAuthRequest 相同的问题

我在 Facebook 提供程序模块上也遇到了同样的问题。类似代码:

  const [facebookRequest, facebookResponse, facebookPromptAsync] =
    Facebook.useAuthRequest({
      clientId: "facebook_app_id",
      responseType: ResponseType.Code,
    });

我还尝试了文章 Use expo-auth-session with Facebook the Easiest Way on iOS/Android 中的建议添加 useProxy: true 属性，但这没有什么区别。

  const [facebookRequest, facebookResponse, facebookPromptAsync] =
    Facebook.useAuthRequest(
      {
        clientId: "facebook_app_id",
        responseType: ResponseType.Code,
      },
      { useProxy: true }
    );

Facebook 登录还会将 expo 浏览器打开到一个显示“未找到”的空白页面

我在这里做错了什么？

Answer 1

您是否在 app.json 中指定了 originalFullName ？如果没有，请尝试添加它，例如 originalFullName: "@your_username/your_app_name"

也许这个 github 问题可以帮助你，https://github.com/expo/expo/issues/19891 .