前端-微信公眾號(hào)獲取code給后端換取openid 以及access_token 并拿到用戶相關(guān)信息

只含前端操作!1鸷椤叨恨!只含前端操作!M诙狻痒钝!只含前端操作!A《尽送矩!

首先,最先做的就是配置你的回調(diào)域名哪替,這里直接上圖(開(kāi)通公眾號(hào)這里不做贅述栋荸,畢竟只從事前端開(kāi)發(fā)工作)

公眾號(hào)開(kāi)發(fā)指南鏈接https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html



配置好回調(diào)域名以后,為了獲取code凭舶,需要打開(kāi)如下頁(yè)面:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的公眾號(hào)appid&redirect_uri=你想打開(kāi)的地址首頁(yè)&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect


如果用戶同意授權(quán)蒸其,頁(yè)面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE。

mounted()?{

????if(!window.localStorage.getItem('code')){?//?如果緩存localStorage中沒(méi)有微信openId库快,則需用code去后臺(tái)獲取

??????this.getCode()

????}?else?{

????????// 你的業(yè)務(wù)需求代碼

????}

??},

getCode?()?{?//?非靜默授權(quán),第一次有彈框

??????this.code?=?'';

??????var?local?=?window.location.href;//?獲取頁(yè)面url

??????var?appid?=?'你的公眾號(hào)appid';

??????this.code?=?this.getUrlCode().code;?//?截取code

??????console.log(this.code);

??????if?(this.code?==?null?||?this.code?===?'')?{?//?如果沒(méi)有code钥顽,則去請(qǐng)求

??????????window.location.href?=?`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=你想打開(kāi)的地址首頁(yè)&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

??????}?else?{

??????????localStorage.setItem('code',?this.code);

??????}

????},

????getUrlCode()?{?//?截取url中的code方法

??????var?url?=?location.search

??????this.winUrl?=?url

??????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]]=(strs[i].split("=")[1])

????????}

??????}

????????return?theRequest

????},

當(dāng)你成功獲取到code之后义屏,把code傳給后端 之后就與前端無(wú)關(guān)了,因?yàn)閺牡诙介_(kāi)始蜂大,操作都得在服務(wù)端進(jìn)行


把code通過(guò)后端給你的接口傳給他 等著后端傳給你用戶相關(guān)數(shù)據(jù)就好了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末闽铐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子奶浦,更是在濱河造成了極大的恐慌兄墅,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,376評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件澳叉,死亡現(xiàn)場(chǎng)離奇詭異隙咸,居然都是意外死亡沐悦,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén)五督,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)藏否,“玉大人,你說(shuō)我怎么就攤上這事充包「鼻” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,966評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵基矮,是天一觀的道長(zhǎng)淆储。 經(jīng)常有香客問(wèn)我,道長(zhǎng)家浇,這世上最難降的妖魔是什么本砰? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,432評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮蓝谨,結(jié)果婚禮上灌具,老公的妹妹穿的比我還像新娘。我一直安慰自己譬巫,他們只是感情好咖楣,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著芦昔,像睡著了一般诱贿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上咕缎,一...
    開(kāi)封第一講書(shū)人閱讀 49,792評(píng)論 1 290
  • 那天珠十,我揣著相機(jī)與錄音,去河邊找鬼凭豪。 笑死焙蹭,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的嫂伞。 我是一名探鬼主播孔厉,決...
    沈念sama閱讀 38,933評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼帖努!你這毒婦竟也來(lái)了撰豺?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,701評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拼余,失蹤者是張志新(化名)和其女友劉穎污桦,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體匙监,經(jīng)...
    沈念sama閱讀 44,143評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡凡橱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評(píng)論 2 327
  • 正文 我和宋清朗相戀三年小作,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梭纹。...
    茶點(diǎn)故事閱讀 38,626評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡躲惰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出变抽,到底是詐尸還是另有隱情础拨,我是刑警寧澤,帶...
    沈念sama閱讀 34,292評(píng)論 4 329
  • 正文 年R本政府宣布绍载,位于F島的核電站诡宗,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏击儡。R本人自食惡果不足惜塔沃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望阳谍。 院中可真熱鬧蛀柴,春花似錦、人聲如沸矫夯。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,742評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)训貌。三九已至制肮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間递沪,已是汗流浹背豺鼻。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留款慨,地道東北人儒飒。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像檩奠,于是被迫代替她去往敵國(guó)和親约素。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 為什么要獲取openid openId是用戶在當(dāng)前公眾號(hào)下的唯一標(biāo)識(shí)(‘身份證’)笆凌。在微信中進(jìn)行微信分享、支付等操...
    勤能補(bǔ)拙的笨小孩閱讀 4,459評(píng)論 0 1
  • 捋一捋前端開(kāi)發(fā)微信公眾號(hào)時(shí)怎么獲取code士葫,然后將code發(fā)給后端來(lái)?yè)Q取用戶的openid乞而;1、首先你要成為所要開(kāi)...
    阿布_0caf閱讀 59,557評(píng)論 2 22
  • 前幾天和業(yè)務(wù)談需求的時(shí)候提到了要在微信公眾號(hào)里面做一個(gè)申請(qǐng)頁(yè)面A慢显。當(dāng)時(shí)我對(duì)微信的了解還不是很多爪模,只知道公眾號(hào)上原來(lái)...
    尐尐西瓜妹閱讀 12,689評(píng)論 4 7
  • 參考文檔 https://developers.weixin.qq.com/doc/offiaccount/OA_...
    6c5e13366951閱讀 490評(píng)論 0 0
  • 表情是什么欠啤,我認(rèn)為表情就是表現(xiàn)出來(lái)的情緒。表情可以傳達(dá)很多信息屋灌。高興了當(dāng)然就笑了洁段,難過(guò)就哭了。兩者是相互影響密不可...
    Persistenc_6aea閱讀 124,444評(píng)論 2 7