微信网页授权登录获取用户信息

最近项目中需要微信登录拿到用户信息的功能，于是在微信开放文档中学习了一下

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

下面简单介绍一下功能实现的步骤，具体可以看微信的文档

 

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：拉取用户信息(需scope为 snsapi_userinfo)

 

第一步，得到用户授权的code

发起授权请求，https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的公众号APPID&redirect_uri=重定向后的地址&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

参数	是否必须	说明
appid	是	公众号的唯一标识
redirect_uri	是	授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
response_type	是	返回类型，请填写code
scope	是	应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
state	否	重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节
#wechat_redirect	是	无论直接打开还是做页面302重定向时候，必须带此参数

以下是定义授权方法以及拿到code后请求后端代码的操作 

mounted() {
    if (window.location.href.indexOf("code") > -1) {
      axios
        .get("https://housesafe.nnkcy.com/outapis/WXLogin.php", {
          params: {
            code: this.getQueryVariable("code"),
          },
        })
        .then((res) => {
          console.log("数据是:", res);
          this.$router.replace("/");
          
        })
        .catch((e) => {
          console.log(e);
          alert("获取数据失败");
        });
    }
  },
  methods: {
    login() {
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=您的地址，也可以为当前页&response_type=code&scope=snsapi_userinfo`;
    },
}

获取地址栏参数的方法 

getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    }

 

重定向地址出现https变为http的现象时，只需在地址末尾加上 / 即可

第二步，通过code拿到access_token，此步骤需放在服务端操作

为何要放在服务端呢，由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

获取code后，请求以下链接获取access_token：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数	是否必须	说明
appid	是	公众号的唯一标识
secret	是	公众号的appsecret
code	是	填写第一步获取的code参数
grant_type	是	填写为authorization_code

 

正确时返回的JSON数据包如下：

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

 正确返回值后得到json数据，拿到access_token就可以获取用户信息了

第三步：拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

请求方法

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

 

参数说明

参数	描述
access_token	网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
openid	用户的唯一标识
lang	返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语

返回说明

正确时返回的JSON数据包如下：

{   
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":       "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

列一下后端代码 ，仅供参考，php实现

public function getUserAccessToken($code) {
            $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$this->appId&secret=$this->appSecret&code=$code&grant_type=authorization_code";
            $res = json_decode($this->httpGet($url));
            $access_token = $res->access_token;
            if ($access_token) {
                $data = array(
                    "access_token" => $access_token,
                    "openid" => $res->openid
                );
                $userinfo = $this->getUser($access_token,$res->openid);
            }else{
                return $res;
            }
        return $userinfo;
    }
public function getUser($access_token,$openid) {
            $url = "https://api.weixin.qq.com/sns/userinfo?access_token=$access_token&openid=$openid&lang=zh_CN";
            $res = json_decode($this->httpGet($url));
            $nickname = $res->nickname;
            if ($nickname) {
                $data = array(
                    "headimgurl"=> $res->headimgurl,
                    "sex" => $res->sex,
                    "city" => $res->city,
                    "province" => $res->province,
                    "country" => $res->country,
                    "nickname" => $nickname,
                    "unionid" =>$res->unionid
                );
                
            }else{
                return $res;
            }
        return $data;
    }
private function httpGet($url) {
        return file_get_contents($url);
    }

 下面列出一下可能会出现的错误码

获取code时

返回码	说明
10003	redirect_uri域名与后台配置不一致
10004	此公众号被封禁
10005	此公众号并没有这些scope的权限
10006	必须关注此测试号
10009	操作太频繁了，请稍后重试
10010	scope不能为空
10011	redirect_uri不能为空
10012	appid不能为空
10013	state不能为空
10015	公众号未授权第三方平台，请检查授权状态
10016	不支持微信开放平台的Appid，请使用公众号Appid

 获取access_token时（code无效，code使用一次后失效，再次调用需重新授权）

{"errcode":40029,"errmsg":"invalid code"}

拉取用户信息时（openid无效）:

{"errcode":40003,"errmsg":" invalid openid "}