黑马程序员技术交流社区

标题: 【上海校区】PHP实现微信网页登陆授权开发 [打印本页]

作者: 梦缠绕的时候    时间: 2020-1-2 09:16
标题: 【上海校区】PHP实现微信网页登陆授权开发
准备工作
网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。
在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。
授权流程说明
微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。
微信OAuth2.0授权登录目前支持authorization_code模式,适用于拥有server端的应用授权。该模式整体流程为:
  1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;
  2. 通过code参数加上AppID和AppSecret等,通过API换取access_token;
  3. 通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。
获取access_token时序图:

第一步:请求CODE
第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。
参数说明返回说明
用户允许授权后,将会重定向到redirect_uri的网址上,并且带上code和state参数
redirect_uri?code=CODE&state=STATE
若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数
redirect_uri?state=STATE
请求示例
登录一号店网站应用
https://passport.yhd.com/wechat/login.do
打开后,一号店会生成state参数,跳转到
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=eb407f95fbc413185209fd85931761c2#wechat_redirect
微信用户使用微信扫描二维码并且确认登录后,PC端会跳转到
https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

第二种获取code的方式,支持网站将微信登录二维码内嵌到自己页面中,用户使用微信扫码授权后通过JS将code返回给网站。
JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法:
步骤1:在页面中先引入如下JS文件(支持https):
<scriptsrc="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
步骤2:在需要使用微信登录的地方实例以下JS对象:varobj = new WxLogin({                         id:"login_container",                          appid: "",                          scope: "",                          redirect_uri: "",                         state: "",                         style: "",                         href: ""                       });
参数说明第二步:通过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
参数说明
返回说明
正确的返回:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE","unionid":"o6_bmasdasdsad6_2sgVt7hMZOPfL"}
错误返回样例:
{"errcode":40029,"errmsg":"invalidcode"}
刷新access_token有效期
access_token是调用授权关系接口的调用凭证,由于access_token有效期(目前为2个小时)较短,当access_token超时后,可以使用refresh_token进行刷新,access_token刷新结果有两种:
1. 若access_token已超时,那么进行refresh_token会获取一个新的access_token,新的超时时间;
2. 若access_token未超时,那么进行refresh_token不会改变access_token,但超时时间会刷新,相当于续期access_token。
refresh_token拥有较长的有效期(30天),当refresh_token失效的后,需要用户重新授权。
请求方法
获取第一步的code后,请求以下链接进行refresh_token:
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
参数说明返回说明
正确的返回:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
返回说明
正确的返回:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
错误返回样例:
{"errcode":40030,"errmsg":"invalidrefresh_token"}
注意:
1、Appsecret是应用接口使用密钥,泄漏后将可能导致应用数据泄漏、应用的用户数据泄漏等高风险后果;存储在客户端,极有可能被恶意窃取(如反编译获取Appsecret);
2、access_token为用户授权第三方应用发起接口调用的凭证(相当于用户登录态),存储在客户端,可能出现恶意获取access_token 后导致的用户数据泄漏、用户微信相关接口功能被恶意发起等行为;
3、refresh_token为用户授权第三方应用的长效凭证,仅用于刷新access_token,但泄漏后相当于access_token 泄漏,风险同上。
建议将secret、用户数据(如access_token)放在App云端服务器,由云端中转接口调用请求。
第三步:通过access_token调用接口
获取access_token后,进行接口调用,有以下前提:
1. access_token有效且未超时;
2. 微信用户已授权给第三方应用帐号相应接口作用域(scope)。
对于接口作用域(scope),能调用的接口有以下:
其中snsapi_base属于基础接口,若应用已拥有其它scope权限,则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作,直接跳转第三方网页带上授权临时票据(code),但会使得用户已授权作用域(scope)仅为snsapi_base,从而导致无法获取到需要用户授权才允许获得的数据和基础功能。
F.A.Q1.什么是授权临时票据(code)?
答:第三方通过code进行获取access_token的时候需要用到,code的超时时间为10分钟,一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数,进一步加强自身授权登录的安全性。
2.什么是授权作用域(scope)?
答:授权作用域(scope)代表用户授权给第三方的接口权限,第三方应用需要向微信开放平台申请使用相应scope的权限后,使用文档所述方式让用户进行授权,经过用户授权,获取到相应access_token后方可对接口进行调用。
3.网站内嵌二维码微信登录JS代码中style字段作用?
答:第三方页面颜色风格可能为浅色调或者深色调,若第三方页面为浅色背景,style字段应提供"black"值(或者不提供,black为默认值),则对应的微信登录文字样式为黑色。相关效果如下:
若提供"white"值,则对应的文字描述将显示为白色,适合深色背景。相关效果如下:

