Nuxt微信开发--授权登录到项目部署头条

ctolib 发布于8月前 阅读912次
0 条评论

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

之前一直用 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配置

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

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

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。