Разработка Nuxt WeChat — авторизованный вход в систему для развертывания проекта
Я использую Vue для разработки SPA (Single-Page Application) на стороне WeChat.Авторизация выполняется серверной частью, а интерфейсу нужно только вытащить интерфейс для заполнения данных.
Поскольку данные собираются асинхронно, может случиться так, что страница загружается, но данные не полностью заполнены.Чтобы улучшить взаимодействие с пользователем, более поздние проекты используютNuxtФреймворк использует рендеринг на стороне сервера, и все проходит гладко, за исключением того, что мы наступаем на яму авторизации WeChat.
Конечно, если бы я на него не наступил, у меня бы не было этой статьи. Я поделюсь ею с вами для изучения. Если что-то не так, надеюсь, вы покритикуете топор~
Введите тему ниже
Строительство окружающей среды
На самом деле, скаффолдинг, связанный с nuxt, был интегрирован в vue-cli, и он предоставляет несколько различных шаблонов start, express, koa, adonuxt, здесь мы выбираем экспресс-шаблон.
Инициализируем наш проект следующей командой
// 初始化
$ vue init nuxt-community/express-template vue-ssr
затем установите зависимости
$ cd vue-ssr
$ npm install
Стартовый проект
$ npm run dev
доступlocalhost:3000, если вы видите следующий интерфейс, это доказывает, что вы успешно установили
Мы обнаружили, что на самом деле официальный помог нам сделать демо, нам просто нужно его изменить.
Настройки авторизации WeChat
Для авторизации WeChat необходимо иметь свой сервер и доменное имя (если нет, то можно только отладить тестовую учетную запись, WeChat оговаривает, что официальная учетная запись должна использовать доменное имя), официальный документ авторизации WeChatобратитесь сюда
Подать заявку на тестовую учетную запись общедоступной платформы WeChat
1. ВходимПубличная платформа микроканалаЭто хороший выбор, чтобы подать заявку на тестовый номер и использовать тестовый номер для разработки.После того, как приложение будет успешным, оно перейдет в фоновый режим.
В правом нижнем углу будет боковая панельинструменты разработчикавариант, после того, как мы нажмем, чтобы войти, выберитеТестовый аккаунт публичной платформы
Неудивительно, что вы получите два важных данных appID и appercet, как показано ниже.
2. Нам нужно привязать пользователя к тестовому аккаунту, просканировать следующееНомер теста QR-код, после успеха ваша информация появится в списке справа.Этот шаг очень важен.Если вы не сделали этого раньше, вы не сможете получить информацию о пользователе!
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.
На данный момент мы в основном завершили фоновую настройку авторизации WeChat, и следующим шагом будет написание кода сервера.
код сервера
Согласно официальным этапам авторизации WeChat, он в основном делится на следующие 4 этапа:
Авторизация WeChat использует метод авторизации OAuth2.0. Основные шаги заключаются в следующем:
Шаг 1: Пользователь соглашается на авторизацию и получает код
Шаг 2: Код обмена для авторизации веб-страницы access_token
Шаг 3: Обновите access_token (при необходимости)
Шаг 4. Получите информацию о пользователе (область должна быть snsapi_userinfo)
Мы создаем oauth.js в папке API сервера для авторизации WeChat.
До этого времени нам нужно установить модуль запроса, который нам удобен для обработки запросов, т.е.
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
Что ж, код авторизации готов, не забудьте смонтировать его в index.js в каталоге API.
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. Рекомендуется друзья, кто не знает как пройти посмотрите. ), его нужно настроить. Вот, мы можем найти 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,папка сборкиа такжефайл package.jsonПоместите их вместе в каталог проекта сервера (здесь я использую vue-ssr),
Зайдите в эту папку и запуститеnpm installУстановить зависимости, запустить после завершенияnpm start, проект можно запускать, а потом мы посещаемapi/oauthинтерфейс, появится всплывающая авторизация WeChat, как показано на рисунке
После подтверждения входа авторизация прошла успешно, и информацию о пользователе можно извлечь, как показано ниже.
В то же время мы также можем видеть личную информацию, напечатанную в журнале на стороне сервера, следующим образом:
На данный момент мы завершили всю авторизацию WeChat, и теперь нам нужно только сохранить информацию о пользователе в базе данных~
Ну и добавлю, если проект нужно повесить на сервер для запуска в фоновом режиме, то рекомендую для управления использовать pm2.Также есть много онлайн туториалов по использованию pm2, и он очень удобен в использовании.Вот я я только для проектов Nuxt,
Выполнение заказаpm2 start npm -- start, проект будет смонтирован в фоновом режиме, и будет выводиться следующий интерфейс
Конечно, вы также можете использоватьpm2 listПросмотр всех запущенных в данный момент приложений узлов, этот идентификатор является идентификатором текущего приложения;
Если вы хотите выйти из приложения, используйтеpm2 delete _idВот и все~