Часть 1 - Настройка Django с базами данных - PostgreSQL и MongoDB
Часть 2 - Настройка VueJS
Часть 3 - Настройка Google API
Часть 4 - Настройка backend API социальной аутентификации
Часть 5 - Связь с API из VueJS
« Часть 6 - Необработанный проект готов к использовать"

В этой части давайте сосредоточимся на VueJS - стороне внешнего интерфейса, перейдем из папки backend в папку нашего проекта и установим все, что нам потребуется для настройки простой среды внешнего интерфейса, глобально с помощью:

cd ..\
npm install -g vue-cli

и инициализируем проект Vue, шаг за шагом, и устанавливаем дополнительные пакеты, которые нам понадобятся для дальнейшей работы:

vue init webpack-simple frontend

который будет генерировать для нас файлы, необходимые для работы с VueJS. Он еще не установлен, только готов к установке, что мы можем сделать с помощью следующих команд:

cd frontend
npm install

а затем, когда наша интерфейсная среда будет установлена, мы можем установить дополнительные пакеты, необходимые для настройки социальной аутентификации здесь:

npm install vue-authenticate vue-router axios vue-axios vue-resource

Следуя документации vue-Authenticate, установите нашего провайдера Google для localhost, чтобы в frontend / src / main.js был файл :

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import VueResource from 'vue-resource'
import VueAuthenticate from 'vue-authenticate'
import VueAxios from 'vue-axios'
import axios from 'axios';
var options = {
  namespace: 'vuejs__'
};
Vue.use(VueRouter);
Vue.use(VueAxios, axios)
Vue.use(VueAuthenticate, {
  providers: {
    google: {
      clientId: 'yourgooglecliendID',
      redirectUri: 'http://localhost:8080/',
      url: 'http://localhost:8000/api/login/social/token_user/google/',
    }
  }
});
const router = new VueRouter({
  mode: 'history',
});
new Vue({
  el: '#app',
  render: h => h(App),
})

Конечно, в будущем, когда вы будете настраивать свои собственные серверы / хостинги, вы можете указать правильные домены вместо localhost: 8000, что означает сервер Django, поскольку localhost: 8080 означает серверы NodeJS.

Шаблоны Vue

В frontend / src / App.vue удалите все и поместите:

<template>
  <div class="container">
    <router-view></router-view>
  </div>
</template>
<script>
export default{
}
</script>
<style lang="scss">
</style>

Что там делает router-view? Это наш контейнер, в котором мы будем показывать контент, который зависит от наших URL-адресов, настроенных на стороне интерфейса, но прежде чем копать глубже, давайте подготовим для этого площадку. Не волнуйтесь, когда вы увидите пустую страницу. Мы собираемся все это настроить, но ранее нам также необходимо подготовить компоненты, используемые в качестве страниц.

Сначала в папке src создайте папку components и создайте там эти файлы с заданным содержанием.

1. Home.vue

<template>
    <div>
        <div>
            Welcome home!
        </div>
    </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>

2. Dashboard.vue

<template>
    <div>
        Welcome Dashboard! You logged in successfully!
    </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>

3. Dismiss.vue

<template>
    <div>
        Sorry, you can't log in!
    </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>

В итоге у вас должна получиться структура, как показано ниже:

Установка URL-адресов Vue

Поскольку мы подготовили все страницы, самое время запустить эту ракету.

В папке src создайте файл routes.js и поместите этот код.

import Home from './components/Home.vue';
import Dismiss from './components/Dismiss.vue';
import Dashboard from './components/Dashboard.vue';
import { authMixin } from './mixins/authMixin';
import VueAxios from 'vue-axios'
import axios from 'axios';
export const routes = [
    { path: '/', component: Home },
    { path: '/dismiss', component: Dismiss },
    { path: '/dashboard', component: Dashboard, beforeEnter: (to, from, next) => {
        authMixin.methods.checkToken("google", next)
    }},
]

