【原創】微信受權、獲取用戶openid-純前端實現——jsonp跨域訪問返回json數據會報錯的純前端解決辦法

近來，倒黴的後臺跟我說讓我拿個openid作微信支付使用，尋思很簡單，開始幹活。

首先引導用戶打開以下連接，只須要將appid修改成本身的就能夠，redirect_url寫你的重定向url

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

接下來若是參數沒錯能夠直接回到你redirect設置的url而且在後面加上了code，把url參數切割出來 拿到code，請求獲取openid，ajax請求：

 https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

 

注：須要appid和祕鑰 ，自行goodle或者去微信公衆平臺本身找。

那麼問題來了 這麼請求會跨域，我試過了get、post都不行，都會說你跨域 那怎麼辦？我想用jsonp嘗試下：

 可是出現了新的報錯，返回的是json類型，不是jsonp類型，控制檯報錯，首先明確一個問題咱們不可能去修改微信的官方代碼，那麼只好本身想辦法了，後臺仍是不願幫忙，只好去google看看怎麼能解決，果真，功夫不負有心人，找到yahoo ypl的方式，嘗試一下，成功。yahoo ypl以下：

還和上面同樣，只是改爲了yahoo的代理yql，至此成功拿到微信openid，說下每一步的意義吧：首先咱們不可改變的是，

1：要在純前端實現（後臺無論只好本身想辦法）

2：直接請求微信會說跨域，

3：jsonp會說返回值的問題

一步步解決，怎麼獲取微信的code，這個畢竟不是教微信的文章，自行去公衆平臺看

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

以後咱們拿到code，再去jsonp請求微信的獲取access_token（openid就這樣就能夠拿到，專業點說是獲取用戶信息），卻發現返回值是個json，只要請求到了那就是想辦法解決這個問題，因而引入ypl進行中轉，ypl是雅虎旗下一個用來轉換數據的，還有其餘不明白的朋友能夠加我qq：15274527。

附錄：受權返回頁面是這樣：http://url.html?code=code&state=STATE

　　附上個人裁切函數，直接就能夠拿到返回值，在使用使用經過.then(data=>{console.log(data)})就能夠看了

export let splitQuery = () =>{
    // 獲取href的query
    return new Promise((resolve,reject)=>{

        const url = window.location.search;
        var theRequest = new Object();  
         if (url.indexOf("?") != -1) {  
             var str = url.substr(1); 
             var strs = str.split("&"); 
             for(var i = 0; i < strs.length; i ++) {  
                 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
             }  
         }

         resolve(theRequest);


    })
  
}

 轉載請聲明，嚴禁