|- 微信 -| 网页授权登录

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/QAC_Boy/article/details/74163343

微信公众平台技术文档之微信网页授权:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

由于本人也是小白一枚,至于所涉及到的原理方面也就不多做解释了,有不懂的话可以直接问度娘!下面我就来说说具体操作的相关事项!(完整代码,在文章的最后面贴出!)

好了,话不多说!实践走起

  • 第一步,根据官方说明文档,我们得到如下信息:

    1、在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头
    2、授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.htmlhttp://www.qq.com/login.html 都可以进行OAuth2.0鉴权http://pay.qq.comhttp://music.qq.comhttp://qq.com无法进行OAuth2.0鉴权
    3、如果公众号登录授权给了第三方开发者来进行管理,则不必做任何设置,由第三方代替公众号实现网页授权即可
    这里写图片描述
    示例如下:
    这里写图片描述

  • 第二步:通过了第一步的配置,接下来我们就一试着获取用户的code操作了

    在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。

    参数说明:

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

所以呢,接下来的这些步骤都要很小心,不然,你就会发现,各种莫名的bug满天飞,然后你会改到怀疑人生的~~~毕竟细节决定成败!
注意要点如下:
- 注意英文大小写
- 注意各个参数的顺序
- 注意复制粘贴后,你的代码里所填的连接会不会突然多出换行符或者空格之类

好了,按照官方给的规则填完之后,我们先简单的将我们取到的code输出一下(本文皆是以snsapi_userinfo为例)
示例如下:

<h1>微信授权登录演示</h1>
    <h1>
        <a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=lalallalalalalalal&redirect_uri=http://holajm.cn/wechattest/testB.php&response_type=
code&scope=snsapi_userinfo&state=1#wechat_redirect ">你不点一下吗</a>
    </h1>

经过用户授权后,获取到用户code并输出

<?php
if (isset($_GET['code'])){
    echo $_GET['code'];
}else{
    echo "NO CODE";
}
?>

如果你没有获取到相应的code,说明你之前的参数填写出现了一些问题!请返回重新检查参数的填写!!!注意上面提到的几个注意点!!!
我们得到的用户code如下:

021lamd31AxvbLlalae31Qvtd31ilala

注意:用户同意授权后
如果用户同意授权,页面将跳转至
redirect_uri/?code=CODE&state=STATE。
code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

  • 第三步:将我们取到的用户code,再次填入连接的参数中,通过code换取网页授权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

按照官方给的规则填写,通过code换取网页授权access_token,连接替换如下(可以直接用本地浏览器访问):

https://api.weixin.qq.com/sns/oauth2/access_token?appid=lalalalalalalalala&secret=3alallalallaa0c610f2771lla760lala4&code=021lamd31AxvbLlalae31Qvtd31ilala&grant_type=authorization_code

然后我们将得到一条返回的json数据:

{"access_token":"lalalal-u6JkZv2Z2blgomDFgj6ecvGAvyfrxoFIMpF6BffeYdratvRzFHyR5jw7u1jNuCK07c45mEIsSutl8aHdoVgaEZrdrC4-_lalala",
"expires_in":7200,
"refresh_token":"la_ki5q9jyY6FoF66i0M8AN1NMH-cLKHdtsunnm6YpLQlIMKeJajtkFZGlaeFK84ViOPeMyF0Qps8apyDeUXljk_euQ3Qjf_Di46-lalala",
"openid":"lalalalalala_lalalaallaallal",
"scope":"snsapi_userinfo"}
参数 描述
access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID
scope 用户授权的作用域,使用逗号(,)分隔

错误时微信会返回JSON数据包如下(示例为Code无效错误):
{“errcode”:40029,”errmsg”:”invalid code”}
注意检查自己填写的信息!!!

  • 第四步:刷新access_token(这里建议刷新一下,虽然说得到的数据没有差异,但是有时候没刷新的话,可能在下一步就获取不到用户信息,会提示错误!)

    由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token有效期为30天,当refresh_token失效之后,需要用户重新授权。


请求方法
获取第二步的refresh_token后,请求以下链接获取access_token:
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

参数如下:

参数 是否必须 说明
appid 公众号的唯一标识
grant_type 填写为refresh_token
refresh_token 填写通过access_token获取到的refresh_token
老样子,按照官方给的规范填写,示例如下(可以直接用本地浏览器访问):
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=lallalalallalalla&grant_type=refresh_token&refresh_token=la_ki5q9jyY6FoF66i0M8AN1NMH-cLKHdtsunnm6YpLQlIMKeJajtkFZGlaeFK84ViOPeMyF0Qps8apyDeUXljk_euQ3Qjf_Di46-lalala
正确时,会得到服务器返回的一条json数据:
{"openid":"lalalalalala_lalalaallaallal",
"access_token":"lalalal-u6JkZv2Z2blgomDFgj6ecvGAvyfrxoFIMpF6BffeYdratvRzFHyR5jw7u1jNuCK07c45mEIsSutl8aHdoVgaEZrdrC4-_lalala",
"expires_in":7200,
"refresh_token":"la_ki5q9jyY6FoF66i0M8AN1NMH-cLKHdtsunnm6YpLQlIMKeJajtkFZGlaeFK84ViOPeMyF0Qps8apyDeUXljk_euQ3Qjf_Di46-lalala",
"scope":"snsapi_base,snsapi_userinfo,"}
参数 描述
access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
expires_in access_token接口调用凭证超时时间,单位(秒)
refresh_token 用户刷新access_token
openid 用户唯一标识
scope 用户授权的作用域,使用逗号(,)分隔

