电容器 iOS 使用基于 Cookie 的身份验证

Question

我正在使用 Capacitor v3、NextJS static 导出和 Django 后端来构建基于生产网站的 iOS 应用程序。

当前的后端身份验证方案通过 cookies 使用 Django 会话，并通过 cookies 设置 CSRF 令牌。应用程序可以很容易地绕过 CSRF 令牌，不用担心禁用它，但分叉我们的身份验证方案会有点麻烦。 capacitor-community/http声称允许 Cookies 但我无法正确配置它。

电容配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.nextwebapp.app',
  appName: 'nextwebapp',
  webDir: 'out',
  bundledWebRuntime: false
};

export default config;

请注意，我也尝试将server.hostname设置为myapp.com 。

根据电容器 http 自述文件底部的注释，我设置了以下 Info.plist 值。

应用程序/信息.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
....
    <key>WKAppBoundDomains</key>
    <array>
        <string>staging.myapp.com</string>
        <string>myapp.com</string>
    </array>
</dict>
</plist>

web 应用程序对 axios 使用了一个反应钩子包装器 package，因此为了将更改保持在最低限度，我制作了一个钩子来模拟从 package 返回的 state。

钩子/useNativeRequest.ts

import { useEffect, useState } from "react";

import { Http } from "@capacitor-community/http";

import {
  BASE_URL,
  DEFAULT_HEADERS,
  HOST_NAME,
  ERROR_MESSAGE,
  Refetch,
  RequestOptions,
  ResponseValues,
  RequestConfig,
} from "@utils/http";
import { handleResponseToast } from "@utils/toast";

const makeUrl = (url): string => `${BASE_URL}${url}`;

const getCSRFToken = async () =>
  await Http.getCookie({ key: "csrftoken", url: HOST_NAME });

const combineHeaders = async (headers: any) => {
  const newHeaders = Object.assign(DEFAULT_HEADERS, headers);
  const csrfHeader = await getCSRFToken();

  if (csrfHeader.value) {
    newHeaders["X-CSRFToken"] = csrfHeader.value;
  }

  return newHeaders;
};

function useNativeRequest<T>(
  config?: RequestConfig,
  options?: RequestOptions
): [ResponseValues<T>, Refetch<T>] {
  const [responseState, setResponseState] = useState({
    data: null,
    error: null,
    loading: false,
  });

  let method = "get";
  let url = config;
  let headers = {};
  let params = undefined;
  let data = undefined;
  if (config && typeof config !== "string") {
    url = config.url;
    method = config.method?.toLowerCase() ?? method;
    headers = config.headers;
    params = config.params;
    data = config.data;
  }

  const requestMethod = Http[method];

  const makeRequest = async () => {
    setResponseState({ error: null, data: null, loading: true });

    try {
      const reqHeaders = await combineHeaders(headers);
      console.log({
        url,
        reqHeaders,
        params,
        data
      })
      const response = await requestMethod({
        url: makeUrl(url),
        headers: reqHeaders,
        params,
        data,
      });

      if (response?.status === 200) {
        setResponseState({ error: null, data: response.data, loading: false });
        handleResponseToast(response?.data?.detail);
      } else {
        const errorMessage = response?.data?.detail || ERROR_MESSAGE;
        handleResponseToast(errorMessage);
        setResponseState({
          error: errorMessage,
          data: response.data,
          loading: false,
        });
      }

      return response;
    } catch {
      setResponseState({
        error: ERROR_MESSAGE,
        data: null,
        loading: false,
      });

      return Promise.reject(ERROR_MESSAGE);
    }
  };

  useEffect(() => {
    if (!options?.manual) {
      makeRequest();
    }
  }, [options?.manual]);

  return [responseState, makeRequest];
}

export { useNativeRequest };

上面的console.log从不包含额外的 csrf cookie，并且在 getter 日志中它不包含任何值。

后端 Django

    MIDDLEWARE = [
      ...
      'myapp_webapp.middle.CustomCSRFMiddleWare',
    ]
    
    CORS_ALLOWED_ORIGINS = [
        ...
        "capacitor://localhost",
    ]

   REST_FRAMEWORK = {
      'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
      ),
    }

中间件

