React Native Keycloak：身份验证的完美解决方案

import React from 'react';
import { View, Text } from 'react-native';
import { Keycloak } from 'keycloak-js';
 
// 初始化Keycloak实例
const keycloak = new Keycloak({
  url: 'https://your-keycloak-server/auth',
  realm: 'your-realm',
  clientId: 'mobile-client'
});
 
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: false,
      userName: null
    };
  }
 
  componentDidMount() {
    // 在组件挂载后执行身份验证
    keycloak.init({ onLoad: 'login-required' }).success(authenticated => {
      if (authenticated) {
        this.setState({
          loggedIn: true,
          userName: keycloak.idTokenParsed.name
        });
      }
    }).error(err => {
      console.log('身份验证失败:', err);
    });
  }
 
  render() {
    if (this.state.loggedIn) {
      return (
        <View>
          <Text>Welcome, {this.state.userName}!</Text>
        </View>
      );
    } else {
      return (
        <View>
          <Text>Loading...</Text>
        </View>
      );
    }
  }
}

这段代码展示了如何在React Native应用中使用Keycloak进行身份验证。它首先初始化Keycloak实例，并提供了Keycloak所需的配置信息。在组件挂载后，它使用Keycloak的init方法来进行身份验证，并根据验证结果更新组件的状态。如果用户通过验证，它会显示欢迎消息和用户名。这是一个简洁而完整的示例，展示了如何将Keycloak集成到React Native应用中。