使用openAuthSessionAsync遇阻：Google OAuth登录后如何关闭浏览器？

我正在开发一款React Native应用，使用Google OAuth实现用户认证，通过Expo AuthSession API的openAuthSessionAsync方法处理认证流程。登录流程能正常运行，也能成功获取会话ID，但登录完成后不知道怎么关闭浏览器窗口。

相关代码片段：

const signIn = async () => {
    const frontEndUrl = getBaseUrl();
    const result = await Browser.openAuthSessionAsync(
        `${frontEndUrl}/auth/google?mobile=true`,
        `${frontEndUrl}`
    );
    console.log(result.type);

    if (result.type !== "success") return;
    const url = Linking.parse(result.url);
    const sessionID = url.queryParams?.session_id?.toString() ?? null;
    if (!sessionID) return;
    await SecureStore.setItemAsync("session_id", sessionID);
};

我遵循了《Lucia Auth Guidebook on GitHub OAuth with Expo》的指南，但该指南没提到认证后如何关闭浏览器，也没解决无结果返回的问题。

遇到的问题：

• 浏览器窗口未关闭：登录成功后，浏览器窗口仍保持打开状态。
• 无结果返回：openAuthSessionAsync返回的result对象不含任何数据，导致无法继续认证流程。

我已经查阅了Expo和React Native文档，但没找到解决方案。

请问能否通过openAuthSessionAsync在登录成功后程序化关闭浏览器窗口？或者如何确保该方法返回预期结果以继续认证流程？

额外信息：

• React Native版本：0.74.2
• Expo SDK版本：51
• 平台：Android
• GitHub仓库：RecordScratch

解决方案 #

1. 正确配置回调URL，触发自动关闭与结果返回

openAuthSessionAsync的核心逻辑是通过匹配回调URL来关闭浏览器并返回认证结果，这是最可靠的方式：

• 为Expo Android应用配置自定义scheme：在app.json中添加scheme字段，比如：

  {
    "expo": {
      "scheme": "recordscratch",
      // 其他原有配置
    }
  }
  

• 生成scheme格式的回调URL，替换原有的HTTP/HTTPS回调地址：

  const signIn = async () => {
      const frontEndUrl = getBaseUrl();
      // 生成自定义scheme的回调URL
      const redirectUri = Linking.createURL('/auth/callback');
      const result = await Browser.openAuthSessionAsync(
          // 把回调URL传给后端，确保后端认证成功后跳转至此
          `${frontEndUrl}/auth/google?mobile=true&redirect_uri=${encodeURIComponent(redirectUri)}`,
          redirectUri
      );
      console.log(result);
  
      if (result.type !== "success") return;
      const url = Linking.parse(result.url);
      const sessionID = url.queryParams?.session_id?.toString() ?? null;
      if (!sessionID) return;
      await SecureStore.setItemAsync("session_id", sessionID);
  };
  

• 后端需配置该scheme回调URL，认证成功后跳转至recordscratch://auth/callback?session_id=xxx，此时Expo会自动捕获跳转，关闭浏览器并返回完整的result对象。

2. 手动关闭浏览器（备选方案）

若回调URL配置后仍有异常，可在认证流程的关键节点手动调用Browser.dismiss()关闭浏览器：

const signIn = async () => {
    const frontEndUrl = getBaseUrl();
    const result = await Browser.openAuthSessionAsync(
        `${frontEndUrl}/auth/google?mobile=true`,
        `${frontEndUrl}`
    );
    console.log(result);

    // 失败时关闭浏览器
    if (result.type !== "success") {
        await Browser.dismiss();
        return;
    }
    const url = Linking.parse(result.url);
    const sessionID = url.queryParams?.session_id?.toString() ?? null;
    // 无会话ID时关闭浏览器
    if (!sessionID) {
        await Browser.dismiss();
        return;
    }
    await SecureStore.setItemAsync("session_id", sessionID);
    // 成功后关闭浏览器
    await Browser.dismiss();
};

3. 排查无结果返回的常见原因

• 检查后端跳转URL与openAuthSessionAsync传入的第二个参数是否完全一致（包括斜杠、参数等细节），任何差异都会导致无法捕获结果。
• 确保Android设备上已正确配置自定义scheme，HTTP/HTTPS回调在Android上需额外配置深度链接，可靠性低于自定义scheme。
• 通过expo logs查看项目日志，排查深度链接或回调相关的错误信息。

内容的提问来源于stack exchange，提问作者Filip Slepcev