詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸
在laravel框架我們使用安正超的package
網(wǎng)址:https://easywechat.org/
有專門(mén)的針對(duì)laravel的安裝包,請(qǐng)參見(jiàn)如下網(wǎng)址:https://github.com/overtrue/laravel-wechat
下面來(lái)說(shuō)說(shuō)具體的安裝:
1.安裝package
composer require overtrue/wechat
2.在app/config/app.php 中注冊(cè) ServiceProvider
Overtrue\LaravelWechat\ServiceProvider::class,
3.創(chuàng)建配置文件
php artisan vendor:publish --provider="Overtrue\LaravelWechat\ServiceProvider"
請(qǐng)修改應(yīng)用根目錄下的 config/wechat.php 中對(duì)應(yīng)的項(xiàng)即可
4.添加外觀到 config/app.php 中的 aliases 部分:
'wechat' => Overtrue\LaravelWechat\Facade::class,
5.添加路由
Route::any('/wechat', 'WechatController@serve');//控制器請(qǐng)按自己的實(shí)際情況填寫(xiě)
特別注意:因?yàn)閘aravel自帶token驗(yàn)證,建議使用laravel-cors解決跨域問(wèn)題,具體安裝見(jiàn)github地址:https://github.com/barryvdh/laravel-cors
6.控制器添加如下代碼:
/** * 處理微信的請(qǐng)求消息 * * @return string */ public function serve() { $wechat = app('wechat'); $wechat->server->setMessageHandler(function($message){ return "歡迎關(guān)注 overtrue!"; }); return $wechat->server->serve(); }
7.配置好了路由和控制器,就得到了微信授權(quán)所需的URL,此時(shí)打開(kāi)微信公眾平臺(tái),在“開(kāi)發(fā)—基本配置”頁(yè)面,點(diǎn)擊“修改配置”按鈕,得到:
修改配置頁(yè)面
1) 將剛才的URL填入U(xiǎn)RL輸入框內(nèi)
2) token可自定義
3) EncodingAESKey 可隨機(jī)生成
4) 消息加密用安全模式
8.在.env文件中配置以下參數(shù)
#微信配置,若不知道WECHAT_TOKEN和WECHAT_AES_KEY請(qǐng)繼續(xù)往下看 WECHAT_APPID= WECHAT_SECRET= WECHAT_TOKEN= WECHAT_AES_KEY= #微信支付用 WECHAT_PAYMENT_MERCHANT_ID= WECHAT_PAYMENT_KEY=
最后一步,填寫(xiě)完成后提交,微信將會(huì)調(diào)用此URL接口來(lái)驗(yàn)證,如果驗(yàn)證成功,就通過(guò)配置。
在公眾平臺(tái),還有一項(xiàng)重要配置,如下:
在微信公眾平臺(tái)“接口權(quán)限”—“網(wǎng)頁(yè)授權(quán)”—“網(wǎng)頁(yè)授權(quán)域名”,填上服務(wù)器端域名(注:請(qǐng)仔細(xì)閱讀平臺(tái)上要求,特別注意得是,這里是服務(wù)器域名,不是客戶端域名?。?br />
接下來(lái)就可以實(shí)現(xiàn)微信授權(quán)登陸的功能了
10.在 app/Http/Kernel.php 中添加路由中間件:
protected $routeMiddleware = [ // ... 'wechat.oauth' => \Overtrue\LaravelWechat\Middleware\OAuthAuthenticate::class, ];
10.在路由中添加授權(quán)登陸的路由
Route::group(['middleware' => ['wechat.oauth']], function () { Route::get('/auth','UsersController@wechatAuth'); });
11.在以上路由相應(yīng)的控制器中添加wechatAuth方法
public function wechatAuth(Request $request) { $userinfo = session('wechat.oauth_user')->original; // 拿到授權(quán)用戶資料 //這里寫(xiě)用戶注冊(cè)到mysql的相關(guān)邏輯代碼,請(qǐng)自行補(bǔ)充 }
12.在微信中打開(kāi)此路由下的url就發(fā)現(xiàn)出現(xiàn)微信認(rèn)證的界面,如未成功請(qǐng)自行檢查你的配置和代碼。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決在Vue中使用axios用form表單出現(xiàn)的問(wèn)題
今天小編就為大家分享一篇解決在Vue中使用axios用form表單出現(xiàn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件,子組件使用 $emit 觸發(fā)父組件的自定義事件,今天通過(guò)示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用,感興趣的朋友一起看看吧2022-03-03vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03Vue下載Excel后報(bào)錯(cuò),或打不開(kāi)的解決
這篇文章主要介紹了Vue下載Excel后報(bào)錯(cuò),或打不開(kāi)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02Vue3中的toRef和toRefs的區(qū)別和用法示例小結(jié)
toRef和toRefs可以用來(lái)復(fù)制reactive里面的屬性然后轉(zhuǎn)成 ref,它保留了響應(yīng)式,也保留了引用,也就是你從 reactive 復(fù)制過(guò)來(lái)的屬性進(jìn)行修改后,除了視圖會(huì)更新,原有 ractive 里面對(duì)應(yīng)的值也會(huì)跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下2024-08-08