微信登录服务器授权是什么,微信网页授权登录获取用户信息

最新推荐文章于 2024-07-05 01:12:33 发布

weixin_39831242

最新推荐文章于 2024-07-05 01:12:33 发布

阅读量437

点赞数

文章标签：微信登录服务器授权是什么

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

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: {

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