资料

1.微信官网--网页授权

2.官网----测试版公众号
博客---微信公众平台开发——微信授权登录（OAuth2.0）

3.官网--网页扫码登录
博客--微信开放平台开发——网页微信扫码登录（OAuth2.0）

慕课网视频
学生笔记

实现步骤

/*
1 第一步：用户同意授权，获取code
2 第二步：通过code换取网页授权access_token和opened
3 第三步：刷新access_token（如果需要）
4 第四步：根据openid和access_拉取用户信息(需scope为 snsapi_userinfo)
5 附：检验授权凭证（access_token）是否有效

此例子
回掉地址是  http://www.vipjianzhi.cn/callback.php
*/

我这里在我自己的网站上做了测试，代码同上。下面的可以不看.我们访问index.php页面，扫码确认后获取到code直接跳转到callback.php页面

• 注意1：我们做测试的时候，是不可以用pc端的，也不可以在微信手机直接打开。我们需要扫码才可以。这里推荐一个生成二维码的网站 草料二维码

草料二维码

• 注意2:在微信公众号配置网页账号的时候，我看资料上写的是写全路径，比如http://www.qq.com/login.html,但是我这样写发现不行。我把后面的uri去掉，直接写域名就可以了http://www.qq.com/
  
  image.png

测试1 scope=snsapi_base

    // callback.php  
          <?php
              //此函数可以获取到access_token和opened
            function getUserOpenId(){
                // 2.获取到网页授权的access_token和openid
                $appid = "wxf2a6e367141226f2";
                $appsecret = "1913207444c948b1c9e69de89132e529";
                $code = $_GET['code'];
                // 此处的url是 微信-第二步：通过code换取网页授权access_token
                $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$appid."&secret=".$appsecret."&code=".$code."&grant_type=authorization_code";
                $res = file_get_contents($url);
                echo'<pre>';
                var_dump($res);
                echo'</pre>';
                }
            getUserOpenId();

          
            // index.php
                       function getCode(){
                // 1.获取到code
                $appid = "wxf2a6e367141226f2";
                $redirect_uri = urlencode("http://www.vipjianzhi.cn/callback.php");
                $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$appid."&redirect_uri=".$redirect_uri."&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
                header('location:'.$url);
        }

        getCode();
            getBaseInfo();
    ~如果没问题，应该显示以下代码
                    {
               "access_token":"ACCESS_TOKEN",
               "expires_in":7200,
               "refresh_token":"REFRESH_TOKEN",
               "openid":"OPENID",
               "scope":"SCOPE",
               "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
            }

测试1`scope=snsapi_base`结果打印

测试1`scope=snsapi_base`结果json_decode($res)之后

测试1`snsapi_userinfo `结果

测试1，`snsapi_userinfo `，如果已经确认过之后，再次扫码的结果

• 测试2:获取用户的详细信息

// index.php----scope=snsapi_userinfo
                       function getCode(){
                // 1.获取到code
                $appid = "wxf2a6e367141226f2";
                $redirect_uri = urlencode("http://www.vipjianzhi.cn/callback.php");
                $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$appid."&redirect_uri=".$redirect_uri."&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
                header('location:'.$url);
        }

        getCode();
<?php
//  callback.php ----scope=snsapi_base
              //此函数最终获得的是用户的详细信息
function getUserInfo(){
        // 2.获取到网页授权的access_token
        $appid = "wxf2a6e367141226f2";
        $appsecret = "1913207444c948b1c9e69de89132e529";
        $code = $_GET['code'];
        // 此处的url是 微信-第二步：通过code换取网页授权access_token
        $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$appid."&secret=".$appsecret."&code=".$code."&grant_type=authorization_code";
         $res = file_get_contents($url);
        $res = json_decode($res);
        $access_token = $res->access_token;
        $openid = $res->openid;
        // 这一步，是获取用户的详细信息
        $url = $url = "https://api.weixin.qq.com/sns/userinfo?access_token=".$access_token."&openid=".$openid."&lang=zh_CN";
        $res = file_get_contents($url);
        $res = json_decode($res);
        echo '<pre>';
        var_dump($res);
        echo '</pre>';
   }
getUserOpenId();

测试2，打印用户详情结果`lang=zh_CN`

• 注意：如果我们刚开始在index.php页面中获取 code的时候，使用的是scop= snsapi_base，我们得到的结果是下面的图，并不能得到用户的详细信息。()虽然此时已经获取了openid和access_token
  
  image.png
• 我们如果选择是lang=zh_CN,有可能会出现图测试2，打印用户详情结果那样的结果，我也测试了下lang=en
  
  `lang=en`

以下是慕课网截屏笔记

image.png

image.png

image.png