Модуль nuxt-auth отлично работает с локальными учетными записями и входами в социальные сети, но все становится беспорядочно, когда вы пытаетесь обменять токены входа в социальные сети с вашим локальным токеном API. Модуль аутентификации nuxt не поддерживает пользовательские потоки аутентификации с использованием учетных записей социальных сетей. Фактически, nuxt-auth выполняет вход в социальную сеть, но не позволяет вам обменивать социальный токен на ваш собственный токен. Поэтому я создал это руководство, чтобы упростить вам задачу.
Итак, вот как содержать его в чистоте. Сначала клонируйте базовое приложение из моего github. Это из моего предыдущего руководства по модулю nuxt-auth. Ознакомьтесь с моей более ранней статьей о nuxt-auth, чтобы получить подробное описание загруженного проекта.
Я использовал epic-spinners для загрузки анимации. Вы можете установить эпические спиннеры, используя следующую команду.
npm install --save epic-spinners
Затем создайте плагин spinners.js в папке плагинов, чтобы включить в свой проект эпические прядильщики.
import Vue from 'vue'
import { SemipolarSpinner } from 'epic-spinners'
Vue.component('semipolar-spinner', SemipolarSpinner)
Затем включите плагин в nuxt.config.js
plugins: ['~plugins/spinners.js'],
Приступим к процессу аутентификации
Вот что мы собираемся делать. Сначала мы разрешим плагину nuxt-auth войти в систему с помощью социальной сети. Затем мы получим токен, полученный при обратном вызове от facebook, google или любой другой платформы. Затем мы отправим этот токен на наш собственный сервер и обменяем токен входа в социальную сеть на локальный токен. Затем мы принудительно установим локальный токен авторизации в модуле nuxt-auth. После этого нам нужно будет изменить стратегию на локальную, и, наконец, вы сможете получить локального пользователя из своего собственного API. Чтобы все было в порядке, мы создадим плагин для axios и включим все заголовки в плагин axios. Затем мы включим плагин в проект.
Первый
Вам следует изменить конфигурацию nuxt.auth, чтобы она соответствовала вашему потоку аутентификации. Вот как я это сделал.
auth: {
strategies: {
local: {
endpoints: {
login: {url: '/user/login', method: 'post', propertyName: 'token' },
logout: false,
user: {url: '/user/user', method: 'get', propertyName: 'data'},
},
tokenRequired: true,
tokenType: 'Bearer'
},
facebook: {
client_id: '',
userinfo_endpoint: false,
scope: ['public_profile', 'email'],
redirect_uri:'http://localhost:3000/callback'
},
google: {
client_id: '',
user:false,
redirect_uri:'http://localhost:3000/callback'
},
},
redirect: {
login: '/?login=1',
logout: '/',
}
},
Затем добавьте свою конечную точку API, чтобы она работала как базовая.
axios: {
baseURL:'https://aaa.com/api/v1'
},
Я намеренно удалил остальную часть конфигурации. Обратитесь к данному github для полной конфигурации.
Второй
Давайте настроим axios. Здесь я создам плагин, чтобы хранить все заголовки в одном месте. Для начала создайте файл с именем axios.js в подключаемых модулях и включите его в nuxt.config.js. Вот вид минимальной конфигурации nuxt после включения соответствующих подключаемых модулей.
plugins: [‘~plugins/axios.js’,’~plugins/spinners.js’]
Затем поместите следующий код в axios.js в папке плагинов.
export default function ({$axios, redirect}) {
$axios.onRequest(config => {
config.headers['Content-Type'] = 'application/json';
config.headers['Access-Control-Allow-Origin'] = "*";
})
}
Если вам нужно больше заголовков, просто включите их в плагин axios, и axios автоматически вставит заголовки при отправке запроса.
Теперь, когда у нас есть настройки axios. Давайте создадим настраиваемый плагин аутентификации. Создайте новый файл с именем auth.js в папке плагинов и введите следующий код.
export default async function ({ app }) {
if (!app.$auth.loggedIn) {
return
}
const auth = app.$auth;
const authStrategy = auth.strategy.name;
if(authStrategy === 'facebook' || authStrategy === 'google'){
const token = auth.getToken(authStrategy).substr(7)
const authStrategyConverted = authStrategy === 'facebook' ? 'fb' : 'google';
const url = `/user/signup/${authStrategyConverted}?token=${token}`;
try {
const {data} = await app.$axios.$post(url, null);
auth.setToken('local', "Bearer "+ data.access_token);
setTimeout( async () => {
auth.setStrategy('local');
setTimeout( async () => {
await auth.fetchUser();
})
});
} catch (e) {
console.log(e);
}
}
}
Как вы знаете, модуль nuxt-auth сохраняет состояние входа в систему в переменной $ auth.loggedIn. Следовательно, сначала мы должны проверить, вошел ли уже пользователь в систему. Если не вошел в систему, этот метод должен завершиться. Помните, что я говорил вам ранее: мы должны позволить модулю nuxt-auth войти в систему, прежде чем мы вмешаемся. Затем мы скопируем зарегистрированный статус в переменную, чтобы нам не приходилось повторять $ nuxt.auth в коде.
Затем я получаю доступ к стратегии. Это важно, поскольку мы настраиваем процесс авторизации в социальных сетях. Вы можете получить доступ к текущей зарегистрированной стратегии из nuxt-auth через auth.strategy.name (app. $ Auth.strategy.name). Мы делаем это только для того, чтобы разрешить вход в социальные сети. Затем получите сохраненный токен доступа для входа в социальную сеть из nuxt-auth через auth.getToken (authStrategy) .substr (7). Здесь auth.getToken («название стратегии») - это метод по умолчанию, встроенный в nuxt-auth. Обратитесь к документации для получения дополнительной информации.
const authStrategyConverted = authStrategy === 'facebook' ? 'fb' : 'google';
const url = `/user/signup/${authStrategyConverted}?token=${token}`;
Используя приведенный выше код, я создаю URL-адрес на основе стратегии. Затем отправьте пост-вызов на свою конечную точку, чтобы получить пользовательский токен и установить локальный токен на Vuex с помощью метода auth.setToken («стратегия», токен). Ваш API должен получить социальный токен, получить соответствующую информацию о пользователе и выдать токен доступа.
Стратегия здесь должна быть локальной. Затем измените стратегию на локальную, используя метод auth.setStrategy («стратегия»).
Наконец, включите этот плагин в nuxtjs по всему миру.
plugins: ['~plugins/auth.js','~plugins/axios.js','~plugins/spinners.js']
Вот ссылка репо на github. Это конец урока ❤
git clone https://github.com/rama41222/NuxtMedium.git
