1、開始之前,請一定仔細閱讀微信開發者文檔文檔中,總共寫了幾個步驟:1、通過appId和需要跳轉的路由去請求授權2、授權之后跳轉路由中返回的code 注:前端只需要知道這兩個步驟3、根據code獲取access_Token4、根據access_token獲取用戶信息(snsapi_userinfo授權)
2、前端發起授權請求。這一步需要前端拼湊路由,并且將頁面跳轉到拼湊路由,路由規則如:https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的公眾appId號&redirect_uri=你的回調路由&response_type=code&scope=你選擇的方式&state=STATE#wechat_redirect
注 授權方式可選擇為snsapi_userinfo或者snsapi_base,差別請看文檔跳轉之后授權頁面如下(開發者工具效果)
3、點擊同意之后,會根據你之前拼湊的回調路由返回code,如下:
http://test.***.com/index?code=021Azdiu12zdXd05kkju1ZYkiu1AzdiR&state=1
4、將路由中的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相關驗證我已經做了剔除
坑點:
1、vue的路由會將code拼接在url和#之間,如www.****.com/?code=XXXXX/#/index,這個code需要單獨處理