Vue-ssr微信开发--授权登录到项目部署

Vue-ssr微信开发--授权登录到项目部署

之前一直用 Vue 做微信端的SPA（Single-Page Application - 单页应用程序）开发，授权都是后端来做的，前端只需拉接口填充数据即可。

由于数据都是异步获取的，可能会出现页面加载完成但是数据却并未全部填充完毕的情况，为了提高用户体验，后来的项目改用了 Nuxt 框架，采用服务端渲染，一切都比较顺利，唯独就是就是踩了微信授权的坑。

当然，如果我没踩过，也就不会有这篇文章了，本着学习的目的与大家一起分享，如有不对的地方还望大家批评斧正~

下面进入正题

环境搭建

其实 nuxt 相关的脚手架已经集成到了 vue-cli，同时提供 starter、express、koa、adonuxt多个不同的模版，这里我们选择使用 express 模版

采用以下命令，初始化我们的项目

 // 初始化
 $ vue init nuxt-community/express-template vue-ssr

然后安装依赖

$ cd vue-ssr

$ npm install

启动项目

$ npm run dev

访问localhost:3000，如果你看到如下的界面，证明你已经安装成功了

首页

我们发现其实官方已经帮我们做了 demo ，我们只要对其进行改造即可。

微信授权设置

要想进行微信授权，你需要有一个自己的服务器、域名（如果没有，只能对测试号调试，微信规定了正式号必须使用域名），微信授权的官方文档参考这里

申请微信公众平台测试号

1.我们进入微信公众平台 申请一个测试号，使用测试号来开发是一个不错的选择，申请成功之后进入后台，
右下角侧边栏会有一个开发者工具选项，我们点击进入之后，选择 公众平台测试帐号

公众号测试配置

不出意外，你会拿到两个重要的数据 appID 和 appsercet，如下

测试号信息

2.我们需要将用户绑定到测试账号上来，扫描下方的测试号二维码，成功后你的信息会出现右侧的列表中，这一步很关键，之前没有做这一步导致获取不到用户信息！

3.最后，我们还需要设置回调域名，即

回调域名 回调域名设置

要注意的是：
1、这里填写的是域名（是一个字符串），而不是URL，因此请勿加http://等协议头；
2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面 http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权。

到此，微信授权的后台配置我们已基本完成，接下来就是我们编写服务端代码的

服务端代码

我们按照微信官方的授权步骤来看，主要分为一下几个4步：

微信授权使用的是OAuth2.0授权的方式。主要有以下简略步骤：

第一步：用户同意授权，获取code

第二步：通过code换取网页授权access_token

第三步：刷新access_token（如果需要）

第四步：拉取用户信息(需scope为 snsapi_userinfo)

我们在 server 的 api 文件夹下面创建一个 oauth.js 用于微信授权。

在次之前，我们需要安装一个 request 模块，方便我们处理请求，即

npm install request --save

接着，我们编写 oauth.js 文件，具体代码如下：

//引入 路由 和 request 模块
import { Router } from 'express';
import request from 'request'

const router = Router();

//授权请求接口
router.get('/oauth' , function (req , res , next) {
    //用户同意授权，获取code
    let router = 'get_access_token';
    //编码后的地址
    let return_url = 'http%3A%2F%2F**设置的回调域名**%2Fapi%2F' + router ;
    let scope = 'snsapi_userinfo';
        
    //重定向到微信授权链接
    res.redirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + AppID + '&redirect_uri=' + return_url + '&response_type=code&scope=' + scope + '&state=STATE#wechat_redirect');
})

router.get('/get_access_token',function (req, res, next) {

    //第二步：通过code获取网页的access_token
    let code = req.query.code;

    request.get({
            url:'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + AppID + '&secret='+ AppSecret + '&code=' + code + '&grant_type=authorization_code'
        },
        function (error, response, body) {
            if( response.statusCode == 200 ){
            
                // 第三步：拉取用户信息(需scope为 snsapi_userinfo)
                
                let data = JSON.parse( body );
                let access_token = data.access_token;
                let openid = data.openid;

                request.get({
                        url : 'https://api.weixin.qq.com/sns/userinfo?access_token=' + access_token + '&openid=' + openid + '&lang=zh_CN',
                    },
                    function (error, response, body) {
                        if( response.statusCode == 200 ){
                            // 第四步：根据获取的用户信息进行对应操作
                            let userinfo = JSON.parse(body);
                            
                            console.log(userinfo)

                            res.send("\
                                <h1>openid:" + userinfo.openid +  "</h1>\
                                <h1>"+userinfo.nickname+" 的个人信息</h1>\
                                <p>![]("+userinfo.headimgurl+")</p>\
                                <p>"+userinfo.city+"，"+userinfo.province+"，"+userinfo.country+"</p>\
                                ")
                        }else{
                            console.log(response.statusCode);
                        }
                    }
                )
            }else{
                console.log(response.statusCode);
            }
        }
    )
})

export default router

嗯，授权代码就写完了，记得要挂载到api目录下 index.js 中

import { Router } from 'express'
import oauth from './oauth'

const router = Router()

// Add USERS Routes
router.use(oauth)

export default router

嗯，现在如果你浏览器访问 http://localhost:3000/api/oauth，不出意外，你会看到下面的界面：

微信授权提示

恭喜你，你已经成功了一半了！

部署

我们的项目是运行在 3000 端口，现在要放到服务器上，通过 80 端口去访问它，我们要用到 nginx 来做转发（对于nginx的安装这里不多做赘述，建议不懂得小伙伴去看看），需要对其进行配置，这里，我们找到nginx安装目录下的 nignx.conf 进行简单的配置即可，我这里给出一个参考：

Nginx配置

接下来就是要部署我们的 Nuxt 项目，它的部署与vue稍微有点不同，我们需要在我们的项目中，先在本地运行

npm run build

进行打包，之后本地创建一个 package.json 的文件（除去原本项目中dev的依赖），如下：

{
  "name": "vue-ssr",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "chenwei <cryptic_v@163.com>",
  "private": true,
  "scripts": {
    "dev": "backpack dev",
    "build": "nuxt build && backpack build",
    "start": "cross-env NODE_ENV=production node build/main.js",
    "precommit": "npm run lint",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "axios": "^0.16.2",
    "cross-env": "^5.0.1",
    "express": "^4.15.3",
    "nuxt": "^1.0.0-rc3",
    "request": "^2.83.0",
    "source-map-support": "^0.4.15"
  }
}

将打包好的 .nuxt 文件夹 ， bulid 文件夹 和 package.json 文件一起放到 服务器的项目目录下（我这里使用的是vue-ssr）,
进入该文件夹，运行npm install安装依赖，完成后运行npm start，项目即可运行，接着我们访问 api/oauth 接口，会弹起微信授权，如图所示

微信授权

确认登录之后，授权成功，可以拉取到用户信息，如下图

授权成功

同时，我们还可以在服务器端看到日志打印的个人信息如下：

服务端打印

到此，我们整个授权微信完成了，接下来只要将用户信息存入数据库即可~

嗯，补充一点，如果项目需要挂到服务器后台运行，这里我推荐使用 pm2 进行管理，有关 pm2 的用法网上教程也比较多，使用起来也很方便，这里我只是针对 Nuxt 项目而言，

执行命令 pm2 start npm -- start ，项目会被挂载在后台，并输出如下界面

pm2

当然，你也可以采用 pm2 list 查看当前的所有运行的node应用，这个 id 为当前应用的 id；
如果你要退出该应用，请使用pm2 delete _id即可~