使用axios和react-native的IdentityServer4令牌请求

在使用axios和React Native与IdentityServer4进行令牌请求时，通常会涉及到OAuth 2.0授权流程。以下是一个基本的示例，展示了如何使用axios从React Native应用中请求访问令牌。

1. 安装依赖

首先，确保你已经安装了axios和react-native-secure-storage（或其他安全的存储解决方案）。

npm install axios react-native-secure-storage

2. 配置axios

创建一个axios实例，并设置基础URL和其他默认配置。

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://your-identityserver-url',
  timeout: 1000,
});

3. 请求令牌

使用axios发送POST请求以获取访问令牌。通常，这涉及到发送客户端凭据（client_id和client_secret）以及授权类型（grant_type）。

import { SecureStore } from 'react-native-secure-storage';

const getToken = async () => {
  try {
    const response = await apiClient.post('/connect/token', {
      grant_type: 'client_credentials',
      client_id: 'your-client-id',
      client_secret: 'your-client-secret',
      scope: 'your-scope',
    });

    const { access_token, expires_in, token_type } = response.data;

    // 存储令牌到安全存储
    await SecureStore.setItemAsync('access_token', access_token);
    await SecureStore.setItemAsync('expires_in', expires_in);
    await SecureStore.setItemAsync('token_type', token_type);

    return access_token;
  } catch (error) {
    console.error('Error fetching token:', error);
    throw error;
  }
};

4. 使用令牌

在需要访问受保护资源的地方，从安全存储中获取令牌并附加到请求头中。

import { SecureStore } from 'react-native-secure-storage';

const fetchProtectedData = async () => {
  try {
    const accessToken = await SecureStore.getItemAsync('access_token');
    const tokenType = await SecureStore.getItemAsync('token_type');

    const response = await apiClient.get('/protected-resource', {
      headers: {
        Authorization: `${tokenType} ${accessToken}`,
      },
    });

    return response.data;
  } catch (error) {
    console.error('Error fetching protected data:', error);
    throw error;
  }
};

注意事项

安全性：确保客户端凭据（client_id和client_secret）的安全存储和传输。不要硬编码在代码中，可以使用环境变量或安全的密钥管理系统。
令牌刷新：考虑实现令牌刷新机制，以避免用户频繁重新登录。
错误处理：在实际应用中，添加适当的错误处理和用户提示。

示例代码总结

import axios from 'axios';
import { SecureStore } from 'react-native-secure-storage';

const apiClient = axios.create({
  baseURL: 'https://your-identityserver-url',
  timeout: 1000,
});

const getToken = async () => {
  try {
    const response = await apiClient.post('/connect/token', {
      grant_type: 'client_credentials',
      client_id: 'your-client-id',
      client_secret: 'your-client-secret',
      scope: 'your-scope',
    });

    const { access_token, expires_in, token_type } = response.data;

    await SecureStore.setItemAsync('access_token', access_token);
    await SecureStore.setItemAsync('expires_in', expires_in);
    await SecureStore.setItemAsync('token_type', token_type);

    return access_token;
  } catch (error) {
    console.error('Error fetching token:', error);
    throw error;
  }
};

const fetchProtectedData = async () => {
  try {
    const accessToken = await SecureStore.getItemAsync('access_token');
    const tokenType = await SecureStore.getItemAsync('token_type');

    const response = await apiClient.get('/protected-resource', {
      headers: {
        Authorization: `${tokenType} ${accessToken}`,
      },
    });

    return response.data;
  } catch (error) {
    console.error('Error fetching protected data:', error);
    throw error;
  }
};

通过这种方式，你可以使用axios和React Native与IdentityServer4进行安全的令牌请求和资源访问。