背景

        上篇分享了微信分享介面的文章，本篇分享微信授權介面的原始碼及使用說明。

        介面開發語言是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。

        通過第二步的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二維碼

原始碼下載地址

參考連結