资讯专栏INFORMATION COLUMN

使用nginx代理,支持微信网页授权不同域名

only_do / 2236人阅读

摘要:前提了解微信这个过程必须要明白感谢超神的图片从流程我们可以看到,回调域名其实就是我们的网页授权域名。

承认有点标题党了。这次开发一个项目遇到问题,以前有两个微信老项目基于yaf,域名为m.baidu.com(做示例),然后网页授权域名填的是m.baidu.com,而这次新开发的项目是基于laravel,那么域名为wechat.baidu.com,但是网页授权域名怎么办,这就坑爹了。当然了,大部分人不会遇到这么蛋疼的事情吧。
前提
laravel5.5

php7.1.0

nginx1.10

overtrue/laravel-wechat
了解微信OAuth

这个过程必须要明白

感谢超神的图片

从流程我们可以看到,回调url域名其实就是我们的网页授权域名。那么既然这样我们是不是可以造个假呢,
在域名为wechat.baidu.com的项目下,我们也把网页授权域名写成m.baidu.com,然后再使用nginx做代理,基于location 转发到wechat.baidu.com下;

改写overtrue/laravel-wechat中间件
为什么要改写这个中间件呢,因为中间件默认会直接获取你的域名,所以如果我使用wechat.baidu.com,那么默认就会回调后跳转到wechat.baidu.com,而实际上我要跳转到m.baidu.com

Middleware文件夹下新建一个中间件OAuthAuthenticate,并且继承 OvertrueLaravelWeChatMiddlewareOAuthAuthenticate;:


namespace AppHttpMiddleware;


use IlluminateHttpRequest;
use IlluminateSupportFacadesApp;
use IlluminateSupportFacadesEvent;
use OvertrueLaravelWeChatEventsWeChatUserAuthorized;
use OvertrueLaravelWeChatMiddlewareOAuthAuthenticate as BaseAuthenticate;

class OAuthAuthenticate extends BaseAuthenticate
{
   
   
    public function handle($request, Closure $next, $account = "default", $scopes = null)
    {
        // $account 与 $scopes 写反的情况
        if (is_array($scopes) || (is_string($account) && str_is("snsapi_*", $account))) {
            list($account, $scopes) = [$scopes, $account];
            $account || $account = "default";
        }

        $isNewSession = false;
        $sessionKey = sprintf("wechat.oauth_user.%s", $account);
        $config = config(sprintf("wechat.official_account.%s", $account), []);
        $officialAccount = app(sprintf("wechat.official_account.%s", $account));
        $scopes = $scopes ?: array_get($config, "oauth.scopes", ["snsapi_base"]);

        if (is_string($scopes)) {
            $scopes = array_map("trim", explode(",", $scopes));
        }

        $session = session($sessionKey, []);

        if (!$session) {
            if ($request->has("code")) {
                session([$sessionKey => $officialAccount->oauth->user() ?? []]);
                $isNewSession = true;

                Event::fire(new WeChatUserAuthorized(session($sessionKey), $isNewSession, $account));

                return redirect()->to($this->getTargetUrl($request));
            }

            session()->forget($sessionKey);




            //本地和测试环境下使用这个
            if(App::environment()=="local" ||App::environment()=="test"){
                return $officialAccount->oauth->scopes($scopes)->redirect($request->fullUrl());
            }


            $query = $request->getQueryString();

            $question = $request->getBaseUrl().$request->getPathInfo() == "/" ? "/?" : "?";

            $url= $query ? $request->getPathInfo().$question.$query : $request->getPathInfo();

            $url="http://m.baidu.com".$url; //就这一步很重要
            
            return $officialAccount->oauth->scopes($scopes)->redirect($url);
        }

        Event::fire(new WeChatUserAuthorized(session($sessionKey), $isNewSession, $account));

        return $next($request);
    }

   
}

然后在kernel.php中的$routeMiddleware添加

"wechat.oauth.baidu.com"=>OAuthAuthenticate::class

然后就可以在路由文件使用了,完工。

