H5微信网页授权接口开发 PHP[附源码]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gaofei880219/article/details/80309222

背景

        上篇分享了微信分享接口的文章,本篇分享微信授权接口的源码及使用说明。

        接口开发语言是PHP,是通过两次跳转实现的。前端跳转到服务器接口获取用户信息,并通过追加用户信息(如:openid、昵称、头像等)地址参数跳回前端页面。


实现方法

        根据文档说明,网页授权流程分为四步。这里主要说下其中的三步,

        第一步:用户同意授权,获取code。

        首先是要有一个认证的微信公众号,进入 公众号设置/功能设置/网页授权域名,填入授权回调接口域名。

        前端页面js代码,

var appID = "xxx"; // 公众号AppID
var redirectUri = "http://xxx/oauth2.php"; // 授权接口地址
var state = "xxx"; // 状态标识(用于项目拓展)
if(openid == null || openid == undefined || openid == ''){ // 通过判断地址参数是否有openid来确定是否要跳转授权
        var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appID + "&redirect_uri=" + redirectUri + "&response_type=code&scope=snsapi_userinfo&state=" + state + "#wechat_redirect";
        window.location.href = strUrl;
}

会弹出微信授权页面(如果只是获取用户openid,把scope设为snsapi_base,就会静默授权)。

        如果出现10003错误代码,要检查公众号回调域名配置。

        


        第二步:通过code换取网页授权access_token。

        接口代码,

$appId = 'xxx'; // 公众号AppId
$appSecret = 'xxx'; // 公众号AppSecret
$code = $_GET['code'];
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appId&secret=$appSecret&code={$code}&grant_type=authorization_code";

        这一步取到网页授权access_token的同时,也获取到了openid。


        第三步:刷新access_token。


        第四步:拉取用户信息(需scope为 snsapi_userinfo)。

        通过第二步的access_token和openid拉取用户信息,接口代码,

$a = file_get_contents($url);
$json=(array)json_decode($a);
if(!isset($json['errcode'])){
    $openid = $json['openid'];
    $url ="https://api.weixin.qq.com/sns/userinfo?access_token=".$json['access_token']."&openid=".$json['openid'];
    $a = file_get_contents($url);
    $json = (array)json_decode($a);
    $nickname = $json['nickname'];
    $headimgurl = $json['headimgurl'];
    // 追加用户信息(如:openid、昵称、头像等)地址参数跳回前端页面	
    header("Location:http://html5.rockstudio.cn/Demo/weixin/oauthDemo/index.html?openid=$openid&nickname=$nickname&headimgurl=$headimgurl");
}

        当然如果项目有安全考虑,可以自行加入token加密参数(如md5等)。


BTW

        1、为了方便接口拓展,使用state参数作为项目的标示,这样就可以多个项目调用同一个接口,

$state = $_GET['state'];
// ...
switch($state){
        case 'project1':
	        // ...	
	break;
	case 'project2':
		// ...
	break;
        case 'project3':
	       // ...
        break;
        default:
                echo "ERROR";
}

       2、通过用cookie记录openid等信息,可以避免用户二次授权的情况。这里前端以轻为主,不使用cookie功能。如有这个需求看下这篇文章《用cookie解决新版微信中H5页面底部白条问题》。

        3、由于用户昵称是通过地址参数传递到前端,如果昵称里有emoji表情,会出现乱码的情况。可以通过php的json_decode和json_encode函数给参数编码。


Demo二维码

        


源码下载地址

        https://download.csdn.net/download/gaofei880219/10413256


参考链接

        微信网页授权文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

展开阅读全文

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