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