如何使用React组件获取http标头（由Nginx设置的LDAP用户属性）

Question

搜索了很多，并提到this，但没有得到详细的答案。

我想从React组件（客户端）的http头中获取LDAP登录用户名（由nginx设置的X-Forwarded-User属性），尝试第一种方法与'fetch'链接，获取空头;第二种方法是使用window.INITIAL_HEADERS变量，不太清楚如何在React组件中使用它。什么是正确的方法呢？以及如何获取LDAP登录用户的其他属性，例如。电子邮件（LDAP服务器上配置了LDAP属性'email'）。谢谢。

相对nginx conf如下

location /noc/ {
        auth_ldap "Enter AD credentials: ";
        auth_ldap_servers server1;
        keepalive_timeout 300s;
        proxy_pass http://ui/noc/;
        proxy_set_header X-Forwarded-User $remote_user;

}

React JS，在App.js中使用React Route作为组件链接

//in another file Noc.js for the React component
fetch("/noc/").then(response=>{
  console.log("headers:");
  console.log(response.headers); //empty {}
});

Answer 1

如上所述here，客户端React JS无法在服务器端设置http标头，我们使用的解决方案是使用Nginx的'rewrite'配置将请求重定向到将remote_user添加为param的URL，然后React可以在客户端解析此param侧。

location /noc/auth {
  ...
  rewrite ^.* http://$server_name/noc/?user=$remote_user;
}

然后在JS

  let params = queryString.parse(this.props.location.search);
  console.log("user:" + params.user);

Answer 2

想要在这里添加更多更新，我尝试使用2种方法为我们的React应用程序进行身份验证。因为我们使用Docker容器来运行nginx，首先为了添加nginx auth模块（nginx-auth-ldap或nginx-http-shibboleth），需要更改Dockerfile以使用FROM ubuntu:16.04添加模块

FROM ubuntu:16.04

RUN apt-get update \
&& apt-get install -y  opensaml2-schemas xmltooling-schemas libshibsp6 apt-transport- 
https \
     libshibsp-plugins shibboleth-sp2-common shibboleth-sp2-utils supervisor procps 
wget git curl \
     build-essential libpcre3 libpcre3-dev libpcrecpp0v5 libssl-dev zlib1g-dev \
&& rm -rf /var/lib/apt/lists/*

WORKDIR /opt

RUN git clone https://github.com/openresty/headers-more-nginx-module.git \
&& git clone https://github.com/nginx-shib/nginx-http-shibboleth \
&& wget http://nginx.org/download/nginx-1.14.2.tar.gz \
&& tar -xzvf nginx-1.14.2.tar.gz \
&& cd nginx-1.14.2 \
&& ./configure --sbin-path=/usr/sbin/nginx \
   --conf-path=/etc/nginx/nginx.conf \
   --pid-path=/run/nginx.pid \
   --error-log-path=/var/log/nginx/error.log \
   --http-log-path=/var/log/nginx/access.log \
   --with-http_ssl_module \
   --with-ipv6 \
   --add-module=/opt/nginx-http-shibboleth \
   --add-module=/opt/headers-more-nginx-module \
&& make \
&& make install

RUN cp /opt/nginx-http-shibboleth/includes/shib_* /etc/nginx

尝试了两种方法，

1. Nginx + LDAP使用前面发布的配置和nginx-auth-ldap，它工作并从nginx重写的URL参数中获取用户名
2. 使用nginx-http-shibboleth的Nginx + shibboleth花了我很长时间来解决这个问题，主要是由于在IDP服务器和客户端配置了不一致的属性ID，提示是打开shibd.logger的DEBUG

客户端的工作配置是-idp-metadata.xml

<saml:Attribute NameFormat="urn:oasis:names:tc:SAML:2.0:attrname-format:uri" Name="urn:oid:0.9.2342.19200300.100.1.3" FriendlyName="mail" />

并在attribute-map.xml中启用“mail”属性，（请参阅this获取IDP服务器配置）

<Attribute name="urn:mace:dir:attribute-def:mail" id="mail"/>

<Attribute name="urn:oid:0.9.2342.19200300.100.1.3" id="mail"/>

并在shibboleth2.xml中

<Handler type="Session" Location="/Session" showAttributeValues="true"/>

在http服务器部分为nginx.conf，电子邮件设置为cookie，“mail”为密钥，注意它的$ upstream_http_variable_mail与模块官方文档不同（$ upstream_http_variable_email）

server {
    listen              443;
    server_name  __MY_DOMAIN_NAME__;

    location = /shibauthorizer {
        internal;
        include fastcgi_params;
        fastcgi_pass unix:/var/run/shibboleth/shibauthorizer.sock;
    }

    location /Shibboleth.sso {
        include fastcgi_params;
        fastcgi_pass unix:/var/run/shibboleth/shibresponder.sock;
    }

    location /shibboleth-sp {
        alias /usr/share/shibboleth/;
    }

    location / {
        shib_request /shibauthorizer;
        shib_request_use_headers on;

        #include shib_clear_headers;
        include shib_fastcgi_params;
        shib_request_set $shib_mail $upstream_http_variable_mail;
        add_header Set-Cookie mail=$shib_mail;

        root   /usr/share/nginx/html;
        #index  index.html index.htm;
        try_files $uri /index.html;
    }

然后在React中使用'universal-cookie'来读取来自cookie的邮件，完成！

console.log("cookie mail:" + cookies.get('mail'));