4.网站内嵌二维码微信登录JS代码中href字段作用?
答:如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配,可以自己提供样式文件来覆盖默认样式。举个例子,如第三方觉得默认二维码过大,可以提供相关css样式文件,并把链接地址填入href字段
.impowerBox .qrcode {width:200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display:none}
.impowerBox .status {text-align: center;}
相关效果如下:

获取用户个人信息(UnionID机制)接口说明
此接口用于获取用户个人信息。开发者可通过OpenID来获取用户基本信息。特别需要注意的是,如果开发者拥有多个移动应用、网站应用和公众帐号,可通过获取用户基本信息中的unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号,用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。
请求说明
http请求方式: GET
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
参数说明
返回说明
正确的Json返回结果:
{
"openid":"OPENID",
"nickname":"NICKNAME",
"sex":1,
"province":"PROVINCE",
"city":"CITY",
"country":"COUNTRY",
"headimgurl":"http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0",
"privilege":[
"PRIVILEGE1",
"PRIVILEGE2"
],
"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"

}
错误的Json返回示例:
{
"errcode":40003,"errmsg":"invalid openid"
}
调用频率限制
代码示例:
第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据code参数;
通过code参数加上AppID和AppSecret等,通过API换取access_token;
通过access_token进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。
Login.php如下:
返回  code state*/$appid = 'wxea1xxxxxxxx20cb62';$url = "https://open.weixin.qq.com/connect/qrconnect?appid=$appid&redirect_uri=http://zhiliaoke.com.cn/weixin.php&response_type=code&scope=snsapi_login&state=1&connect_redirect=1#wechat_redirect";
header('location:'.$url);
验证处理如下:
<?php$code = $_GET['code'];$state = $_GET['state'];//换成自己的接口信息$appid = 'XXXXX';$appsecret = 'XXXXX';if (empty($code)) $this->error('授权失败');<br>$token_url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$code.'&grant_type=authorization_code';$token = json_decode(file_get_contents($token_url));if (isset($token->errcode)) {echo '<h1>错误:</h1>'.$token->errcode;echo '<br/><h2>错误信息:</h2>'.$token->errmsg;exit;}<br>$access_token_url = 'https://api.weixin.qq.com/sns/oauth2/refresh_token?appid='.$appid.'&grant_type=refresh_token&refresh_token='.$token->refresh_token;//转成对象$access_token = json_decode(file_get_contents($access_token_url));if (isset($access_token->errcode)) {echo '<h1>错误:</h1>'.$access_token->errcode;echo '<br/><h2>错误信息:</h2>'.$access_token->errmsg;exit;}<br><br>$user_info_url = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$access_token->access_token.'&openid='.$access_token->openid.'&lang=zh_CN';//转成对象$user_info = json_decode(file_get_contents($user_info_url));if (isset($user_info->errcode)) {echo '<h1>错误:</h1>'.$user_info->errcode;echo '<br/><h2>错误信息:</h2>'.$user_info->errmsg;exit;}$rs =  json_decode(json_encode($user_info),true);//返回的json数组转换成array数组//打印用户信息echo '<pre>';<br>print_r($rs);echo '</pre>';<br>?>
微信第三方登录(静默授权和非静默授权)
用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。
微信的授权登录在日常应用中应用的非常广泛,越来越多的平台支持用户使用微信进行授权第三方登录
使用微信授权登录有哪些优势/好处;
1、用户量足够大,基本所有用户都会有微信,登录起来比较方便快捷;
2、微信作为一个开放平台,为众多公众号/服务开放了许多服务接口,让公众号能够为自己的用户提供更加个性、更加优质的产品服务;
open id 和 union id ,这两个id有什么区别;
1、openid:在关注者与公众号产生消息交互后,公众号可获得关注者的openid,同一个用户,在不同公众号或移动应用下对应有不同open id标识;
2、union id:同一个用户,在不同公众号或移动应用下unionID相同;前提是,如若需要做多个公众号以及移动应用账户互通,得到唯一身份标识union id,则需要将多个公众号或移动应用在微信开放平台进行绑定,然后我们才能给拿到unionid;
所以,如果某个应用或者服务,有联合登录甚至多个公众应用多账户互通,可以采用union id来进行账户体系的用户识别与合并;即微信平台可以通过union id 来进行基于多个公众号之间的账户体系互通与识别合并;
微信联合登录是怎么登录的,有几种登录方式;微信联合登录和微信授权登录【授权登录(非静默授权)与静默授权】
微信联合登录;也就是我们常用的微信移动端/PC端之间的扫码登录,PC端用微信扫码登录,微信移动端确认授权登录后,应用可以从微信拿到用户的open id或union id,将微信获取的用户信息与自己账户体系中的用户身份进行关联;
授权登录:需要用户确认登录,这样可以通过用户的个人确认,获取用户全面的信息,无论是否关注相关微信公众号等都可以获取。
静默授权不需要用户确认,只需要用户访问某个网页,属于嵌套在普通网页里的授权形式,但是只能获取到用户的唯一标示openid和union id,无法拿到用户的微信头像、微信名称等个人信息,对于用户的简单认证还是很有用的。
如何通过微信账户体系来做多应用、多平台之间的账户互通体系;如果某个服务同时分布在多个公众号中,账户体系如何建立;如何做到用户身份唯一识别;
1)、同一用户不同公众号/应用下open id不同,同一用户不同公众号/应用下unionid相同;
2)、建立应用账户体系时,通过union来进行多应用/平台之间的用户账户体系识别与合并;
3)、多应用/平台建立账户体系时,需要做到唯一user id对应唯一union id;
某个服务,包括移动app端、PC网页端、公众号端服务,那么用户使用微信授权登录的数据流转流程是怎么样的;
1、用户通过微信授权移动app服务;该应用服务即可通过接口获取用户的union id,这个时候,如果在数据库中没有查到该id,则识别为新用户,直接创建一个user id,该唯一user id与union id 对应;
2、用户通过微信扫码PC端授权联合登陆获取PC端服务;该应用服务即可通过接口获取用户的union id,这个时候,在数据库中查到有这个id,就会把pc登录这个账户合并到之前创建的唯一user id账户下;
3、用户通过关注该服务公众号,用微信授权登录公众号服务;该应用服即可通过接口获取用户的union id,这个时候,在数据库中查到有这个id,就会把公众号中登录的这个账户合并到之前创建的唯一user id账户下;
网页授权的两种scope的区别说明:
1、授权登录以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)特点:用户无感知;
2、静默授权以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。
特殊场景下静默授权:
对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。
网页授权流程:
1、引导用户进入授权页面同意授权,获取code
确保微信公众账号拥有授权作用域(scope参数)的权限的前提下引导用户去授权页面
参考链接:
scope为snsapi_base
注意:appid,redirect_uri,state这些要和后台协商好
https://open.weixin.qq.com/connect/oauth2/authorize?appid="+wx_appid+"&redirect_uri="+api.wx_reg+"&response_type=code&scope=snsapi_login,snsapi_userinfo&state=1,0#wechat_redirect
scope为snsapi_userinfo
https://open.weixin.qq.com/connect/oauth2/authorize?appid="+wx_appid+"&redirect_uri="+api.wx_reg+"&response_type=code&scope=snsapi_base,snsapi_userinfo&state=1,0#wechat_redirect


用户同意授权后
如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。
2、通过code换取网页授权access_token(后台操作)
页面跳回跳的url上redirect_uri/?code=CODE&state=STATE。code
通过code换取的是网页授权access_token,如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。


作者: 梦缠绕的时候    时间: 2020-1-2 09:16
有任何问题欢迎添加学姐微信
DKA-2018




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2