網頁授權,得到code後在當前頁面獲取openid,js+php實現跨域請求

阿新 • • 發佈：2019-01-11

需要引導微信公眾平臺使用者點選連結進入註冊頁面，在註冊頁面需要獲取使用者微信的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";> 

<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
$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;
}

?>

網頁授權,得到code後在當前頁面獲取openid,js+php實現跨域請求

需要引導微信公眾平臺使用者點選連結進入註冊頁面，在註冊頁面需要獲取使用者微信的openid。技術核心是需要藉助網頁授權，並且在得到授權code時通過js立刻獲取openid。網上關於網頁授權後一步步獲取openid的文章大多是理論步驟的解說，落實到程式碼上具體怎麼儘可

ajax獲取json數據及實現跨域請求

cgi size 域名 3.2 方便 nap 不清楚 anti dex 最近想練習一下ajax獲取json數據 , 首先上網找一些在線的可用來測試的接口. -----------------------------------------------------這裏是接口分

跨域請求（使用jsonp實現跨域請求）百度地圖api證逆地址解析獲取周邊資訊（pois）

新手程式設計師，新手部落格，如果那裡寫的不好，還請大神們補充，指錯最近專案裡面需要做一個電子圍欄的功能，我這邊做的就是需要把商戶的地址的經緯度存進資料庫，本來這些從百度地圖API裡面有Demo可以看，但是我是訪問的百度地圖的可以獲取經緯度以及根據經緯度進行周邊檢索的地址

微信網頁授權報code been used, hints: [ req_id: XYv1Ha07042046 ]

web 獲取 UNC color 微信網頁授權 oauth image 授權 use 先貼上代碼： public function index() { $code = input(‘get.code‘); $tool = n

在頁面跳轉的時候，在跳轉後的頁面中使用js 獲取到頁面跳轉的url中攜帶的引數。

common.js程式碼 //獲取URL中的引數..等等function getQueryString(name){ var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)"); var r = window.location.

input[type='file']在選擇好要上傳的圖片後當前頁面實現預覽

需求在開發中，我們有時候要實現這種效果：在選擇要上傳的圖片後，如果頁面只是給出選擇檔案的名字的話，未免會降低使用者體驗，就比如，你要更換你賬戶的頭像，本地選擇好頭像後，而客戶端並沒有反饋，你無法預覽你的頭像，那豈不是非常不人性化？所以我們要達到的效果就是，當你在選擇好圖片後，

提升統計頁面獲取資料效率的實現思路

ROR專案中經常會有統計頁面的需求。統計頁面由於資料量和運算量較大，因此不同的資料獲取計算方法，可能對頁面載入的速度有極大的影響（可能載入時間會差10倍以上）。下面分享一下我最近用過的一種方法（其實應該說是思路）應用場景——比如我需要統計全國各個省份下，在指

AJAX 跨域請求 - JSONP獲取JSON數據

tel -name 跨域訪問服務器 utf pen domain nbsp XML 1、什麽是JSONP？　　JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callb

Ajax 調用webservice 解決跨域請求和發布到服務器後本地調用成功外網失敗的問題

.org webmethod names -h com strong helper 解決 requested webservice 代碼 1 /// <summary> 2 /// MESService 的摘要說明 3

jQuery使用ajax跨域請求獲取數據

自動生成 pac 異步部分 pap class 附加 activex 方便 jQuery使用ajax跨域請求獲取數據跨域是我在日常面試中經常會問到的問題，這詞在前端界出現的頻率不低，主要原因還是由於安全限制(同源策略，即JavaScript或Cookie只能訪

網頁中的跨域請求同源策略、跨域解決方案

品習知識點簡單表述幾個概念，詳解@度娘。 1、同源策略，瀏覽器最核心的安全功能，在無授權情況下，只允許讀寫相同源的資源。其中源（Origin）指的是協議、域名、介面，同源即三者相同。 2、預檢請求，瀏覽器出於安全策略，在跨域請求資料時候預先發起請求，以知是否可跨域請求資料的請求。關

django設定並獲取cookie/session，檔案上傳，ajax接收檔案，post/get請求及跨域請求等的方法

django設定並獲取cookie/session，檔案上傳，ajax接收檔案等的方法： views.py檔案： from django.shortcuts import render,HttpResponse,redirect import datetime import json from

vue 跨域請求，後端cookie session取不到

雖然後端設定了可以跨域請求，但是後臺設定到cookie中的session取不到！這時候mac電腦自己設定ngaix代理！ mac電腦系統重灌了，記錄一下安裝nginx的過程： 1、開啟終端（cmd） 2、安裝Command Line tools

通過jsonp來實現跨域訪問獲取資料！！！

通過jsonp來實現跨域訪問獲取資料的原理是什麼？通俗一點就是通過<script src="你要訪問的連結" type="text/javascript"></script>中的src來訪問你想要獲取資料的網址，並獲取資料。（不要問這啥這樣做就可以，

jQuery使用JSONP實現跨域獲取資料的三種方法詳解

本文例項講述了jQuery使用JSONP實現跨域獲取資料的三種方法。分享給大家供大家參考，具體如下：第一種方法是在ajax函式中設定dataType為'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a

我也說說Nginx解決前端跨域問題，正確的Nginx跨域配置（後端Nginx CORS跨域配置、CORS設定，後端允許跨域請求）

最近連續兩個朋友問我跨域相關問題，我猜想可能不少朋友也遇到類似問題，我打算寫個部落格聊一下我實際使用的配置，先說明一下，我並不太瞭解這配置，沒精力去了解太多，但我覺得其中有一些關鍵的小注意點，可能有些初學者不太注意到，導致配置有問題，本文章可能只對新手有點幫助，如果你有好

前端對接後端api踩坑之ajax跨域請求

業務場景：前後端分離需要對接資料介面。 BUG：前端ajax請求後端接口出現跨域問題，如下圖。翻譯：因為響應頭沒有"Access-Control-Allow-Origin"，所以介面拒絕把資料返回給前端。什麼是Access-Control-Allow-Origin? Acc

Ajax跨域請求——jsonp獲取json資料

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題；例如在同一個系統中，我們進行了分散式分域名的部署，但是在這個域裡面，我們需要通

node後端使用jwt實現跨域認證--生成token、驗證token是否無效和過期

JSON Web Token（縮寫 JWT）是目前最流行的跨域認證解決方案引入jwt var jwt = require('js

【Azure API 管理】APIM CORS策略設定後，跨域請求成功和失敗的Header對比實驗

在文章“從微信小程式訪問APIM出現200空響應的問題中發現CORS的屬性[terminate-unmatched-request]功能”中分析了CORS返回空200的問題後，進一步對APIM的CORS策略進行驗證，深入學習<CORS 跨域資源共享>。首先，我們已經學習到COR

網頁授權,得到code後在當前頁面獲取openid,js+php實現跨域請求

相關推薦