php微信開放平台--第三方網頁微信掃碼登錄(OAuth2.0)


第一、OAuth2.0

  OAuth(開放授權)是一個開放標准,允許用戶讓第三方應用訪問該用戶在某一網站上存儲的私密的資源(如照片,視頻,聯系人列表),而無需將用戶名和密碼提供給第三方應用。
  允許用戶提供一個令牌,而不是用戶名和密碼來訪問他們存放在特定服務提供者的數據。每一個令牌授權一個特定的網站(例如,視頻編輯網站)在特定的時段(例如,接下來的2小時內)內訪問特定的資源(例如僅僅是某一相冊中的視頻)。這樣,OAuth允許用戶授權第三方網站訪問他們存儲在另外的服務提供者上的信息,而不需要分享他們的訪問許可或他們數據的所有內容。
第二、目標
  我們這里主要模擬使用OAuth2.0,用戶通過掃描我們網頁應用的二維碼並進行授權登錄來獲取用戶的基本信息的過程。詳細的接口相關信息可以在微信開放平台上查看:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN
第三、前期准備(獲取微信開發者權限)
  我們這里主要講的是網站(Web)應用,網站應用微信登錄是基於OAuth2.0協議標准構建的微信OAuth2.0授權登錄系統(即上面的協議)。在微信客戶端授權登錄(獲取用戶信息)的可以查看:http://www.cnblogs.com/0201zcr/p/5131602.html

  在進行微信OAuth2.在進行微信OAuth2.0授權登錄接入之前,在微信開放平台注冊開發者帳號,並擁有一個已審核通過的網站應用,並獲得相應的AppID和AppSecret,申請微信登錄且通過審核后,可開始接入流程。

 

3.1、注冊開發者賬號
可以在https://open.weixin.qq.com/ 這里申請開發的賬號。由於是騰訊的網頁,這里可以直接通過 QQ號進行登錄。
3.2、提交網站應用審核
在已經登錄的界面中選擇“管理中心”——》網站應用——》創建網站應用

填寫過后,還有有一個頁面需要填寫,提交一份紙質版申請書掃描件(會提供模板,我們下載再來填寫后,需蓋章,簽名),配置回調域名(掃碼登錄后會跳轉的頁面)等。
  之后提交審核即可,等微信審核通過,我們即可獲得我們需要的網頁應用的appid和AppSecret,並配置后回調的域名了(這三樣是我們開發所必須的)。

4、授權流程說明

微信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時序圖:

5、獲取網頁的二維碼

當我們通過微信的認證,獲取到了appid和AppSecret,並配置了回調的域名。我們就已經可以獲取屬於我們網頁的二維碼了,獲取的方式很簡單,只需打開一個微信的鏈接,加上我們的appid和回調域名即可在網頁上面打開二維碼,用戶用微信客戶端掃碼並授權登錄之后即會跳轉到我們配置的回調域名下。
注意:
1、這里填寫的是域名(是一個字符串),而不是URL,因此請勿加http://等協議頭;

2、授權回調域名配置規范為全域名,比如需要網頁授權的域名為:www.qq.com,配置以后此域名下面的頁面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以進行OAuth2.0鑒權。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com無法進行OAuth2.0鑒權

5.1、請求url說明

