如何在React Native中实现react-native-app-auth授权WebView的编程式关闭及超时自动关闭

可以通过定时器+取消授权会话API实现这个需求，react-native-app-auth（v7及以上版本）提供了cancelAuthSession()方法，能手动终止授权流程并关闭原生授权界面，结合Promise.race就能实现超时自动关闭逻辑。

具体实现步骤 #

1. 确保你的react-native-app-auth版本支持cancelAuthSession，版本过低建议升级到v7.x及以上
2. 封装带超时逻辑的授权函数，用Promise.race同时监听授权完成和超时事件
3. 超时触发时调用cancelAuthSession()关闭授权界面，并抛出超时错误

代码示例 #

import { authorize, cancelAuthSession } from 'react-native-app-auth';

// 带超时的授权函数，默认60秒超时
const authorizeWithTimeout = async (authConfig, timeoutMs = 60000) => {
  let timeoutTimerId;

  try {
    // 创建超时触发的Promise
    const timeoutPromise = new Promise((_, reject) => {
      timeoutTimerId = setTimeout(() => {
        // 手动取消授权会话，关闭WebView/原生授权界面
        cancelAuthSession();
        reject(new Error('授权超时，请重新尝试'));
      }, timeoutMs);
    });

    // 同时等待授权完成或超时
    const authResult = await Promise.race([
      authorize(authConfig),
      timeoutPromise
    ]);

    // 授权成功，清理定时器
    clearTimeout(timeoutTimerId);
    return authResult;
  } catch (error) {
    // 无论失败还是超时，都清理定时器避免内存泄漏
    clearTimeout(timeoutTimerId);
    throw error;
  }
};

// 使用示例
const myAuthConfig = {
  clientId: '你的客户端ID',
  redirectUrl: '你的回调地址',
  issuer: '你的授权服务器地址',
  scopes: ['openid', 'profile'],
  // 其他配置项...
};

// 启动30秒超时的授权流程
authorizeWithTimeout(myAuthConfig, 30000)
  .then((result) => {
    console.log('授权成功:', result);
    // 处理授权结果
  })
  .catch((error) => {
    console.log('授权失败:', error.message);
    // 处理超时或其他错误
  });

注意事项 #

• cancelAuthSession()会直接终止原生的授权会话，iOS和Android平台都会关闭对应的授权界面并返回应用
• 如果你的react-native-app-auth版本不支持cancelAuthSession，建议升级到最新稳定版；旧版本没有这个API的话，无法通过编程方式手动关闭授权界面，只能考虑自定义WebView实现授权流程

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