Вступление
Недавно я узнал о простом способе пройти аутентификацию с помощью auth-module, предоставляемого nuxt js. Вы можете взглянуть на модуль по адресу https://auth.nuxtjs.org. Там есть несколько примеров, но я реализовал его так.
Для начала вам необходимо установить несколько модулей, включая модуль vue-cli.
npm install -g vue-cli
После установки vue-cli вы можете начать с стандартного кода, предоставленного nuxtjs. Просто введите команду ниже и измените имя проекта.
vue init nuxt-community/starter-template <project-name>
Компакт-диск в каталог проекта, а затем выполните установку npm или пряжу. Чтобы запустить проект, вы можете выполнить команду npm run dev. Все команды, которые можно использовать, четко указаны в файле package.json в разделе «сценарии».
{
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
}
}
На этом настройка нашего базового проекта завершена.
Начало работы с auth.nuxtjs
Для начала вам необходимо установить следующие пакеты.
npm install --save @nuxtjs/auth @nuxtjs/axios @nuxtjs/toast bootstrap-vue
Я выбрал boostrap-vue () для этого урока. При необходимости вы можете использовать vuetify или любой другой UI-фреймворк. Не забудьте использовать версию axios на основе @nuxtjs.
OK. Теперь нам нужно настроить каждый пакет для работы с nuxt js. Итак, давайте начнем с auth. Перейти к nuxt.config.js в корне проекта.
- Добавьте соответствующие модули
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth',
'@nuxtjs/toast',
'bootstrap-vue/nuxt'
],
2. Добавьте конфигурации всплывающего сообщения.
toast: {
position: 'top-right',
duration: 2000
}
3. Добавьте axios baseURL. Это будет ваш базовый URL-адрес API
axios: {
baseURL: ‘http://192.168.8.141:5000/api/v1'
},
4. Настроим загрузку
loading: {
name: 'chasing-dots',
color: '#ff5638',
background: 'white',
height: '4px'
},
5. Наконец, добавьте наиболее важные конфигурации модуля аутентификации.
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: 'your facebook app id',
userinfo_endpoint: 'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email',
scope: ['public_profile', 'email']
},
google: {
client_id: 'your gcloud oauth app client id'
},
},
redirect: {
login: '/?login=1',
logout: '/',
user: '/profile',
callback:'/'
}
Хорошо, давайте рассмотрим приведенную выше конфигурацию одну за другой. [local, facebook, google, twitter, github oAuth] - это стратегии аутентификации, включенные в модуль auth.nuxtjs. Помимо этого, вы также можете добавить в конфигурацию собственные состояния. Для этого обратитесь к конфигурации auth.nuxtjs.
Если вы посмотрите на локальную стратегию, там есть поле под названием конечные точки. Конечная точка входа относится к маршруту аутентификации вашего API. Параметр Method представляет собой POST, а propertyName означает, где токен доступа присутствует в ответе. Для справки: вот как propertyName устанавливается внутри модуля auth.nuxtjs.
// Taken from the nuxt-auth
return this.ctx.app.$axios
.request(_endpoint)
.then(response => {
if (_endpoint.propertyName) {
return getProp(response.data, _endpoint.propertyName)
} else {
return response.data
}
})
У меня тут проблема. Токен аутентификации появился в качестве параметра заголовка, и я не мог найти способ решить эту проблему. Поэтому я изменил API. Если вы найдете способ решить эту проблему, сообщите об этом в комментариях.
Затем вы можете использовать поле logout, чтобы определить URL выхода вашего API. Поскольку REST не имеет состояния, нам это не понадобится. Параметр user помогает получить информацию о пользователе при входе в систему. Вы также можете определить tokenType «Bearer», тогда он будет добавлен к токену аутентификации.
Затем давайте рассмотрим стратегию аутентификации facebook. Здесь вам нужно только определить область, clientId и loginurl. Я использовал facebook API версии 2.12, но скоро он перестанет работать. То же самое с google, twitter и github.
Затем вы должны указать URL-адреса перенаправления. Таким образом, вы можете указать URL-адрес страницы выхода, URL-адрес профиля пользователя и URL-адрес обратного вызова, который будет использоваться при входе в социальные сети. Итак, если у вас есть собственный процесс аутентификации, URL-адрес обратного вызова поможет вам обменять токен входа в социальную сеть на токен, созданный API. Nuxt может прослушивать параметры URL-адреса, используя следующий код.
watch: {
$route() {
//do something with the url params set
}
},
Я добавлю код источника в свой github в конце, чтобы вы увидели, что я сделал с параметрами URL. Ой! И последнее: не забудьте создать файл index.js в директории / store, чтобы активировать хранилище Vuex.
Образец пользовательского интерфейса
Давайте создадим образец пользовательского интерфейса для проверки конфигурации. Удалите весь код по умолчанию в index.vue внутри страниц, и теперь ваш index.vue должен выглядеть так.
<template>
<section class="container">
<div></div>
</section>
</template>
Затем давайте создадим красивую форму. Просто скопируйте и вставьте приведенный ниже код.
<template>
<section class="container">
<div>
<b-form>
<b-form-group description="Let us know your Email." label="Enter your Email" label-for="username">
<b-form-input id="username" v-model="email" type="email" required></b-form-input>
</b-form-group>
<b-form-group description="Let us know your Password." label="Enter your Password" label-for="pw">
<b-form-input id="pw" v-model="password" type="password"> </b-form-input>
</b-form-group>
<b-button-group size="sm">
<b-button @click="facebook" variant="outline-success">Facebook</b-button>
<b-button @click="login" variant="outline-success">Login</b-button>
<b-button @click="google" variant="outline-success">Google</b-button>
<b-button @click="logout" variant="outline-success">Logout</b-button>
<b-button @click="check" variant="outline-success">Check</b-button>
<b-button to="/callback" variant="outline-success">Callback</b-button>
</b-button-group>
</b-form>
</div>
</section>
</template>
<script>
export default {
data() {
return {
email:'',
password:''
}
},
mounted() {},
watch: {},
components: {},
methods: {
google(){},
facebook(){},
login(){},
logout(){},
check(){},
}
}
</script>
<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
Ниже приведены определения методов
google()- Google Login facebook()- Facebook Login login()- Local Authentication logout() — Logout function check() — Check whether the user is logged in or now. Check the console for the output
Обратите внимание, что я использовал bootstrap-vue для создания формы. Теперь мы на последнем этапе. Давайте создадим методы, необходимые для входа в систему.
async google(){
await this.$auth.loginWith('google').catch(e => {
this.$toast.show('Error', {icon: "fingerprint"});
})
},
async facebook(){
await this.$auth.loginWith('facebook').catch(e => {
this.$toast.show('Error', {icon: "fingerprint"});
})
},
async login() {
try {
this.$toast.show('Logging in...', {icon: "fingerprint"});
await this.$auth.loginWith('local', {
data: {
"email": this.email,
"password": this.password
}
}).catch(e => {
this.$toast.error('Failed Logging In', {icon: "error_outline"});
});
if (this.$auth.loggedIn) {
this.$toast.success('Successfully Logged In', {icon: "done"});
}
} catch (e) {
this.$toast.error('Username or Password wrong', {icon: "error"});
}
},
check(){
console.log(this.$auth.loggedIn)
},
logout() {
this.$toast.show('Logging out...', {icon: "fingerprint"});
this.$auth.logout()
},
Я использовал значки материалов Google в качестве значков тостов. Вам просто нужно поместить cdn значков материалов под ссылками поля заголовка. Теперь мы почти закончили. Чтобы проверить, вошли вы в систему или нет, используйте консоль. Проверьте файлы cookie, localStorage. Настройка всех этих вещей выполняется автоматически самим модулем nuxt-auth.
Создайте страницу под названием callback.vue внутри страниц и добавьте следующий код.
<template>
<div>
<h1>You are Secure</h1>
<b-button to="/" variant="success">Callback</b-button>
</div>
</template>
<script>
export default {
middleware: ['auth']
}
</script>
<style scoped>
</style>
Обратите внимание, что я добавил новое промежуточное ПО под названием [‘auth’]. Модуль Nuxt-auth автоматически создаст для вас промежуточное ПО, так что вам не придется писать собственное промежуточное ПО, чтобы проверять, прошли ли вы аутентификацию перед перенаправлением на страницу. Это конец этого урока. Я буду делать больше уроков по Nuxt, когда у меня будет время. Оставайтесь на связи ❤. Особая благодарность Рушану Актару за то, что познакомил меня с auth.nuxt.js.
