微信會員註冊開發【帶源碼】:網頁授權,得到code後在當前頁面獲取openid,js+php實現跨域請求



開發情景:

作者主頁:天際app工作室 http://home.zhubajie.com/7145093/

需要引導微信公衆平臺用戶點擊鏈接進入註冊頁面,在註冊頁面需要獲取用戶微信的openid。技術核心是需要藉助網頁授權,並且在得到授權code時通過js立刻獲取openid。

網上關於網頁授權後一步步獲取openid的文章大多是理論步驟的解說,落實到代碼上具體怎麼儘可能快的拿到openid的內容很少。筆者十分憤怒,決定寫下代碼和大家分享


這個過程需要一個前端頁面代碼和一個後端輔助程序,我這裏前端是html+js,後端是php。

直接上代碼,代碼裏註釋解釋的比較清楚:

前端:index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";>
<!-- 天際app工作室 http://home.zhubajie.com/7145093/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<title>會員註冊</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

 function callback(result) {  
        alert('cucess');  
        alert(result);  //輸出openid
    }  
    
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
    }


var code = getQueryString("code");

$.ajax({ 
      async: false, 
      url: "http://arvon2012.sinaapp.com/oauth2.php", //這是我的服務端處理文件php的
      type: "GET", 
      //下面幾行是jsoup,如果去掉下面幾行的註釋,後端對應的返回結果也要去掉註釋
      // dataType: 'jsonp', 
      // jsonp: 'callback', //jsonp的值自定義,如果使用jsoncallback,那麼服務器端,要返回一個jsoncallback的值對應的對象. 
      // jsonpCallback:'callback',
      data: {code:code}, //傳遞本頁面獲取的code到後臺,以便後臺獲取openid
      timeout: 5000, 
      success: function (result) { 
        callback(result);
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
          alert(textStatus); 
      } 
  });


</script>
</head>
<body>
</body>



下面是服務端對應的代碼,oauth2.php

<?php
//天際app工作室 http://home.zhubajie.com/7145093/
$code = $_GET['code'];//前端傳來的code值

$appid = "xxxxxxxxxxxxxxxx";
$appsecret = "xxxxxxxxxxxxxxxxxxxxxx";

//獲取openid
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$appsecret&code=$code&grant_type=authorization_code";

$result = https_request($url);

$jsoninfo = json_decode($result, true);
$openid = $jsoninfo["openid"];//從返回json結果中讀出openid

$callback=$_GET['callback'];  
// echo $callback."({result:'".$openid."'})"; 
echo $openid; //把openid 送回前端

function https_request($url,$data = null){
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    if (!empty($data)){
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
    }
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($curl);
    curl_close($curl);
    return $output;
}

?>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章