Обратите внимание на жирные линии. Там я использовал собственный Mixin - компонент многократного использования, который я могу использовать в любое время, и мы используем его во второй жирной строке. Это называется Route Guard. Намерение Стражей Маршрута - это метод выполнения перед входом в указанный адрес, о чем я объясню ниже.

Не забудьте обновить файл main.js, чтобы мы могли пользоваться маршрутами.

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import { routes } from './routes';
import VueResource from 'vue-resource'
import VueAuthenticate from 'vue-authenticate'
import VueAxios from 'vue-axios'
import axios from 'axios';
var options = {
  namespace: 'vuejs__'
};
Vue.use(VueRouter);
Vue.use(VueAxios, axios)
Vue.use(VueAuthenticate, {
  providers: {
    google: {
      clientId: 'yourgooglecliendID',
      redirectUri: 'http://localhost:8080/',
      url: 'http://localhost:8000/api/login/social/token_user/google/',
    }
  }
});
const router = new VueRouter({
  mode: 'history',
  routes,  
});
new Vue({
  el: '#app',
  router,
  render: h => h(App),
})

Недавно добавленные строки я выделил жирным шрифтом.

Mixins - Создание многоразовых методов аутентификации

Как упоминалось выше, миксины - это многоразовые функции, используемые в любом компоненте, который мы хотим использовать.

Итак, создайте папку миксинов в папке src, а также в папке миксинов - создайте файл authMixin.js с приведенным ниже кодом:

import VueAxios from 'vue-axios'
import axios from 'axios';
import Vue from 'vue'
export const authMixin = {
    methods: {
        checkToken: function(provider, redirect){
            axios.post("http://localhost:8000/api/check/", {"token": localStorage.getItem("vue-authenticate.vueauth_token")}).then((response) => {
                    var path = (response.data.status)? true : "/";
                    redirect({ path: path});
                }).catch((error) => {
            });
        },
        authenticate: function(provider) {
            this.$auth.authenticate('google').then(function (response) {
                if(response.data.email === ""){
                   window.location = "/dashboard";
                }
            }).catch(function(error) {
                console.log(error);
            });
        }
    }
}

У нас есть два метода:

  • подтверждать подлинность
  • checkToken

Метод аутентификации будет использоваться, когда пользователь входит в систему в первый раз или когда метод checkToken завершится ошибкой, потому что пользователь не вошел в систему для выполнения желаемого действия.

Теперь, с миксинами, структура папок должна выглядеть так:

Как работает перенаправление?

Как вы заметили, я также выделил полужирным шрифтом true: «/» - это путь, по которому вы будете перенаправлены в случае неудачной аутентификации. Если все в порядке - верните true, поместите результат в этот фрагмент кода:

redirect({ path: path});

а это значит, что вы можете посетить желаемую страницу.

Перед тестированием давайте добавим эту функцию микширования в шаблон Home.vue в виде кнопки, чтобы мы могли использовать ее для входа в систему:

Home.vue

<template>
    <div>
        <div>
            Welcome home!
        </div>
        <div>
            <button @click="authenticate('google')">auth Google</button>
        </div>
    </div>
</template>
<script>
import { authMixin } from '../mixins/authMixin'
export default {
    mixins: [ authMixin ],
}
</script>
<style lang="scss">
</style>

Теперь вы можете запустить бэкэнд и фронтенд, чтобы протестировать его. В консолях поместите эти команды:

Для веб-интерфейса

npm run dev

и для бэкэнда:

python manage.py runserver

и в браузере проверьте URL - http: // localhost: 8080 / dashboard

И да, вы не можете войти в систему. Сервер выдает False в ответ вам в лицо ... Я имею в виду, что интерфейс и интерфейс перенаправляют вас обратно на главную страницу, потому что он еще не настроен. Google API тоже не настроен, так как сервер узнает, что это действительно вы?

На следующем этапе мы настроим Google API!

Следующая часть:
Часть 3 - Настройка Google API

Предыдущая часть:
Часть 1 - Настройка Django с базами данных - PostgreSQL и MongoDB