第三方使用網站應用授權登錄前請注意已獲取相應網頁授權作用域(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的網址上,並且帶上code和state參數
redirect_uri?code=CODE&state=STATE若用戶禁止授權,則重定向后不會帶上code參數,僅會帶上state參數
redirect_uri?state=STATE
生成二維碼代碼

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信掃碼登錄</title>
</head>
<body>
<div id="login_container"></div>
</body>
  <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<input type="hidden" value="{$url}" id="url">
{include file="public/css"}
{include file="public/js"}
<script>
    var url=$("#url").val();
    var obj = new WxLogin({

        id:"login_container",    //div的id

        appid: "wx84654355186541351",

        scope: "snsapi_login",

        redirect_uri: "http"+url,        //回調地址

        state: "",         //參數,可帶可不帶

        style: "",         //樣式  提供"black"、"white"可選,默認為黑色文字描述

        href: ""                 //自定義樣式鏈接,第三方可根據實際需求覆蓋默認樣式。
    });</script>
</html>

 

注意WxLogin方法在這個文件里:

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
 !function(a,b,c){
        function d(a){
            var c="default";
            a.self_redirect===!0?c="true":a.self_redirect===!1&&(c="false");
            var d=b.createElement("iframe"),
                    e="https://open.weixin.qq.com/connect/qrconnect?appid="+a.appid+"&scope="+a.scope+"&redirect_uri="+a.redirect_uri+"&state="+a.state+"&login_type=jssdk&self_redirect="+c;
                     e+=a.style?"&style="+a.style:"",
                    e+=a.href?"&href="+a.href:"",
                    d.src=e,
                    d.frameBorder="0",
                    d.allowTransparency="true",
                    d.scrolling="no",
                    d.width="300px",
                    d.height="400px";
            var f=b.getElementById(a.id);
            f.innerHTML="",
                    f.appendChild(d)
        }a.WxLogin=d}(window,document);

5.2、事例1:

一號店的微信二維碼鏈接如下:

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

 將其復制到瀏覽器中打開即可獲得一號店的二維碼,二維碼頁面如下:

通過使用微信客戶端的掃一掃功能,掃描該二維碼,即會跳轉到上面填寫redirect_uri所在的地址上。假如用戶同意授權,這里就獲得了微信返回的code參數了。

6、獲取用戶信息

假如前面已經獲得code。我們可以通過code參數去獲取用戶openid和access_token,進而獲得用戶的信息。

6.1、通過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":"invalid code"}

6.2、通過access_token獲取用戶的基本信息
獲取的前提條件

access_token有效且為超時;

微信用戶已授權給第三方應用賬號相應接口作用域(scope)【在二維碼生成連接那里填寫

使用snsapi_base作用域的授權是掃碼之后無需用戶點擊授權,掃碼后直接跳轉,用戶感覺不到授權了,但這種授權方式能獲取的數據量有限,這里我們要獲取用戶的基本信息,我們需要使用snsapi_userinfo授權。使用snsapi_userinfo授權,掃碼后出現類似於下面的授權界面

此接口用於獲取用戶個人信息。開發者可通過OpenID來獲取用戶基本信息。特別需要注意的是,如果開發者擁有多個移動應用、網站應用和公眾帳號,可通過獲取用戶基本信息中的unionid來區分用戶的唯一性,因為只要是同一個微信開放平台帳號下的移動應用、網站應用和公眾帳號,用戶的unionid是唯一的。換句話說,同一用戶,對同一個微信開放平台下的不同應用,unionid是相同的。請注意,在用戶修改微信頭像后,舊的微信頭像URL將會失效,因此開發者應該自己在獲取用戶信息后,將頭像圖片保存下來,避免微信頭像URL失效后的異常情況。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"

}

7、總結

最近着手開發了微信網頁掃碼登錄和公眾號授權登錄,兩者的開發很類似。
    兩者都可以通過微信客戶端掃碼授權的方式,讓第三方頁面獲得微信用戶的一些基本信息(昵稱、性別、所在地、在微信唯一標示等……)。他們都是通過提供一個鏈接讓用戶授權的方式。但網頁版需要在頁面打開二維碼之后授權,而公眾號則需要用戶先關注了我們的公眾號,然后點開公眾號里面的鏈接,確認授權即可。
    網頁掃碼登錄需要將授權的鏈接(二維碼鏈接)在網頁中打開、而公眾號授權登錄的鏈接必須要微信客戶端中打開。
    無論網頁掃碼登錄還是在公眾號中授權登錄,都是通過授權的方式獲得一個code參數,之后通過code參數獲取access_token和openid和通過access_token和openid去獲取用戶的基本信息的請求鏈接是一樣的。


