微信網頁登入授權流程都不清楚，還說自己是3年前端？

deww發表於2021-07-13
網頁前端

下面是來自微信開發文件

步驟如圖：

第一步：使用者同意授權，獲取code

第二步：透過code換取網頁授權access_token

第三步：重新整理access_token

第四步：拉取使用者資訊

接下來我將實際專案的程式碼粘出來, 前端nuxt.js

前端部分

在外掛plugins 下app.js中封裝方法

export default ({ app }, inject) => {
    inject('wxLogin', (pageURI) => {
        let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + process.env.WXPAGEAPPID + "&scope=snsapi_userinfo&state=STATE&redirect_uri=" + encodeURIComponent(pageURI);
        return url
    })
}

methods:{
     login() {
        let url = location.href.split("#")[0];
        location.href = this.$wxLogin(url);
    }
}

透過此微信登入授權重定向當前頁面，會拿到code，將其傳入後端

後端部分

<?php

namespace thago\util;
use fast\Http;
use think\Session;

class Wechat
{

    private $app_id = '';
    private $app_secret = '';
    private $scope = 'snsapi_userinfo';

    public function __construct($app_id, $app_secret)
    {
        $this->app_id = $app_id;
        $this->app_secret = $app_secret;
    }

    /**
     * 獲取授權token網頁授權
     *
     * @param string $code
     * @return mixed|string
     */
    public function getAccessToken($code = '')
    {
        $params = [
            'appid'      => $this->app_id,
            'secret'     => $this->app_secret,
            'code'       => $code,
            'grant_type' => 'authorization_code'
        ];
        $ret = Http::sendRequest('https://api.weixin.qq.com/sns/oauth2/access_token', $params, 'GET');
        if ($ret['ret']) {
            $ar = json_decode($ret['msg'], true);
            return $ar;
        }
        return [];
    }

    /**
     * 獲取使用者資訊
     *
     * @param string $code
     * @return mixed|string
     */
    public function getUserinfo($access_token,$openid)
    {
        $params = [
            'access_token'      => $access_token,
            'openid'     => $openid,
            'lang' => 'zh_CN'
        ];
        $ret = Http::sendRequest('https://api.weixin.qq.com/sns/userinfo', $params, 'GET');
        if ($ret['ret']) {
            $ar = json_decode($ret['msg'], true);
            return $ar;
        }
        return [];
    }

}

 $wxchat = new \thago\util\Wechat($wxconfig['app_id'],$wxconfig['secret']);
 $token = $wxchat->getAccessToken($code);
 $openid = isset($token['openid']) ? $token['openid'] : '';
 $access_token = isset($token['access_token']) ? $token['access_token'] : '';
  if(!empty($openid)){
         $wxUserinfo = $wxchat->getUserinfo($access_token,$openid);
  }

步驟如下：

1、根據前端傳入的code, 公眾號appid,secret獲取access_token

2、再根據access_token拉取使用者資訊

總結：

在微信開發中遇到問題時，一定要結合微信官方文件，先了解其原理再開發。

更多面試題：點選這裡

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章