在網站開發中,我們經常會遇到需要給網站增加微信掃碼登錄的功能,一般來説有兩種方式可以實現,一種是使用微信開放平台,另一種是使用微信認證服務號的參數二維碼,網上以第一種居多,我們今天來説下第二種方式。首先準備一個【已認證】的微信服務號將公眾號添加至【檸聚開發者平台】中,如圖1:
然後將生成的回調URL添加至微信公眾平台中,如圖:
這樣基礎配置就完了,下面我們開始碼代碼。首先獲取帶參數二維碼:接口文檔見:獲取帶參數二維碼-檸聚開發者平台-檸聚開發者平台 (21ds.cn)
function getWxQrcode($scene)
{
$apiUrl = 'https://21ds.cn/mpWeixinApi/getQrcode';
$postData['scene_str'] = $scene;
$postData['action_name'] = 'QR_STR_SCENE';
$postData['expire_seconds'] = 120;
$postData['dev_key'] = 'DEV-xxxxxx';
$postData['mw_id'] = 'MW4xxxxxx';
$postData['sign'] = devSignGeneral($postData, 'Wxaxwsxssss');
$http = new \Yurun\Util\HttpRequest;
$response = $http->post($apiUrl, $postData);
$result = json_decode($response->body(), true);
if ($result['code'] == 200) {
return $result['data'];
}
return [];
}
定義完請求函數後,我們調用這個函數獲取到二維碼返回給前端:(注:我們在定義參數二維碼的scene值時,增加了demo::,這個主要是用來獲取到scene事件時尋找請求api接口的,從而可以實現一個微信服務號對接多個網站的二維碼登錄)public function get_wechat_login_qrcode(){
$uuid = createId();
(new RedisCache)->getSetQrcodeLoginUUID($uuid, 1, 120);
$data = getWxQrcode('demo::' . $uuid);
if (empty($data)) {
return json(['code' => -1, 'msg' => '二維碼獲取失敗']);
}
$return['qrcode'] = $data['qrcode_pic'];
$return['url'] = $data['url'];
$return['token'] = $uuid;
return json(['code' => 200, 'msg' => 'success', 'data' => $return]);
}其中,getSetQrcodeLoginUUID這個函數用來存儲登錄狀態,函數代碼為:public function getSetQrcodeLoginUUID($key, $data = '', $expireTime = 300)
{
$tokenInfo = '';
if (!empty($data) && !empty($key)) {
self::$redis->set('demo:loginUUID:' . $key, $data, $expireTime);
} else {
$cacheTTL = self::$redis->ttl('demo:loginUUID:' . $key);
if ($cacheTTL === -1 || $cacheTTL > $expireTime) {
self::$redis->del('demo:loginUUID:' . $key);
}
if (self::$redis->exists('demo:loginUUID:' . $key) > 0) {
$data_s = self::$redis->get('libs:loginUUID:' . $key);
$tokenInfo = $data_s;
}
return $tokenInfo;
}
}訪問get_wechat_login_qrcode函數後,可以獲取的“qrcode”及”url”參數,其中qrcode是二維碼圖片,url是一個鏈接,可以用來生成二維碼圖片,根據自己的需要自主選擇使用哪個參數即可。獲取到二維碼圖片後,使用微信掃描二維碼後,用户需要關注微信服務號(如未關注過)或者直接進入了微信服務號窗口,此時,將觸發微信的事件通知,通知會尋找在圖1的“事件通知API”定義的demo的通知接口,如在事件通知api中,我們定義了一個:demo::https://www.demo.com.cn/notify/wechat_login 接口,檸聚開發者平台將post事件通知到此接口,定義的接口文檔參見:接收事件通知-檸聚開發者平台-檸聚開發者平台 (21ds.cn)然後我們根據事件的key值便可進行業務處理了,以下為demo代碼:// 使用帶參數二維碼掃碼登錄接口
public function wechat_login()
{
if (request()->isPost()) {
$rule = [
'event_key' => 'require',
'open_id' => 'require',
];
$data = [
'event_key' => input('param.event_key', '', 'trim'),
'open_id' => input('param.open_id', '', 'trim'),
];
$validate = Validate::rule($rule);
$result = $validate->check($data);
if (!$result) {
return Result::Success(['content' => $validate->getError()], 'fail');
}
$event_key = $data['event_key'];
$open_id = $data['open_id'];
$event_key = str_replace('demo::', '', $event_key);
if (empty($open_id)) {
return Result::Success(['content' => '必要參數為空'], 'fail');
}
$hasUser = demoUserModel::where('wechat_open_id', $open_id)->find();
if (empty($hasUser)) {
(new RedisCache)->getSetQrcodeLoginUUID($event_key, -3, 120);
return Result::Success(['content' => '您還未綁定平台賬號,請【使用賬號密碼】登錄平台並綁定後再試'], 'fail');
}
if ($hasUser['status'] != 1) {
return Result::Success(['content' => '用户狀態異常或被封禁,請聯繫上級管理進行處理。'], 'fail');
}
//更新會員狀態
$param = [
'login_times' => $hasUser['login_times'] + 1,
'login_ip' => $ip,
'login_time' => $time,
];
demoUserModel::where('id', $hasUser['id'])->update($param);
$payload['uid'] = $hasUser['id'];
$payload['password'] = $hasUser['password'];
$payload['loginTime'] = $time;
$token = think_encrypt(json_encode($payload));
$tokenArr['userToken'] = $token;
//用户登錄有效期
$loginExpireTime = 86400;
$loginRefreshExpireTime = 86400;
// 存儲用户token
$this->redis->set('token-' . $hasUser['id'], $token, $loginExpireTime);
$tokenArr['Expire'] = $loginExpireTime * 1000;
$tokenArr['isSuper'] = $hasUser['is_admin'];
$tokenArr['username'] = $hasUser['username'];
$tokenArr['avatar'] = $hasUser['avatar'];
(new RedisCache)->getSetQrcodeLoginUUID($event_key, json_encode($tokenArr, true));
return Result::Success(['content' => $hasUser['username'] . ' 通過掃碼登錄【XXXXX網站】成功'], '登錄成功,頁面將自動跳轉……');
}
return Result::Success(['content' => '請求不正常'], 'fail');
}至此,我們完成了微信掃碼登錄的整套流程。