class CustomCSRFMiddleWare(CsrfViewMiddleware):

    def process_request(self, request):
        # Special Processing for API Requests
        if "/api/v1" in request.path:
            try:
                requested_with = request.headers['X-Requested-With']
                myapp_request = request.headers['X-Myapp-Request']

                # Check Custom Headers
                if not (requested_with == 'XMLHttpRequest' and myapp_request == '1'):
                    raise PermissionDenied()

                return None

            except KeyError:
                # All API Requests should include the above headers
                raise PermissionDenied()

        
        # Call original CSRF Middleware
        return super(CustomCSRFMiddleWare, self).process_request(request)

有时后端也会显示X-Requested-With没有被发送，但它包含在我在 UI 中的DEFAULT_HEADERS常量中并出现在 console.log 中。

以上是否有任何东西阻止我从 iOS 上的 Capacitor 读取和发送 cookies？ 基于 Cookie 的身份验证甚至可以与电容器一起使用吗？

Answer 1

这是我更新的反应挂钩，结合了我的上述问题和评论中提到的线程以及一些手动 cookie 设置。

下面的客户端代码在不更改现有 Django Session 身份验证的情况下工作。

我上面的代码的变化

添加credentials: "include"到webFetchExtra
添加"Content-Type": "application/json"到标题
处理手动请求和重新获取的初始配置覆盖
响应后设置 Session Cookie
根据文档，这不是必需的，但我现在保留在我的代码中。

import { useCallback, useEffect, useState } from "react";

import { AxiosRequestConfig } from "axios";
import { Http } from "@capacitor-community/http";

const DEFAULT_HEADERS = {
  "X-Requested-With": "XMLHttpRequest",
  "X-MyApp-Request": "1",
  "Content-Type": "application/json",
};

const makeUrl = (url): string => `${BASE_URL}${url}`;

const getCSRFToken = async () =>
  await Http.getCookie({ key: "csrftoken", url: HOST_NAME });

const setSessionCookie = async () => {
  const sessionId = await Http.getCookie({ key: "sessionid", url: HOST_NAME });

  if (sessionId.value) {
    await Http.setCookie({
      key: "sessionid",
      value: sessionId.value,
      url: HOST_NAME,
    });
  }
};

const combineHeaders = async (headers: any) => {
  const newHeaders = Object.assign(DEFAULT_HEADERS, headers);
  const csrfHeader = await getCSRFToken();

  if (csrfHeader.value) {
    newHeaders["X-CSRFToken"] = csrfHeader.value;
  }

  return newHeaders;
};

const parseConfig = (config: RequestConfig, configOverride?: RequestConfig) => {
  let method = "get";
  let url = config;
  let headers = {};
  let params = undefined;
  let data = undefined;

  if (config && typeof config !== "string") {
    url = config.url;
    method = config.method ?? method;
    headers = config.headers;
    params = config.params;
    data = config.data;
  }

  return {
    url,
    method,
    headers,
    params,
    data,
    ...(configOverride as AxiosRequestConfig),
  };
};

function useNativeRequest<T>(
  config?: RequestConfig,
  options?: RequestOptions
): [ResponseValues<T>, Refetch<T>] {
  const [responseState, setResponseState] = useState({
    data: null,
    error: null,
    loading: false,
  });

  const makeRequest = useCallback(
    async (configOverride) => {
      setResponseState({ error: null, data: null, loading: true });
      const { url, method, headers, params, data } = parseConfig(
        config,
        configOverride
      );

      try {
        const reqHeaders = await combineHeaders(headers);
        const response = await Http.request({
          url: makeUrl(url),
          headers: reqHeaders,
          method,
          params,
          data,
          webFetchExtra: {
            credentials: "include",
          },
        });

        if (response?.status === 200) {
          setResponseState({
            error: null,
            data: response.data,
            loading: false,
          });
          await setSessionCookie();
        } else {
          setResponseState({
            error: errorMessage,
            data: response.data,
            loading: false,
          });
        }

        return response;
      } catch {
        setResponseState({
          error: ERROR_MESSAGE,
          data: null,
          loading: false,
        });

        return Promise.reject(ERROR_MESSAGE);
      }
    },
    [config]
  );

  useEffect(() => {
    if (!options?.manual) {
      makeRequest(config);
    }
  }, [options?.manual]);

  return [responseState, makeRequest];
}

export { useNativeRequest };

电容器 iOS 使用基于 Cookie 的身份验证

问题描述

1 个解决方案

解决方案1
2 2022-04-29 20:50:51

电容器 iOS 使用基于 Cookie 的身份验证

问题描述

1 个解决方案

解决方案1 2 2022-04-29 20:50:51

解决方案1
2 2022-04-29 20:50:51