一、開始以前,請必定仔細閱讀微信開發者文檔
文檔中,總共寫了幾個步驟:php
- 一、經過appId和須要跳轉的路由去請求受權
- 二、受權以後跳轉路由中返回的code
注:
前端只須要知道這兩個步驟- 三、根據code獲取access_token
- 四、根據access_token獲取用戶信息(snsapi_userinfo受權)
二、前端發起受權請求。這一步須要前端拼湊路由,而且將頁面跳轉到拼湊路由,路由規則如:https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的公衆appId號&redirect_uri=你的回調路由&response_type=code&scope=你選擇的方式&state=STATE#wechat_redirect
注
受權方式可選擇爲snsapi_userinfo或者snsapi_base,差異請看文檔跳轉以後受權頁面以下(開發者工具效果)前端
三、點擊贊成以後,會根據你以前拼湊的回調路由返回code,以下:
http://test.***.com/index?code=021Azdiu12zdXd05kkju1ZYkiu1AzdiR&state=1
vue
四、將路由中的code直接傳遞給後端,讓後端作獲取用戶信息的系列的邏輯處理。
注:
以下是laravel中間件中處理方式,session只用於此次請求,也能夠將用戶的微信信息放在request中到controller進行邏輯處理,看我的喜愛
public function handle($request, Closure $next, $scopes = null) { $wechatCacheKey = 'wechat.oauth_user.default'; if (config("qa.mock_user") == 1){ $user = new SocialiteUser(config('wechat.mock_user')); } else { $code = $request->get("code", ""); if ($code === ""){ $appId = $this->config["app_id"]; return Response::toJson(["aid" => $appId], "請從新獲取受權CODE!",10006); } // 開始拉取用戶信息 $app = Factory::officialAccount($this->config); $user = $app->oauth->user(); } session([$wechatCacheKey => $user]); } return $next($request); }
注:
這個例子只是寫了受權的邏輯,token相關驗證我已經作了剔除laravel
一、vue的路由會將code拼接在url和#之間,如
www.****.com/?code=XXXXX/#/index
,這個code須要單獨處理