微信授權獲取用戶openid前端實現


近來,倒霉的后台跟我說讓我拿個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和秘鑰 , 且密鑰只能使用測試appsecret
 
那么問題來了 這么請求會跨域,我試過了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);
 
 
    })
  
}


免責聲明!

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



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