如何在React Native + Expo环境下使用SAML实现Firebase用户认证

我在为正在开发的React Native应用添加SAML单点登录功能时，未能在Stack Overflow及其他平台搜索到相关问题与解答，因此在此分享解决方案。

前期准备 #

SAML 单点登录依赖浏览器跳转完成身份提供商（IdP）的身份校验，我们选择react-native-webview作为承载页面完成跳转流程：

• 安装依赖

  npm install react-native-webview --save
  # iOS 环境需额外执行原生依赖链接
  cd ios && pod install
  

• 提前在服务提供商（SP）后台配置自定义回调 Scheme，格式为你的应用自定义协议://saml/callback，比如myrnapp://saml/callback，后续需要在原生端配置 URL Scheme 捕获该回调。

核心实现步骤 #

• 第一步：编写 SAML 登录承载页面，通过 WebView 加载 IdP 登录入口，示例代码如下：

  import React, { useRef } from 'react';
  import WebView from 'react-native-webview';
  import { Alert } from 'react-native';
  
  const SAMLLoginPage = () => {
    const webViewRef = useRef(null);
    // 替换为你的身份提供商登录入口地址
    const IDP_LOGIN_ENTRY = 'https://你的-idp-登录地址/login';
    // 替换为你提前配置的自定义回调Scheme
    const CALLBACK_SCHEME = 'myrnapp://saml/callback';
  
    // 监听WebView跳转，捕获SAML回调
    const onNavStateChange = (navState) => {
      if (navState.url.startsWith(CALLBACK_SCHEME)) {
        // 提取回调地址中的SAML响应参数
        const query = new URLSearchParams(navState.url.split('?')[1]);
        const samlResponse = query.get('SAMLResponse');
        if (samlResponse) {
          // 传至后端校验响应合法性
          verifySAMLResponse(samlResponse);
        } else {
          Alert.alert('登录失败', '未获取到有效身份凭证');
        }
        // 阻止WebView继续加载自定义协议地址
        return false;
      }
      return true;
    };
  
    // 调用后端接口校验SAML响应
    const verifySAMLResponse = async (resStr) => {
      try {
        const apiRes = await fetch('你的后端SAML校验接口地址', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ samlResponse: resStr })
        });
        const loginResult = await apiRes.json();
        // 校验通过后执行本地登录逻辑：存储用户信息、跳转首页等
        console.log('登录成功', loginResult);
      } catch (e) {
        Alert.alert('登录失败', '身份校验未通过，请重试');
      }
    };
  
    return (
      <WebView
        ref={webViewRef}
        source={{ uri: IDP_LOGIN_ENTRY }}
        onNavigationStateChange={onNavStateChange}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    );
  };
  
  export default SAMLLoginPage;
  

• 第二步：原生端配置 URL Scheme，iOS 在 Info.plist 中添加对应 Scheme 配置，Android 在 AndroidManifest.xml 的启动 Activity 中添加 intent-filter 配置，确保应用可以捕获自定义协议开头的跳转链接。

注意事项 #

• SAMLResponse 的校验必须放在后端完成，禁止在前端直接解析校验，避免出现伪造凭证的安全漏洞
• 要确保 IdP 后台配置的 SP 断言消费地址（ACS）和你自定义的回调地址完全一致
• 若遇到 IdP 页面跨域问题，可以在 WebView 配置中添加对应的跨域允许参数

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