错误时微信会返回JSON数据包如下(示例为code无效错误):
{“errcode”:40029,”errmsg”:”invalid code”}
注意检查自己填写的信息!!!

  • 第五步:将我们获取到的openid和access_token重新在代入连接,拉取用户信息(需scope为 snsapi_userinfo)

请求方法
http:GET(请使用https协议) 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 英语

连接替换如下:

https://api.weixin.qq.com/sns/userinfo?access_token=lalalal-u6JkZv2Z2blgomDFgj6ecvGAvyfrxoFIMpF6BffeYdratvRzFHyR5jw7u1jNuCK07c45mEIsSutl8aHdoVgaEZrdrC4-_lalala&openid=lalalalalala_lalalalalalal&lang=zh_CN

正确时,会得到服务器返回的一条json数据:

{"openid":"lalalalalala_lalalalalalal",
"nickname":"随心",
"sex":1,
"language":"zh_CN",
"city":"漳州",
"province":"福建",
"country":"中国",
"headimgurl":"http:\/\/wx.qlogo.cn\/mmopen\/OzI37qy0WwrFlT94am4bNic9U4sH3eYicA17w4FkiaPxgrAmHdc4Pibs30VxdIMXluoHa006Gv0LzNoslbNWFSicJAyoKI7lhjk3z\/0",
"privilege":[]}
参数 描述
openid 用户的唯一标识
nickname 用户昵称
sex 用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
province 用户个人资料填写的省份
city 普通用户个人资料填写的城市
country 国家,如中国为CN
headimgurl 用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
privilege 用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)
unionid 只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。

错误时微信会返回JSON数据包如下(示例为openid无效):
{“errcode”:40003,”errmsg”:” invalid openid “}
注意检查自己填写的信息!!!如果你跳过了第四步,那么请检查一下自己的access_token是否有效!(祥见下方,附),失效的话,刷新看看,实在不行,重头在来~~~

附:检验授权凭证(access_token)是否有效
请求方法:
http:GET(请使用https协议) https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

参数说明:

参数 描述
access_token 网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同
openid 用户的唯一标识

返回说明
正确的JSON返回结果:
{ “errcode”:0,”errmsg”:”ok”}
错误时的JSON返回示例:
{ “errcode”:40003,”errmsg”:”invalid openid”}

具体步骤也就是这些,来稍稍做一下整理:
效果如图所示:
这里写图片描述

代码如下:

  • 第一:用于跳转的测试页面 (testA.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OAuth2.0网页授权演示</title>
</head>
<body>
<h1>微信授权登录演示</h1>
<h1>
//<a href="http://你的域名/索引文件">你不点一下吗</a>
<a href="http://holajm.cn/wechattest/index.php">你不点一下吗</a>
</h1>
</body>
</html>
  • 第二:用于获取用户code (index.php):
<?php
//$appid = "你的AppId"
$appid='wx6666666666666666'; 

//$redirect_uri = urlencode ( 'http://你的域名/getUserInfo.php' )
$redirect_uri = urlencode ( 'http://holajm.cn/wechattest/getInfotest.php' );

$url ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";

header("Location:".$url);
?>
  • 第三:处理和解析返回的用户数据 (getInfotest.php)
<?php
header ( "Content-type: text/html; charset=UTF-8" ); 
//$appid = "你的AppId"
$appid = "wx6666666666666666";

//$secret = "你的AppSecret" 
$secret = "66666666666666666666666666666666"; 

//取得code编码
$code = $_GET["code"];

//第一步:取得openid
$oauth2Url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$secret&code=$code&grant_type=authorization_code";
$oauth2 = getJson($oauth2Url);

//第二步:刷新信息(最好加上这一步,当初因为省去了这一步,出了些小问题)
$refresh_token=$oauth2["refresh_token"];
$refreshUrl="https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=$appid&grant_type=refresh_token&refresh_token=$refresh_token";
$refresh=getJson($refreshUrl);

//第三步:根据全局access_token和openid查询用户信息  
$access_token = $refresh["access_token"];  
$openid = $refresh["openid"];
$get_user_info_url = "https://api.weixin.qq.com/sns/userinfo?access_token=$access_token&openid=$openid&lang=zh_CN";
$userinfo = getJson($get_user_info_url);

//打印用户信息(我们只是为了解析出用户信息,所以呢,简单点就好了!)
print_userinfo($userinfo);
//print_r($userinfo);
function print_userinfo($userinfo){
    echo " 你好!亲爱的<strong>".$userinfo["nickname"]."</strong><br/>";
    echo "你的个人信息如下所示:"."<br/>";
    echo "头像:"."<img src=".$userinfo["headimgurl"]." width='132' height='132' /><br/>";
    echo "性别:";
    switch($userinfo["sex"]){
        case 0:
            echo "未知";
            break;
        case 1:
            echo "男";
            break;
        case 2:
            echo "女";
            break;
        default:
    }
    echo "<br/>";
    echo "所在国家:".$userinfo["country"]."<br/>";
    echo "所在城市:".$userinfo["province"].$userinfo["city"]."<br/>";
}

//解析json数据
function getJson($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($ch);
    curl_close($ch);
    return json_decode($output, true);
}
?>

参考博文: http://www.cnblogs.com/whowhere/p/5787247.html

展开阅读全文

没有更多推荐了,返回首页