Skip to content

Latest commit

 

History

History
109 lines (90 loc) · 4.36 KB

README.md

File metadata and controls

109 lines (90 loc) · 4.36 KB
Raw

Nuxt实现微信网页授权前后端分离（demo）

该项目目的在于

  • 展示微信网页授权、JSSDK功能的前后端分离，提供最佳实践。
  • 采用单页（SPA）的开发模式，便于与当前的开发技术接（ZHUANG）轨（BI）。而且可以通过netlify这样的静态托管服务器来托管前端页面（甚至是调试），确实带来比较多便利。
  • 展示如何使用优秀的PHP wechat库（EasyWechat）来实现服务端，EasyWechat官方文档主要是采用middleware形式实现微信网页授权，无法进行前后端分离。通过官方文档的学习比较难实现从前端code到user这段子流程。话说自己从头造轮子也不是什么难事，但毕竟违背了当今DRY的软件开发理念。 项目分为server+client。
  • 本人为业余软件开发爱好者，第一次分享代码，如果有用还请star，帮忙改进代码。

server

采用更快实现服务器，采用laravel，overtrue/laralve-wechat实现后台功能，核心代码非常简单。

    // Route::get('oauth/{code}')
    public function oauth($code)
    {
        try {
            $oauth = app('wechat.official_account')->oauth;
            $accessToken = $oauth->getAccessToken($code);
            $user        = $oauth->user($accessToken);
            return $user;
        } catch (\Exception $e) {
            return abort(401, $e->getMessage());
        }
    }

    // Route::post('jssdk')
    public function jssdk()
    {
        $url       = request('url');
        $jsApiList = request('jsApiList');
        $jssdk     = app('wechat.official_account')->jssdk;
        $jssdk->setUrl($url);
        return $jssdk->buildConfig($jsApiList);
    }

初始化项目

cd server
composer install
cp .env.example .env

然后编辑.env文档，配置一下配置项

WECHAT_OFFICIAL_ACCOUNT_APPID
WECHAT_OFFICIAL_ACCOUNT_SECRET
MOCK_WECHAT_OPENID
MOCK_WECHAT_NICKNAME
MOCK_WECHAT_HEADIMGURL

运行服务器：

php artisan serve

client

采用nuxt.js的vue.js通用框架，通过插件、中间件实现微信授权。为什么使用nuxt的原因：

  • Vue.js刚刚学，怕写出来的代码被笑。刚接触Nuxt不久，发现将Nuxt提供更分层，目录结构都是一种最佳实践。更容易表达前后端分离的功能逻辑。

初始化项目

cd client
yarn install
cp env.example.js env.js

然后编辑env.js文档，配置以下关键配置项

wechatAppid
appBaseUrl
apiBaseUrl

注意url结尾不带【/】，例如http://example.com/api

env.js读取NODE_ENV，实现production/development两种环境的自动切换。大大降低微信开发时需要采用生产服务器进行调试网页授权和jssdk的切换配置的麻烦。

  • 当运行yarn run dev自动读取dev配置
  • 当执行yarn generate自动读取prod配置

关于前端一些技术实现细节的说明

  • 采用lscache包用于保存微信授权信息到localStorage中，失效时间可以在env.js中配置
  • 微信授权（middleware/wechatAuth.js）共有【前端直接mock】、【服务器mock】、【真实环境】三种模式，三种模式顺序执行，通过env.js配置开关，第一种方便本地调试，第二种方面在服务器加入jwt，写数据等操作，更符合开发调试。
  • wechatAuth插件目前state前端跳转前生产的随机字符串，可以保存到localStorage中回调后校验。目前没有启用，感觉没必要。

关于真实环境实现的细节说明

  • 跳转url直接取当前的路径链接，如果当前的路劲已经是之前微信授权过的，失效后需要再次跳转授权，那么会去除其中的code和state两个查询参数（query）
  • 授权回调后，会调用服务器oauth接口，将code换取一个Socialite回来，写入到vuex store，同时利用lscache库写入到localStorage。
  • localStorage的失效时间由lscache实现。

nuxt中的微信授权中间件使用

参考pages/wechat.vue，核心代码为：

  computed: {
    wechatUser() {
      return this.$store.state.wechat.user
    }
  },

  middleware: ['wechatAuth']

参考

wkl007/vue-wechat-login

其他用到的依赖就不在此一一致谢了