如何正确处理Keycloak重定向URI？Expo Android登录路由异常

问题背景 #

基于OpenId Provider实现登录页面，参考Expo的Keycloak教程编写代码后，用户可正常完成登录操作，但Android应用中每次登录成功后都会重定向到未匹配路由myapp:///oauth2redirect（原页面为index.tsx）。已在Keycloak服务器配置重定向URI为myapp:/oauth2redirect，服务器已返回授权码，说明服务端配置无误。尝试过添加链接监听器、创建与重定向URI同名的tsx文件，仍无法在原页面接收认证结果并继续流程，期望在index.tsx中读取响应并推进认证流程。

原代码：

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri, useAuthRequest, useAutoDiscovery } from 'expo-auth-session';
import { Button, Text, View } from 'react-native';
import * as Linking from 'expo-linking';

WebBrowser.maybeCompleteAuthSession();

export default function LoginScreen() {
  const discovery = useAutoDiscovery('<my-server-address>');
  const url = Linking.useURL()

  /*if (url) {
    console.log(Linking.parse(url));
  } else {
    console.log("no deeplinking");    
  }*/
  const redirectUri =  makeRedirectUri({
    scheme: 'myapp',
    path: 'oauth2redirect' 
  });
  console.log(redirectUri);
  
  // Create and load an auth request
  const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: 'my-client-id',
      redirectUri,
      scopes: ['openid', 'profile']
    },
    discovery
  );

  React.useEffect(() => {
    WebBrowser.warmUpAsync()
    return () => { WebBrowser.coolDownAsync(); };
  }, [])

  React.useEffect(() => {
    if (response?.type === 'success') {
      console.log(response);
    }
  }, [response])

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="LOGIN" 
              disabled={!request} 
              onPress={() => promptAsync()} />
      {response && <Text>{JSON.stringify(response, null, 2)}</Text>}
    </View>
  );
}

解决方案 #

1. 调整全局重定向处理的调用位置 #

WebBrowser.maybeCompleteAuthSession()需要在App根组件（如App.tsx）中全局调用，而不是在LoginScreen组件内，确保登录完成后能正确将结果传递回原组件，避免路由系统拦截重定向链接。

根组件示例（App.tsx）：

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import LoginScreen from './LoginScreen';

// 在根组件全局初始化登录重定向处理
WebBrowser.maybeCompleteAuthSession();

export default function App() {
  return <LoginScreen />;
}

2. 统一重定向URI格式 #

Keycloak配置的myapp:/oauth2redirect与代码中makeRedirectUri生成的myapp:///oauth2redirect格式不一致，需统一为三个斜杠的格式，同时更新Keycloak客户端的Valid Redirect URIs配置为myapp:///oauth2redirect。

3. 补充手动链接监听（作为自动处理的 fallback） #

如果自动处理失效，可手动监听Linking的URL事件，直接调用AuthSession.handleRedirectResponse处理重定向结果，确保在LoginScreen中捕获认证信息。

修改后的LoginScreen代码：

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri, useAuthRequest, useAutoDiscovery, AuthSession } from 'expo-auth-session';
import { Button, Text, View } from 'react-native';
import * as Linking from 'expo-linking';

export default function LoginScreen() {
  const discovery = useAutoDiscovery('<my-server-address>');
  
  // 生成标准格式的重定向URI，与Keycloak配置保持一致
  const redirectUri = makeRedirectUri({
    scheme: 'myapp',
    path: 'oauth2redirect',
  });
  
  const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: 'my-client-id',
      redirectUri,
      scopes: ['openid', 'profile'],
    },
    discovery
  );

  React.useEffect(() => {
    // 手动监听重定向链接，处理自动捕获失败的情况
    const urlSubscription = Linking.addEventListener('url', async ({ url }) => {
      if (url.startsWith('myapp:///oauth2redirect')) {
        const result = await AuthSession.handleRedirectResponse(url);
        console.log('手动捕获的认证结果:', result);
        // 在此处推进认证流程，比如用授权码换取token
      }
    });

    WebBrowser.warmUpAsync();
    return () => {
      urlSubscription.remove();
      WebBrowser.coolDownAsync();
    };
  }, []);

  React.useEffect(() => {
    // 处理自动返回的认证结果
    if (response?.type === 'success') {
      console.log('自动捕获的认证结果:', response);
      // 在此处推进认证流程，比如调用token接口换取用户信息
    } else if (response?.type === 'error') {
      console.error('登录失败:', response);
    }
  }, [response, discovery]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="LOGIN" disabled={!request} onPress={() => promptAsync()} />
      {response && <Text>{JSON.stringify(response, null, 2)}</Text>}
    </View>
  );
}

额外注意事项 #

• 若使用React Navigation等路由库，需在路由配置中排除oauth2redirect路径，避免路由系统将重定向链接识别为普通页面跳转
• 确保Keycloak客户端的Web Origins配置包含你的应用域名或*（开发环境），避免跨域问题

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