博客 / 詳情

返回

手把手教你給網站增加微信掃碼登錄功能

在網站開發中,我們經常會遇到需要給網站增加微信掃碼登錄的功能,一般來説有兩種方式可以實現,一種是使用微信開放平台,另一種是使用微信認證服務號的參數二維碼,網上以第一種居多,我們今天來説下第二種方式。首先準備一個【已認證】的微信服務號將公眾號添加至【檸聚開發者平台】中,如圖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');

}至此,我們完成了微信掃碼登錄的整套流程。

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.