当前位置: 首页 > Web前端 > vue.js

微信小程序登录流程及实现

时间:2023-03-31 22:57:17 vue.js

鍦ㄤ簡瑙e皬绋嬪簭鐧诲綍涔嬪墠锛岃鍏堜簡瑙d竴涓嬪皬绋嬪簭鐨勫叏灞€瀹炰緥鍜屽叏灞€缁勪欢锛屼互渚夸簬鐞嗚В鏈枃鍚庣画鍐呭銆傚凡缁忕悊瑙g殑鍙互鐩存帴涓婃墜銆傚叏灞€瀹炰緥鍜屽叏灞€缁勪欢(馃憟鐩存帴鐐瑰嚮)寰俊灏忕▼搴忕櫥褰曟祦绋嬭鐧诲綍寰俊灏忕▼搴忥紝棣栧厛闇€瑕佸啓涓€涓井淇″皬绋嬪簭鐨勭櫥褰曞脊绐楋紝寮圭獥鏄叏灞€寮圭獥锛屽洜涓哄皬绋嬪簭鏈夊垎浜姛鑳斤紝濡傛灉鏂扮敤鎴锋槸浠庡垎浜摼鎺ヨ繘鏉ョ殑锛岄偅涔堜細瑕佹眰鏂扮敤鎴峰厛鐧诲綍锛屽啀杩涜鍚庣画鎿嶄綔銆傛墍浠ョ櫥褰曞姛鑳藉繀椤绘槸缁勪欢锛岀櫥褰曞繀椤绘槸鍏ㄥ眬寮圭獥銆傚湪鐧诲綍椤甸潰鐨刬ndex.json鏂囦欢涓紝灏嗙櫥褰曞脊绐楄缃负涓€涓粍浠秢"component":true,"usingComponents":{//xxxx.....}}鐧诲綍寮圭獥闇€瑕佹湁鎺堟潈閫夐」锛屽鏋滄病鏈夊嬀閫夋巿鏉冿紝鐐瑰嚮鐩存帴鐧诲綍銆傞渶瑕佹彁绀虹敤鎴峰厛鎺堟潈鍚庣櫥褰曪紝鐢ㄦ埛鍕鹃€夋巿鏉冨悗锛岀偣鍑荤櫥褰曘€傚皬绋嬪簭鐧诲綍闇€瑕佷娇鐢ㄦ寜閽粍浠讹紝璁剧疆鎸夐挳缁勪欢鐨刼pen-type鍊间负getPhoneNumber銆傜敤鎴风偣鍑诲悓鎰忓悗锛屽彲浠ラ€氳繃bindgetphonenumber浜嬩欢鍥炶皟鑾峰彇鍔ㄦ€乼oken浠g爜锛岀劧鍚庡皢浠g爜浼犻€掔粰寮€鍙戣€呭悗鍙帮紝骞跺湪寮€鍙戣€呭悗鍙拌皟鐢ㄥ井淇″悗鍙版彁渚涚殑phonenumber.getPhoneNumber鎺ュ彛锛屼互鍙婁娇鐢ㄤ唬鐮佹崲鍙栫敤鎴风殑鎵嬫満鍙风爜銆傚苟涓旀瘡涓唬鐮佹湁鏁堟湡涓?鍒嗛挓锛屽彧鑳芥秷璐逛竴娆°€俹pen-type="getPhoneNumber"浣跨敤鏂囨。锛堭煈堢偣鍑荤洿鎺ヨ繘鍏ワ級娉ㄦ剰锛歡etPhoneNumber杩斿洖鐨勪唬鐮佸拰wx.login杩斿洖鐨勪唬鐮佸姛鑳戒笉鍚岋紝涓嶈兘娣风敤銆?buttonopen-type="getPhoneNumber"bindgetphonenumber="handleConfirm">data:{show:false,//鐧诲綍寮圭獥鏄惁鏄剧ずselected:true,//鏄惁鍕鹃€夋巿鏉僱oginSuccess:undefined,loginFail:undefined,},//纭鎺堟潈鎵嬫満鍙?杩欓噷鍙互鍋氳妭娴佹搷浣滐紝闃叉鐢ㄦ埛鐐瑰嚮娆℃暟杩囧銆備负浜嗘紨绀烘柟渚匡紝杩欓噷涓嶅仛鑺傛祦asynchandleConfirm(data){const{selected}=this.data//鐢ㄦ埛鏈嬀閫夛紝鎻愮ず璇峰嬀閫塱f(!selected){wx.showToast({title:'璇峰悓鎰忋€婄敤鎴烽殣绉佸崗璁€?,icon:'none'})return}//data.detail.code鏄幏鍙栫數璇濆彿鐮佸姩鎬乼okenletinfo=data.detailletfail=this.data.loginFailif(info.code){//info.code涓烘墜鏈哄彿鍔ㄦ€乼oken/**鏂扮増寰俊灏忕▼搴忎笉闇€瑕佹彁鍓嶈皟鐢╳x.login杩涜鐧诲綍锛岃繖閲岀殑鍐欐硶鏄负浜嗛厤鍚堣€佺増銆傚湪鑾峰彇鎵嬫満鍙锋巿鏉冪櫥褰曞墠璋冪敤wx.login銆傝繖閲岀殑app.globalData.userInfo灏辨槸鍏ㄥ眬鎸傝浇鐨剈serInfo銆備娇鐢╝wiat闃诲杩涚▼*/awaitapp.globalData.userInfo._getLoginCode()//wx.login鐧诲綍//璋冪敤wx.login鍚庤繘鍏ヤ笅涓€姝his.setPhoneInfo(info)//缁戝畾鎵嬫満鍙?鑾峰彇鎵嬫満鍙锋巿鏉冪敤鎴风櫥褰曞嚱鏁皚else{fail&&fail(info)}},//缁戝畾鎵嬫満鍙?鑾峰彇鎵嬫満鍙锋巿鏉冪敤鎴风櫥褰曞嚱鏁皊etPhoneInfo(data){letsuccess=this.data.loginSuccessletfail=this.data.loginFail//data.jsCode淇濆瓨鐧诲綍鑾峰彇鐨刢odedata.jsCode=app.globalData.userInfo.code//鎵嬫満鍙峰姩鎬乼okendata.phoneCode=鏁版嵁銆俢ode//璋冪敤鐢ㄦ埛鐧诲綍鎺ュ彛锛宺emoveNull鍏跺疄鏄竴涓皝瑁呮柟娉曪紝鐢ㄦ潵鍘绘帀绌烘牸锛屾湰璐ㄦ槸浼犻€掍竴涓暟鎹甮etLoginSession(removeNull(data)).then(asyncres=>{//then琛ㄧず鐧诲綍鏄痵uccessful,saveEntertokenwx.setStorageSync('token',res.data)//鎵嬫満鍙锋巿鏉冪畻鐧诲綍鎴愬姛success&&success()//璁剧疆鍏ㄥ眬userInfo灞炴€э紝isLogin=true锛岃〃绀虹櫥褰曟垚鍔焌pp.globalData.userInfo.isLogin=true//娓呴櫎绛夊緟鍒楄〃wx.queue.asyncExe("login_back")//璋冪敤鍏ㄥ眬_getUserInfo鏂规硶锛屼紶鍏?login'鍙傛暟awaitapp.globalData.userInfo._getUserInfo('login')//鍏抽棴寮规this.hideLogin()}).catch(asynce=>{if(e.data.indexOf("Bound")>-1){success&&success()wx.setStorageSync("token",e.data)awaitapp.globalData.userInfo._getUserInfo('login')}else{fail&&fail()}//鍏抽棴寮圭獥this.hideLogin()})},//鍏抽棴寮圭獥hideLogin(){//鍏抽棴寮瑰嚭绐楀彛this.setData({show:false},()=>{if(isPopup()){//鏄剧ず鏍囩鏍?)setTimeout(()=>{this.getTabBar().show()},300)}})}锛岃€佺増鏈殑寰俊灏忕▼搴忛渶瑕佹彁鍓嶈皟鐢╳x.login鑾峰彇浠g爜鎵嶈兘杩涜涓嬩竴姝ワ紝鑰屾柊鐗堟湰涓嶉渶瑕佽皟鐢╳x.login銆傛彁鍓嶇櫥褰曠櫥褰晈x.login鏂囦欢涓嬮潰锛堭煈堢洿鎺ョ偣鍑伙級鏄痷serInfo.js鏂囦欢锛屽湪鏂囦欢鍐呴儴鍒涘缓浜嗕竴涓被锛屼細鎸傝浇鍒板叏灞€瀹炰緥//userInfo.jsimport{getUserInfo}from'../service/user'classUserInfo{code=''//鐢ㄦ埛鎺堟潈鐧诲綍闇€瑕佺殑codeisLogin=false//鍒ゆ柇鐢ㄦ埛鏄惁鐧诲綍锛岃幏鍙杢okenisInfo=false//鍒ゆ柇鐢ㄦ埛鏄惁鐧诲綍/***鑾峰彇鐢ㄦ埛淇℃伅*/_getUserInfo(type){returnnewPromise((resolve,reject)=>{//isInfo鍒濆鍖栦负false锛岃〃绀烘病鏈夌櫥褰曪紝濡傛灉宸茬粡鐧诲綍isInfo=true锛屽鏋滀綘宸茬粡鐧诲綍锛岀洿鎺ヨ幏鍙栨湰鍦皌okenif(type=="login"&&this.isInfo)returnresolve(wx.getStorageSync('userInfo'))this.isInfo=true//璋冪敤鎺ュ彛鑾峰彇鐢ㄦ埛淇℃伅getUserInfo().then(res=>{//濡傛灉杩斿洖200锛屾嬁鍒皌oken鍚庯紝淇濆瓨鐢ㄦ埛鐨勪俊鎭紝涓昏鏄鍚嶅拰澶村儚if(res.code==200){//淇濆瓨浣跨敤r鐨勪俊鎭湪鏈湴wx.setStorageSync('userInfo',res.data)//resolvereturnsresolve(res)}//涓嶇瓑浜?00isInfo=false锛岃鏄庡凡缁忕櫥褰曚簡锛屽彲浠ラ噸鏂拌幏鍙杢his.isInfo=false//涓嶇瓑浜?00锛岃繑鍥為敊璇俊鎭痳eject(res)},(err)=>{//涓嶇瓑浜?00isInfo=false锛岃鏄庡凡缁忕櫥褰曚簡锛岄噸鏂拌幏鍙栧嵆鍙痶his.isInfo=false//涓嶇瓑浜?00杩斿洖閿欒淇℃伅reject(err)})})}/***閫氳繃wx.login鑾峰彇code*涓嶈鍏ㄥ眬璋冪敤锛屾瘡娆℃巿鏉冨墠閲嶆柊鑾峰彇璋冪敤鐧诲綍鏂规硶*/async_getLoginCode(){try{constloginCodeRes=awaitwx.p.login()console.log(loginCodeRes)/**loginCodeRes.code:鐢ㄦ埛鐧诲綍鍑瘉锛堟湁鏁堟湡涓轰簲鍒嗛挓锛夊紑鍙戣€呴渶瑕佸湪寮€鍙戣€呮湇鍔″櫒鍚庡彴璋冪敤code2Session锛屼娇鐢ㄤ唬鐮佷氦鎹penid銆乽nionid銆乻ession_key绛変俊鎭?///灏嗕唬鐮佹寕杞藉埌鍏ㄥ眬global.userInfothis.code=loginCodeRes.code}catch(error){console.error(error,'getjscodeerror');}}}exportdefaultUserInfo//app.jsimportUserInfofrom'./private/UserInfo'App({/**灏忕▼搴忕敓鍛藉懆鏈燂紝鍏ㄥ眬璋冪敤涓€娆nLaunch*/onLaunch(e){/**newUserInfo()*/this.globalData.userInfo=newUserInfo()},onShow(e){},globalData:{userInfo:null,/**private->UserInfopropertiesandThemethodismountedhere*/show:false}})杩囩▼鎬荤粨閫氳繃getPhoneNumber鐧诲綍1.鍦╟omponents涓垱寤轰竴涓猘uth鏂囦欢澶广€傝繖涓枃浠跺す閲岄潰鐨刪tml鏄皬绋嬪簭鐨勭櫥褰曞脊绐楋紝auth鏄竴涓叏灞€缁勪欢銆傚湪app.json涓寕杞?.鍦╬rivate鏂囦欢澶逛腑灏佽灏忕▼搴忕殑鐧诲綍鏂规硶-->UserInfo.js-->鍦╦s鏂囦欢涓垱寤轰竴涓被锛屽皢鏂规硶灏佽鍦ㄧ被涓苟瀵煎嚭3.鍦╝pp.js涓璷nLaunch涓璶ewUserInfo鑾峰彇涔嬪墠灏佽鐨勫皬绋嬪簭鐧诲綍鏂规硶锛屾寕杞藉埌globalData.userInfoimportUserInfofrom'./private/UserInfo'App({onLaunch(e){this.globalData.userInfo=newUserInfo()}})4銆乤uth鏂囦欢澶规槸灏忕▼搴忕殑鍏ㄥ眬鎺堟潈鐧诲綍寮圭獥銆備粠鍩虹搴?.21.2寮€濮嬶紝瀹夊叏鍗囩骇浜嗚幏鍙栨墜鏈哄彿鐨勬帴鍙c€傛柊鐗堝皬绋嬪簭闇€瑕佺敤鎴峰彲浠ヨ嚜鍔ㄨЕ鍙戞帴鍙h幏鍙栨墜鏈哄彿鐮併€傞渶瑕佺偣鍑绘寜閽粍浠舵墠鑳借Е鍙戝皬绋嬪簭鐨勬柊鐗堟湰銆備笉鍐嶉渶瑕佹彁鍓嶈皟鐢╳x.login鐧诲綍銆?code)//杩欎釜code鏄竴涓姩鎬乼oken锛岀敤鏉ユ崲鍙栫敤鎴风殑鎵嬫満鍙风爜}})闇€瑕佽缃産utton缁勪欢鐨刼pen-type鐨勫€间负getPhoneNumber锛屽綋鐢ㄦ埛鐐瑰嚮鍚屾剰鍚庯紝鍙互閫氳繃bindgetphonenumber浜嬩欢鍥炶皟鑾峰彇鍔ㄦ€乼oken鐮侊紝鐒跺悗灏哻ode浼犻€掔粰寮€鍙戣€呭悗鍙帮紝寮€鍙戣€呭悗鍙拌皟鐢ㄥ井淇″悗鍙版彁渚涚殑phonenumber.getPhoneNumber鎺ュ彛娑堣垂璇ョ爜鎹㈠彇鐢ㄦ埛鐨勬墜鏈虹數璇濆彿鐮併€傛瘡涓唬鐮佺殑鏈夋晥鏈熶负5鍒嗛挓锛屽苟涓斿彧鑳戒娇鐢ㄤ竴娆°€傛敞鎰忥細getPhoneNumber杩斿洖鐨刢ode鍜寃x.login杩斿洖鐨刢ode鍔熻兘涓嶅悓锛屼笉鑳芥贩鐢ㄣ€?.鐢ㄦ埛鐐瑰嚮寮规鍚庯紝鍏堣鐢ㄦ埛鍕鹃€夊崗璁紝鐒跺悗璁╃敤鎴风偣鍑荤櫥褰曪紝璋冪敤鐧诲綍鎺ュ彛锛屽崟鐙皝瑁呯櫥褰曟帴鍙o紝灏嗚幏鍙栫殑code鎵嬫満鍙蜂紶杩囧幓鍔ㄦ€佷护鐗屼綔涓虹櫥褰曟柟娉曠殑鍙傛暟銆傛柊鐗堝井淇′笉鍏佽鎻愬墠璋冪敤鐧诲綍鑾峰彇楠岃瘉鐮併€傛棫鐗堝井淇″皬绋嬪簭闇€瑕佹彁鍓嶈皟鐢╨ogin鑾峰彇code浠g爜杩涜婕旂ず锛屾墍浠ヨ繖閲屾彁鍓嶈皟鐢╳x.login鑾峰彇code浠g爜锛屽苟灏哻ode浠g爜瀛樻斁鍦ㄥ叏灞€app鐨?globalData.userInfo涓紝闇€瑕佹敞鎰忕殑鏄紝浠g爜鐨勬湁鏁堟湡涓?鍒嗛挓銆?銆佽皟鐢ㄧ櫥褰曟柟娉曪紝鎼哄甫code鎵嬫満鍙风殑鍔ㄦ€乼oken鍜屾帴鍙f寚瀹氱殑鎵€闇€鍙傛暟锛岃姹傜櫥褰曟帴鍙o紝杩斿洖200琛ㄧず鐧诲綍鎴愬姛銆?)銆佹湰鍦板瓨鍌ㄧ櫥褰曟垚鍔熺殑token2)銆佽缃叏灞€灞炴€pp.globalData.userInfo.isLogin=true琛ㄧず鐧诲綍鎴愬姛3)銆佹竻闄ょ瓑寰呭垪琛?銆佽皟鐢ㄨ幏鍙栫敤鎴蜂俊鎭殑鎺ュ彛锛屽嵆鍏ㄥ眬鎸傝浇awaitapp.globalData.userInfo._getUserInfo()锛屽叧闂櫥褰曞脊绐梐waitapp.globalData.userInfo._getUserInfo('login')8.鑾峰彇鐢ㄦ埛淇℃伅鎺ュ彛锛岄€氳繃浼犲叆鍙傛暟鍒ゆ柇鏄惁鐧诲綍銆傝繖閲屾湁涓ょ鎯呭喌锛?锛夈€佺敤鎴峰凡缁忕櫥褰曡繃锛屽彧鏄兂閲嶆柊鑾峰彇token2锛夈€佺敤鎴风涓€娆$櫥褰曪紝鑾峰彇鐢ㄦ埛淇℃伅锛屾瘮濡傚ご鍍忥紝鐢ㄦ埛鍚嶏紝鏍规嵁杩欎袱涓儏鍐典笅锛屼紶鍏ョ殑鍙傛暟鈥渓ogin鈥濆綋鐒舵槸涓嶈鐨勶紝鎵€浠ラ渶瑕佸啀娣诲姞涓€涓猻tate锛宨sInfo锛宨sInfo榛樿涓篺alse/***鑾峰彇鐢ㄦ埛淇℃伅*/_getUserInfo(type){returnnewPromise((resolve,reject)=>{//鐢ㄦ埛宸茬粡鐧诲綍if(type=="login"&&this.isInfo)returnresolve(wx.getStorageSync('userInfo'))//璁剧疆isInfo=true,鍥犱负涓嬮潰鏄祦绋嬭幏鍙栫敤鎴蜂俊鎭紝鑾峰彇鍒板悗锛岀浜屾璋冪敤_getUserInfo鍒ゆ柇isInfo=true锛岀洿鎺ヨ繑鍥瀟his.isInfo=true//璋冪敤鎺ュ彛getUserInfo().then(res=>{//濡傛灉杩斿洖200锛屾嬁鍒皌oken鍚庯紝淇濆瓨鐢ㄦ埛鐨勪俊鎭紝涓昏鏄鍚嶅拰澶村儚if(res.code==200){//鏈湴淇濆瓨鐢ㄦ埛鐨勪俊鎭痺x.setStorageSync('userInfo',res.data)//resolvereturnsresolve(res)}//涓嶇瓑浜?00isInfo=false,璇存槑宸茬粡鐧诲綍浜嗭紝鍙互閲嶆柊鑾峰彇this.isInfo=false//涓嶇瓑浜?00,杩斿洖閿欒淇℃伅reject(res)},(err)=>{//涓嶇瓑浜?00isInfo=false,琛ㄧず宸茬粡鐧诲綍浜嗭紝鍙互閲嶆柊鑾峰彇this.isInfo=false//涓嶇瓑浜?00锛岃繑鍥為敊璇俊鎭痳eject(err)})})}鏈€鍚庨檮涓婂井淇″畼鏂圭櫥褰曡鏄庯紙馃憟鐩存帴鐐瑰嚮锛変互涓婂氨鏄井淇″皬绋嬪簭鐨勭櫥褰曟祦绋嬨€傝繖浜涙楠ゆ槸鏍规嵁瀹為檯闇€瑕佸啓鐨勩€傛湁鏃?銆?銆?銆?銆?杩涚▼娣风敤銆傚ぇ瀹跺彲浠ユ牴鎹」鐩殑瀹為檯闇€瑕佽嚜鐢辫皟鏁淬€傚鏋滄偍瑙夊緱鏈枃瀵规偍鏈夊府鍔╋紝璇风偣璧炪€佹敹钘忋€佽浆鍙戝摝~