能否在Keycloak中集成Firebase OTP实现React Native手机号登录？

核心思路 #

通过Firebase完成手机号验证码验证，验证通过后将Firebase的ID Token发送给Keycloak，利用Keycloak的自定义身份提供者或自定义认证流完成SSO登录。

步骤1：配置Firebase短信认证 #

• 在Firebase控制台启用手机号登录方式
• 安装React Native Firebase依赖：

  npm install @react-native-firebase/app @react-native-firebase/auth
  # iOS需额外执行
  cd ios && pod install
  

• 实现前端手机号验证码获取与验证逻辑：

  import auth from '@react-native-firebase/auth';
  
  // 请求验证码
  const requestOtp = async (phoneNumber) => {
    const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
    return confirmation;
  };
  
  // 验证验证码并获取Firebase ID Token
  const verifyOtp = async (confirmation, code) => {
    const userCredential = await confirmation.confirm(code);
    const idToken = await userCredential.user.getIdToken();
    return idToken;
  };
  

步骤2：Keycloak端配置 #

方式一：自定义身份提供者（推荐） #

1. 在Keycloak控制台创建OpenID Connect身份提供者，配置Firebase的OIDC端点（Firebase的OIDC issuer为https://securetoken.google.com/{YOUR_PROJECT_ID}）
2. 开启"First Login Flow"，设置为直接关联现有用户或自动创建用户
3. 配置身份提供者的映射规则，将Firebase返回的用户信息（如手机号）映射到Keycloak用户属性

方式二：自定义认证流 #

1. 在Keycloak控制台创建新的认证流，添加"自定义脚本执行"步骤
2. 编写脚本接收前端传入的Firebase ID Token，调用Firebase验证接口验证Token合法性
3. 验证通过后，根据手机号查找或创建Keycloak用户，完成认证

步骤3：React Native应用对接Keycloak #

• 安装react-native-keycloak依赖：

  npm install @react-native-keycloak/keycloak
  

• 拿到Firebase的ID Token后，调用Keycloak接口完成登录：

  import { KeycloakProvider } from '@react-native-keycloak/keycloak';
  
  // 初始化Keycloak
  const keycloak = new Keycloak({
    url: 'YOUR_KEYCLOAK_URL',
    realm: 'YOUR_REALM',
    clientId: 'YOUR_CLIENT_ID',
  });
  
  // 使用Firebase ID Token登录Keycloak
  const loginWithFirebaseToken = async (idToken) => {
    // 调用身份提供者登录
    const authResponse = await keycloak.login({
      idpHint: 'firebase-oidc', // 对应Keycloak中配置的身份提供者ID
      extraParams: { id_token: idToken },
    });
  
    return authResponse;
  };
  

关键注意事项 #

• 确保Firebase项目与Keycloak的域名在CORS允许列表中
• 注意Firebase ID Token的有效期（默认1小时），需处理Token刷新逻辑
• Keycloak用户属性需与Firebase的手机号字段保持一致，避免用户关联失败

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