redirect_uri 参数错误 公众号H5授权登录原理

redirect_uri 参数错误,这个错误请检查网页授权,大部分是回调的授权域名配置问题

redirect_uri 参数错误 公众号H5授权登录原理_第1张图片

公众号H5授权登录

在微信公众号里获取微信用户信息分两种方式

注意:以下所有操作,都需要再公众号配置网页授权配置域名授权

redirect_uri 参数错误 公众号H5授权登录原理_第2张图片

1.以snsapi_base为scope发起的网页授权

这种方式是静默获取,对用户来说是无感的,看不到任何变化

使用场景,只能获取到openid,调用微信支付使用,无法获取头像昵称等数据

$wxurl = https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri={$url}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect

注意参数说明:

appid=你的APPID

{$url}回调的url地址,url需要用urlencode编码

scope=snsapi_base 静默授权类型

使用说明

$wxurl 这个链接地址是固定的拼接方式,微信官网有文档点击我获取

把拿到的这个连接给前端,前端通过让用户触发这个链接,跳转获取微信的code参数,或者自己通过代码触发跳转

微信跳转后得到的链接 https://domain.com/index/index/wxlogin?code=051pYGkl2bQ3S54TUxll2ttJ6Z2pYGk0&state=STATE 

后面多了code参数和state参数,如果跳转的是后端,后端直接获取code就可以,如果跳转的是前端, 前端截取url,拿到code传给后端

$wxurl必须在微信里打开才能获取到code,开发调试请使用微信开发者工具,获取结果如下

{"access_token":"38_gUjz8OA3RUbAiGSEB-o68bSAyI8rGVwOXmNepBHXKdcCEiNotFb3e9CTzFTxsFt21PxwXT3l9qUsL3gNBcsg8A","expires_in":7200,"refresh_token":"38_7aZk0NQHhLOO5e3j-uqVl5na48CMvuoedJ90c3lDmby8mOEsBHcsfT4SPtQJTMpMdx8GKFFR7sXFj6Nuu8h21A","openid":"obBHk04gFkeKsRVDowMfXn-LLYpU","scope":"snsapi_base"}

实现截图

 

redirect_uri 参数错误 公众号H5授权登录原理_第3张图片

实现代码

//后台代码  我用的是tp5
public function wxlogin()
    {
        $appid = '';
        $appsecret = '';
        $input = input();
        if(!empty($input['code'])){
            $url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$input['code'].'&grant_type=authorization_code';
            $client = new Client(); //GuzzleHttp\Client 模拟http 请求,如果不会用 直接换成curl函数
            $result = $client->get($url)->getBody()->getContents();
            echo $result;
            //die();
            $api_data = json_decode($result, true);
            //$api_data 里就是我们要获取的openid
        }
        $url = urlencode('https://d-fangfei.bigchun.com/index/index/wxlogin');
        $this->assign('url', $url);
        return $this->view->fetch();
    }
    
前端代码

获取静默授权获取code

2.以snsapi_userinfo为scope发起的网页授权

这种方式是授权获取,会弹出让用户确认获取资料按钮

使用场景,可以获取用户openid,头像,昵称,性别等资料

$wxurl = https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri={$url}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

注意参数说明:

appid=你的APPID

{$url}回调的url地址,url需要用urlencode编码

scope = snsapi_userinfo

静默授权类型

使用说明

$wxurl 这个链接地址是固定的拼接方式,微信官网有文档点击我获取

把拿到的这个连接给前端,前端通过让用户触发这个链接,跳转获取微信的code参数,或者自己通过代码触发跳转

微信跳转后得到的链接 https://domain.com/index/index/wxlogin?code=051pYGkl2bQ3S54TUxll2ttJ6Z2pYGk0&state=STATE 

后面多了code参数和state参数,如果跳转的是后端,后端直接获取code就可以,如果跳转的是前端, 前端截取url,拿到code传给后端

实现过程截图

$wxurl必须在微信里打开才能获取到code,开发调试请使用微信开发者工具,获取结果如下:

{"openid":"obBHk04gFkeKsRVDowMfXn-LLYpU","nickname":"D永涛","sex":1,"language":"zh_CN","city":"深圳","province":"广东","country":"中国","headimgurl":"https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/DYAIOgq83eremdfYmic4MpxiadSdloCicKKNOdMZCIIQdwmiaPluD8NDVxXN5axqc9kmVGxVoFo88UkEy9GPKpicQUw\/132","privilege":[],"unionid":"oKzvn1ZU_Ne_4or8VLwhtZxlJOJU"}

实现截图

1.触发截图

 

redirect_uri 参数错误 公众号H5授权登录原理_第4张图片

2.拼接上code后得到的结果

redirect_uri 参数错误 公众号H5授权登录原理_第5张图片

实现代码

//后台实现代码
public function wxlogin()
    {
        $appid = '';
        $appsecret = '';
        $input = input();
        if(!empty($input['code'])){
            $url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$input['code'].'&grant_type=authorization_code';//微信接口地址,参考接口文档
            $client = new Client(); //GuzzleHttp\Client 模拟http 请求,如果不会用 直接换成curl函数
            $result = $client->get($url)->getBody()->getContents();
            $api_data = json_decode($result, true);
            if(!empty($api_data['openid'])){
                $url = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$api_data['access_token'].'&openid='.$api_data['openid'].'&lang=zh_CN';//微信接口地址,参考接口文档
                $client = new Client();
                $result = $client->get($url)->getBody()->getContents();
                $userinfo = json_decode($result, true);
                print_r($userinfo);
            }
        }
        $url = urlencode('https://d-fangfei.bigchun.com/index/index/wxlogin');
        $this->assign('url', $url);
        return $this->view->fetch();
    }
前端实现代码

微信授权登录

有问题可以加裙问我,我是群主721200119

 

你可能感兴趣的:(微信,javascript,公众号H5授权登录)