8、在php使用該功能可以封裝一個公共的類class_weixin_adv,在這里主要用到的是curl擴展,代碼如下:

 1 <?php  2 /**  3  * 微信SDK  4  * pan041ymail@gmail.com  5 */  6 class class_weixin_adv  7 {  8 var $appid = "";  9 var $appsecret = ""; 10 //構造函數,獲取Access Token 11 public function __construct($appid = NULL, $appsecret = NULL) 12  { 13 if($appid){ 14 $this->appid = $appid; 15  } 16 if($appsecret){ 17 $this->appsecret = $appsecret; 18  } 19 $this->lasttime = 1395049256; 20 $this->access_token = "nRZvVpDU7LxcSi7GnG2LrUcmKbAECzRf0NyDBwKlng4nMPf88d34pkzdNcvhqm4clidLGAS18cN1RTSK60p49zIZY4aO13sF-eqsCs0xjlbad-lKVskk8T7gALQ5dIrgXbQQ_TAesSasjJ210vIqTQ"; 21 if (time() > ($this->lasttime + 7200)){ 22 $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".$this->appsecret; 23 $res = $this->https_request($url); 24 $result = json_decode($res, true); 25 $this->access_token = $result["access_token"]; 26 $this->lasttime = time(); 27  } 28  } 29 //獲取用戶基本信息 30 public function get_user_info($openid) 31  { 32 $url = "https://api.weixin.qq.com/sns/userinfo?access_token={$this->access_token}&openid={$openid}&lang=zh_CN"; 33 $res = $this->https_request($url); 34 return json_decode($res, true); 35  } 36 //https請求 37 public function https_request($url, $data = null) 38  { 39 $curl = curl_init(); 40 curl_setopt($curl, CURLOPT_URL, $url); 41 curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); 42 curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE); 43 if (!empty($data)){ 44 curl_setopt($curl, CURLOPT_POST, 1); 45 curl_setopt($curl, CURLOPT_POSTFIELDS, $data); 46  } 47 curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); 48 $output = curl_exec($curl); 49 curl_close($curl); 50 return $output; 51  } 52 }

在我們需要用的方法里引入這個類,在這里本人使用該類的get_user_info的方法他會報錯原因可能是在使用該方法時,又從新走了一遍該類的構造方法所以在獲取用戶的個人信息時沒有用他類里面的方法,代碼如下:

 1 function oauth2(){  2 include('./class_weixin_adv.php');  3 $appid="";  4 $secret="";  5 $weixin=new class_weixin_adv($appid, $secret);  6 if (isset($_GET['code'])){  7 $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$secret}&code={$_GET['code']}&grant_type=authorization_code";  8 $res = $weixin->https_request($url);  9 $res=(json_decode($res, true)); 10 11 // $row=$weixin->get_user_info($res['openid']); 12 13 $url = "https://api.weixin.qq.com/sns/userinfo?access_token={$res['access_token']}&openid={$res['openid']}&lang=zh_CN"; 14 $res =https_request($url); 15 $res=json_decode($res, true); 16 if ($res['openid']) { 17 //用戶的個人信息獲取成功,我們可以進行下一步操作,$res是用戶的個人信息 18 return $res; 19 }else{ 20 return ('授權出錯,請重新授權!'); 21  } 22 }else{ 23 return "NO CODE"; 24  } 25 } 26 //https請求 27 function https_request($url, $data = null) 28 { 29 $curl = curl_init(); 30 curl_setopt($curl, CURLOPT_URL, $url); 31 curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); 32 curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE); 33 if (!empty($data)){ 34 curl_setopt($curl, CURLOPT_POST, 1); 35 curl_setopt($curl, CURLOPT_POSTFIELDS, $data); 36  } 37 curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); 38 $output = curl_exec($curl); 39 curl_close($curl); 40 return $output; 41 }

 

 

9、以上程序如果在本地測試需要將本地的服務器映射到外網上否則微信的服務器不能成功回調到你的服務器上,所以這個時候我們需要下載ngrok,下載地址 :https://ngrok.com/

下載成功之后我就可以解壓,如下

1、我們在doc命令中找到ngrok.exe的文件夾

2、在執行ngrok http 80 的命令就會出現

,我在測試的時候,這個地址鏈接不穩,有時候連不上,(建議將電腦的防火牆關閉)。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM