代码之家  ›  专栏  ›  技术社区  ›  SoftTimur

在本地环境中测试第三方身份验证

  •  0
  • SoftTimur  · 技术社区  · 3 年前

    我们有一个网站,我们只是添加了第三方认证,如谷歌、推特。我正在尝试在localhost(MacOS)中测试这些身份验证。

    我正在运行一个docker来运行nginx,这是 docker-compose-dev.xml

    version: "3"
    services:
      https:
        image: bitnami/nginx:latest
        restart: unless-stopped
        ports:
          - 443:443/tcp
        volumes:
          - ./conf.d/dev.conf:/opt/bitnami/nginx/conf/server_blocks/default.conf:ro
        extra_hosts:
          - "host.docker.internal:host-gateway"
    

    这是 conf.d/dev.conf :

    upstream funfun {
       server 178.62.87.72:443;
    }
    server {
        listen  443 ssl;
        server_name localhost;
        ssl_certificate /certs/server.crt;
        ssl_certificate_key /certs/server.key;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        ssl_session_timeout 1d;
        ssl_stapling off;
        ssl_stapling_verify off;
        add_header Strict-Transport-Security max-age=15768000;
        add_header X-Frame-Options "";
        proxy_ssl_name "www.funfun.io";
        proxy_ssl_server_name on;
        location ~ /socialLoginSuccess {
            rewrite ^ '/#/socialLoginSuccess' redirect;
         }
        location ~ /auth/(.*) {
            proxy_pass  https://funfun/10studio/auth/$1?$query_string;
            proxy_set_header Host localhost;
         }
        location / {
            proxy_set_header    Host                $host;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Proto   $scheme;
            proxy_set_header    Accept-Encoding     "";
            proxy_set_header    Proxy               "";
            proxy_pass          http://host.docker.internal:3000/;
            # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove socketio error
            proxy_http_version 1.1;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection "upgrade";
        }
    }
    

    我们启动应用程序的方式是 sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start 然后 https://localhost:8000/#/sign 在浏览器中打开验证按钮所在的页面。

    链接到Google身份验证的按钮的url是 https://localhost/10studio/auth/google 。点击它,我首先看到 https://localhost/10studio/auth/google 在浏览器地址栏中,但输入谷歌ID和密码的页面没有出现,几秒钟后,url变成 https://localhost/#/socialLoginSuccess ,页面显示 502 Bad Gateway 。我在运行nginx的终端中看到以下日志:

    $ docker-compose --f docker-compose-dev.yml up
    WARNING: Found orphan containers (frontend_10studio_1, frontend_frontend_1) for this project. If you removed or renamed this service in your compose file, you can run this command with the --remove-orphans flag to clean it up.
    Starting frontend_https_1 ... done
    Attaching to frontend_https_1
    https_1  | nginx 21:24:05.37 
    https_1  | nginx 21:24:05.38 Welcome to the Bitnami nginx container
    https_1  | nginx 21:24:05.38 Subscribe to project updates by watching https://github.com/bitnami/bitnami-docker-nginx
    https_1  | nginx 21:24:05.39 Submit issues and feature requests at https://github.com/bitnami/bitnami-docker-nginx/issues
    https_1  | nginx 21:24:05.39 
    https_1  | nginx 21:24:05.39 INFO  ==> ** Starting NGINX setup **
    https_1  | nginx 21:24:05.42 INFO  ==> Validating settings in NGINX_* env vars
    https_1  | nginx 21:24:05.43 INFO  ==> Initializing NGINX
    https_1  | realpath: /bitnami/nginx/conf/vhosts: No such file or directory
    https_1  | 
    https_1  | nginx 21:24:05.45 INFO  ==> ** NGINX setup finished! **
    https_1  | nginx 21:24:05.47 INFO  ==> ** Starting NGINX **
    https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:06 +0000] "GET /10studio/auth/google HTTP/1.1" 302  0 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
    https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /auth/google/callback?code=4%2F0AX4XfWiqleRl2StBpNOgOtzjqZlftvq9-uDmiPVLZqcgo2xjjhohu47iAV5qxoJThaQYzg&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid&authuser=0&prompt=none HTTP/1.1" 302  82 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
    https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /auth/signinSuccess HTTP/1.1" 302  82 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
    https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /socialLoginSuccess HTTP/1.1" 302  138 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
    https_1  | 2021/11/08 21:25:39 [error] 27#27: *2 connect() failed (110: Connection timed out) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://192.168.65.1:3000/", host: "localhost", referrer: "https://localhost:8000/"
    https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:39 +0000] "GET / HTTP/1.1" 502  552 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
    

    有人知道这里出了什么问题吗?

    此外,当我调试nginx时,它对我来说就像一个黑匣子。我真的希望能够跟踪和查看哪个url进入哪个位置块,并更改为哪个url(通过 proxy_pass rewrite 等有人有更好的方法来调试或记录吗?

    编辑1:

    我还试了另一个稍微不同的 docker-compose-dev.xml :

    version: "3"
    services:
      https:
        image: bitnami/nginx:latest
        restart: unless-stopped
        ports:
          - 443:443/tcp
        volumes:
          - ./conf.d/dev.mac.conf:/opt/bitnami/nginx/conf/server_blocks/default.conf:ro
        extra_hosts:
          - "172.17.0.1:host-gateway"
    

    略有不同 dev.mac.conf :

    upstream funfun {
       server 178.62.87.72:443;
    }
    server {
        listen 443 ssl;
        server_name localhost;
        ssl_certificate /certs/server.crt;
        ssl_certificate_key /certs/server.key;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        ssl_session_timeout 1d;
        ssl_stapling off;
        ssl_stapling_verify off;
        add_header Strict-Transport-Security max-age=15768000;
        add_header X-Frame-Options "";
        proxy_ssl_name "www.funfun.io";
        proxy_ssl_server_name on;
        location ~ /socialLoginSuccess {
            rewrite ^ '/#/socialLoginSuccess' redirect;
         }
        location ~ /auth/(.*) {
            proxy_pass  https://funfun/10studio/auth/$1?$query_string;
            proxy_set_header Host localhost;
         }
        location / {
            proxy_set_header    Host                $host;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_set_header    X-Forwarded-Proto   $scheme;
            proxy_set_header    Accept-Encoding     "";
            proxy_set_header    Proxy               "";
            proxy_pass          http://172.17.0.1:8000/;
    
            # These three lines added as per https://github.com/socketio/socket.io/issues/1942 to remove socketio error
            proxy_http_version 1.1;
            proxy_set_header   Upgrade $http_upgrade;
            proxy_set_header   Connection "upgrade";
        }
    }
    

    我仍然在以下时间启动应用程序 sudo PORT=8000 HTTPS=true/node_modules/.bin/react脚本启动 这一次, https://localhost:8000/#/sign 在浏览器中打开身份验证按钮所在的页面。单击链接到的按钮 https://localhost/10studio/auth/google 打开Google身份验证页面。验证成功后,url变为 https://localhost/#/socialLoginSuccess ,页面显示 502坏网关 。但是,正确的url应该是 https://localhost:8000/#/socialLoginSuccess .

    这是日志:

    https_1  | nginx 03:12:10.32 INFO  ==> ** Starting NGINX **
    https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:28 +0000] "GET /10studio/auth/google HTTP/1.1" 302  0 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
    https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /auth/google/callback?code=4%2F0AX4XfWgQ8g3LC6nYxBbk-BjBq0cWGFcfSwoPWZbC8Rky0IVngpAtKTTuYIbYsgbW96g6Dg&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+openid&authuser=0&prompt=consent HTTP/1.1" 302  82 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
    https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /auth/signinSuccess HTTP/1.1" 302  82 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
    https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /socialLoginSuccess HTTP/1.1" 302  138 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
    https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET / HTTP/1.1" 502  150 "https://accounts.google.fr/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
    https_1  | 2021/11/12 03:12:46 [error] 28#28: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://172.17.0.1:8000/", host: "localhost", referrer: "https://accounts.google.fr/"
    https_1  | 172.19.0.1 - - [12/Nov/2021:03:12:46 +0000] "GET /favicon.ico HTTP/1.1" 502  150 "https://localhost/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0" "-"
    https_1  | 2021/11/12 03:12:46 [error] 28#28: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET /favicon.ico HTTP/1.1", upstream: "http://172.17.0.1:8000/favicon.ico", host: "localhost", referrer: "https://localhost/"
    

    我相信这个版本的配置文件更接近于一个正确的解决方案。唯一的问题是最终的url应该是 https://localhost:8000/#/socialLoginSuccess 而不是 https://localhost/#/socialLoginSuccess 。有人知道如何做到这一点吗?

    0 回复  |  直到 3 年前
        1
  •  0
  •   Jan Garaj    3 年前

    您在日志中有错误(这不是身份验证的问题):

    [error] 27#27: *2 connect() failed (110: Connection timed out) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://192.168.65.1:3000/"
    

    您的nginx容器无法到达配置的上游( http://host.docker.internal:3000/ ). 导致该错误的原因可能有很多:错误的网络/端口配置、端口暴露、, moby itself may have a own bugs with host.docker.internal DNS configuration , ...

        2
  •  0
  •   mattpr    3 年前

    OAUTH流成功发生。 请注意,大多数流都是针对localhost:8000进行的,这意味着绕过nginx并直接指向您的应用程序。 您的应用程序在8000端口上运行,但您已将nginx配置为连接到3000端口上的“上游”(您的应用)(请参阅nginx的配置)。

    在流的最后,请求不再直接发送到你的应用程序,而是发送到nginx,然后nginx尝试连接到你的3000端口上的应用程序/上游,但由于你的应用在8000端口上运行,该端口不起作用。

    更新你的nginx-config到8000端口,然后再试一次。

    我还建议你测试连接nginx的整个流程,而不是直接连接到8000端口上的应用程序,以减少混乱。

    https_1  | 172.19.0.1 - - [08/Nov/2021:21:25:07 +0000] "GET /socialLoginSuccess HTTP/1.1" 302  138 "https://localhost:8000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" "-"
    https_1  | 2021/11/08 21:25:39 [error] 27#27: *2 connect() failed (110: Connection timed out) while connecting to upstream, client: 172.19.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://192.168.65.1:3000/", host: "localhost", referrer: "https://localhost:8000/"