詳解用vue.js和laravel實現(xiàn)微信授權登陸
在laravel框架我們使用安正超的package
有專門的針對laravel的安裝包，請參見如下網址：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"
請修改應用根目錄下的 config/wechat.php 中對應的項即可
4.添加外觀到 config/app.php 中的 aliases 部分:
'wechat' => Overtrue\LaravelWechat\Facade::class,
5.添加路由
Route::any('/wechat', 'WechatController@serve');//控制器請按自己的實際情況填寫
特別注意：因為laravel自帶token驗證，建議使用laravel-cors解決跨域問題，具體安裝見github地址：https://github.com/barryvdh/laravel-cors
6.控制器添加如下代碼：
/**
* 處理微信的請求消息
*
* @return string
*/
public function serve()
{
$wechat = app('wechat');
$wechat->server->setMessageHandler(function($message){
return "歡迎關注 overtrue！";
});
return $wechat->server->serve();
}
7.配置好了路由和控制器，就得到了微信授權所需的URL，此時打開微信公眾平臺，在“開發(fā)—基本配置”頁面，點擊“修改配置”按鈕，得到：
修改配置頁面
1) 將剛才的URL填入URL輸入框內
2) token可自定義
3) EncodingAESKey 可隨機生成
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=
最后一步，填寫完成后提交，微信將會調用此URL接口來驗證，如果驗證成功，就通過配置。
在公眾平臺，還有一項重要配置，如下：
在微信公眾平臺“接口權限”—“網頁授權”—“網頁授權域名”，填上服務器端域名（注：請仔細閱讀平臺上要求，特別注意得是，這里是服務器域名，不是客戶端域名?。?br />
接下來就可以實現(xiàn)微信授權登陸的功能了
10.在 app/Http/Kernel.php 中添加路由中間件：
protected $routeMiddleware = [ // ... 'wechat.oauth' => \Overtrue\LaravelWechat\Middleware\OAuthAuthenticate::class, ];
10.在路由中添加授權登陸的路由
Route::group(['middleware' => ['wechat.oauth']], function () {
Route::get('/auth','UsersController@wechatAuth');
});
11.在以上路由相應的控制器中添加wechatAuth方法
public function wechatAuth(Request $request)
{
$userinfo = session('wechat.oauth_user')->original; // 拿到授權用戶資料
//這里寫用戶注冊到mysql的相關邏輯代碼，請自行補充
}
12.在微信中打開此路由下的url就發(fā)現(xiàn)出現(xiàn)微信認證的界面，如未成功請自行檢查你的配置和代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文詳細解析了Vuex中的四個核心概念及其區(qū)別,包括State用于存儲狀態(tài),Getters用于計算屬性并緩存,Mutations是唯一更改State的同步方法,Actions則用于提交Mutations且支持異步操作2024-11-11
這篇文章主要介紹了vue路由分文件拆分管理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue2+SpringBoot實現(xiàn)數(shù)據(jù)導出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實現(xiàn)數(shù)據(jù)導出到csv文件并下載,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
這篇文章主要介紹了vue項目在線上服務器訪問失敗原因分析，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue新建環(huán)境變量以及網絡請求工具axios的二次封裝詳解
這篇文章主要為大家介紹了vue新建環(huán)境變量以及網絡請求工具axios的二次封裝詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
elementUI+Springboot實現(xiàn)導出excel功能的全過程
這篇文章主要介紹了elementUI+Springboot實現(xiàn)導出excel功能,現(xiàn)在也對這個導出功能進行一個匯總整理寫出來，結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了淺談Vue-cli 命令行工具分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07