nginx 设置代理
这个觉得没有什么好讲的,其实原理很简单,直接上代码
     //在m.baidu.com域名配置下,设置location规则,所有router以/official_account开头的都去wechat.baidu.com下,然后设置跨域
     
     location /official_account/{
        add_header "Access-Control-Allow-Origin" "$http_origin";
        add_header "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS";
        add_header "Access-Control-Allow-Headers" "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-CSRF-TOKEN,X-XSRF-TOKEN";
        add_header "Access-Control-Allow-Credentials" "true";
        if ($request_method = "OPTIONS") {
                add_header "Access-Control-Allow-Origin" "$http_origin";
                add_header "Access-Control-Allow-Methods" "GET, POST, PUT, DELETE, OPTIONS";
                add_header "Access-Control-Allow-Headers" "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-CSRF-TOKEN,X-XSRF-TOKEN";
                add_header "Access-Control-Allow-Credentials" "true";
                #add_header "Access-Control-Max-Age" 1728000; # 20 天
                #add_header "Content-Type" "text/html charset=UTF-8";
                #add_header "Content-Length" 0;
                return 200;
        }
    # 这下面是要被代理的后端服务器,它们就不需要修改代码来支持跨域了
        proxy_pass http://wechat.m.liaorusanshe.com;
        #       proxy_set_header Host $host;  
        proxy_redirect off;
        #proxy_set_header X-Real-IP $remote_addr; 
        #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 60;
        proxy_read_timeout 60;
        proxy_send_timeout 60;


    }

这个代码配置参考了《Nginx配置实现CORS》,但是直接复制过来,配合proxy_pass会出现400 request header or cookie too large错误, 百度了一下"400 Bad Request Request Header Or Cookie Too Large",<>可以解决,就是如下三个设置有问题,去掉就好了:

         proxy_set_header Host $host;  
         proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

综合分析,应该是nginx在使用proxy_pass做跳转时,如果直接使用域名,且需要向后端提交当前访问的IP地址时,引发nginxbug造成死循环,不知道大家有没有遇到过这种情况。

然后重新启动就好了,完工。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/39975.html

相关文章

  • 移动端H5多页开发拍门砖经验

    摘要:以下会以其中一个以公积金页面开发项目作为例子,介绍移动端的一些常见问题和使用作为进行多页开发的经验。所以要想在微信开发调试工具中获取,我们需要使用一种叫做内网穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);两年前刚接触移动端开发,刚开始比较疑惑,每次遇到问题都是到社区里提问...

    hightopo 评论0 收藏0
  • nginx反向代理微信测试全攻略

    摘要:传给微信的参数进行转义其中参数是可以被微信原样返回,这样就可以按你自己的需求完成反向代理了。可以去掉搭建测试环境另一条运维的原则是不要在生产环境上直接改,在测试环境修改并经过测试,测试通过后,再上传到生产环境。 前言 在与第三方系统进行接口开发时,需要不断的改进和测试,以常见的微信登录支付和 Alipay 支付和登录为例. 相对来讲 Alipay 做起来容易一些, 一是接口 SDK 封...

    endless_road 评论0 收藏0
  • 企业只能申请两个微信公众号,微信开发不够用?不,一个公众号就够了!

    摘要:微信年月日发公告称,个人主体注册公众号数量上限由个调整为个。大家都知道每个微信公众号在进行开发时,授权回调的域名只能设置一个,正常的开发一般一套环境就对应一个域名。 微信2018年11月16日发公告称,个人主体注册公众号数量上限由2个调整为1个。企业类主体注册公众号数量上限由5个调整为2个。这个对马上要注册公众号的企业来说顿时心情不好了。 大家都知道每个微信公众号在进行开发时,授权回调...

    wthee 评论0 收藏0
  • 前端必须知道的Nginx的常用配置

    摘要:负载均衡是通过后端引入一个负载均衡器和至少一个额外的服务器来缓解这类问题增加的服务器和原本的服务器提供相同的内容。负载均衡不需要前端进行配置,主要是服务端进行配置,前端稍作了解即可。 Nginx主要功能 负载均衡 反向代理 动静分离 配置https 负载均衡 负载均衡是一门计算机网络技术,主要用来优化资源使用、最大化吞吐率、最小化响应时间、同时避免过载的目的。如果一个网站只有一台服...

    tracymac7 评论0 收藏0

发表评论

0条评论

only_do

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<