Как использовать предварительно созданный пользовательский интерфейс SuperTokens с VueJS

Создание собственной службы аутентификации может быть утомительным, сложным и трудоемким. Чтобы сэкономить время, разработчики часто прибегают к использованию сторонних сервисов для аутентификации. Этот пост расскажет вам, как добавить аутентификацию в приложение VueJS с помощью SuperTokens.

SuperTokens — это проект с открытым исходным кодом, который позволяет быстро добавить аутентификацию в ваше приложение. Он предоставляет вам предварительно созданный пользовательский интерфейс для аутентификации и серверные API для сквозной интеграции.

Прежде чем мы углубимся в код, давайте обсудим общую архитектуру.

Архитектура

SuperToken состоит из трех компонентов:

Мы будем использовать внешний SDK SuperTokens в нашем приложении Vue, чтобы добавить все формы аутентификации (логин, регистрация, сброс пароля и т. д.). Вы также можете создать свой собственный пользовательский интерфейс, используя вспомогательные функции из внешних SDK, но в этом блоге мы сосредоточимся на предварительно созданном пользовательском интерфейсе.

Готовый пользовательский интерфейс представляет собой компоненты ReactJS (provided by the supertokens-auth-react library ). Чтобы использовать их, нам нужно будет визуализировать компоненты React в нашем приложении VueJS.

Для серверной части мы будем использовать NodeJS SDK, предоставленный SuperTokens (supertokens-node library). Этот SDK предоставляет все API-интерфейсы аутентификации (такие как /auth/signin, /auth/signout и т. д.) через промежуточное программное обеспечение для вызова внешнего интерфейса. При вызове этих API SDK обращается к микрослужбе SuperTokens Core для чтения и записи информации в базу данных.

Базовая служба SuperTokens может быть размещена либо самостоятельно (и подключена к вашей собственной базе данных), либо размещаться командой разработчиков SuperTokens (зарегистрируйтесь на supertokens.com).

Чтобы размер пакета приложения оставался небольшим, мы ограничим использование
supertokens-auth-react SDK для всех маршрутов, связанных с авторизацией (/auth/* by default)и используйте более легкий, vanilla JS SDK (supertokens-web-js library) для всех остальных маршрутов в нашем приложении. Наконец, мы воспользуемся разделением кода и отложенным импортом, чтобы убедиться, что supertokens-auth-react SDK поставляется только при посещении /auth/* маршруты.

self_hosted.png

Интеграция с внешним интерфейсом

1. Настройка и установка

Создайте новое приложение Vue + Typescript:

npm init vue@latest

В приглашении выберите Typescript и Vue Router:

Создание_a_new_vue_project.png

Как только это будет сделано, зайдите внутрь проекта и установите следующие зависимости:

npm i --save cors express npm-run-all react supertokens-auth-react react-dom supertokens-node

supertokens-auth-react библиотека будет использоваться во внешнем интерфейсе для отображения пользовательского интерфейса входа в систему, а supertokens-node библиотека будет использоваться на серверной части для предоставления маршрутов API авторизации.

2. Позвоните supertokens-auth-react и supertokens-web-js init функция

Начните с создания AuthView компонент внутри /src/views папка. Этот компонент будет отображать компонент SuperTokens React для обработки аутентификации на внешнем интерфейсе:

<script lang="ts">
   export default {
       // See next sections
   }
</script>

<template>
   <main>
       <div id="authId" />
   </main>
</template>

Обратите внимание, что мы сделали <div> элемент с id="authId". Здесь мы будем отображать компоненты реакции, предоставляемые SuperTokens.

Далее создадим файл — /src/components/Supertokens.tsx который является фактическим компонентом React, который мы будем отображать. Внутри этого файла мы инициализируем supertokens-auth-react SDK и используйте его в React render функция.

import * as React from "react";
import * as SuperTokens from "supertokens-auth-react";
import * as ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import { Github, Google } from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
   appInfo: {
       appName: "SuperTokens Demo App",
       apiDomain: "
       websiteDomain: "
   },
   recipeList: [
       ThirdPartyEmailPassword.init({
           signInAndUpFeature: {
               providers: [Github.init(), Google.init()],
           }
       }),
       Session.init(),
   ],
});

class SuperTokensReactComponent extends React.Component {
   override render() {
       if (SuperTokens.canHandleRoute()) {
           return SuperTokens.getRoutingComponent();
       }
       return "Route not found";
   }
}

export default SuperTokensReactComponent;

Фрагмент выше использует ThirdPartyEmailPassword рецепт (социальные сети + электронная почта/пароль для входа). Вы также можете выбрать другой рецепт, следуя разделу быстрой настройки в руководствах на supertokens.com.

Далее мы загрузим это SuperTokensReactComponent внутри AuthView компонент.

<script lang="ts">
import * as React from "react";
import * as ReactDOM from "react-dom";
import SuperTokensReactComponent from "../components/Supertokens";

export default{
    mounted(){
        ReactDOM.render(React.createElement(SuperTokensReactComponent),
            document.getElementById('authId'));
    }
    beforeDestroy(){
        ReactDOM.unmountComponentAtNode(document.getElementById('authId') as Element);
    }
}
</script>

Вышеупомянутое заботится о /auth/* сопутствующие маршруты. Для всех остальных страниц нашего приложения мы хотим знать, существует ли сеанс, и извлекать из него информацию. Для этого мы будем использовать supertokens-web-js SDK. Мы инициализируем этот SDK в корневом файле нашего приложения Vue. /src/main.ts :

import Vue from "vue";
import VueCompositionAPI, { createApp, h } from "@vue/composition-api";
import * as SuperTokens from "supertokens-web-js";
import * as Session from "supertokens-web-js/recipe/session";

import App from "./App.vue";
import router from "./router";

SuperTokens.init({
    appInfo: {
        appName: "SuperTokens Demo",
        apiDomain: "
    },
    recipeList: [Session.init()],
});

Vue.use(VueCompositionAPI);

const app = createApp({
    router,
    render: () => h(App),
});

app.mount("#app");

Конфиг для Session.init Звонок, apiDomain и appName как для init функции (supertokens-auth-react и supertokens-web-js) всегда должно быть одинаковым.

3. Настройте маршрутизацию, чтобы отобразить интерфейс входа в систему.

Vue CLI уже генерирует начальную маршрутизацию для нашего приложения внутри /src/router.index.ts. Мы обновим этот файл, чтобы все /auth/* маршруты загружают AuthView компонент, который мы создали ранее:

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: import.meta.env.BASE_URL,
    routes: [{
        path:'/auth*',
        name:'auth',
        component: () => import('../views/AuthView.vue'),
    }]
})

export default router

Путь для AuthView компонент /auth*. * указывает, что любые под/вложенные пути с /auth поскольку родительский путь должен отображаться AuthView компонент. AuthView компонент, в свою очередь, отобразит компонент ReactJS, который мы создали ранее, который будет использовать supertokens-auth-react SDK для отображения пользовательского интерфейса авторизации.
Мы лениво загружаем /auth маршрут, потому что AuthView компонент загружает ReactJS как зависимость. Ленивая загрузка гарантирует, что эти зависимости внедряются только в AuthView компонент при посещении /auth/* маршруты. Для всех остальных маршрутов эти зависимости не импортируются, что позволяет сохранить общий размер пакета приложения.

4. Просмотрите пользовательский интерфейс входа

Если вы сейчас посетите http://локальный:4200/аутентификациявы должны увидеть интерфейс входа в систему, как показано ниже:

Auth_View_Demo.png

Бэкэнд-интеграция

Вы можете увидеть раздел быстрой настройки бэкенда в нашей документации на supertokens.com или даже скопировать код из нашего примера. В качестве резюме:

  • Вам нужно инициализировать SDK supertokens-node и предоставить ему recipeList (аналогично тому, как вы это делали во внешнем интерфейсе).

  • Затем вам нужно настроить CORS, добавить промежуточное ПО SuperTokens и errorHandler в ваше приложение. Промежуточное ПО SuperTokens предоставляет интерфейсу все маршруты API, связанные с аутентификацией (такие как вход, регистрация, выход и т. д.).

  • Наконец, вам нужно указать connectionURI (местоположение) ядра SuperTokens. Чтобы быстро приступить к работе, вы можете предоставить его (это ядро, которое мы размещаем в демонстрационных целях).

После того, как вы успешно настроили свой сервер, вы можете попробовать зарегистрироваться на веб-интерфейсе.

Управление сеансом

Внутри /src/views/HomeView.vue файл, мы проверим, аутентифицирован ли пользователь, и условно отобразим шаблон. Для аутентифицированных пользователей мы можем показать им кнопку выхода с информацией об их сеансе (например, их userId). Для неаутентифицированных пользователей мы можем показать им кнопку для маршрута к /auth страница.

<script lang="ts">
import * as Session from "supertokens-web-js/recipe/session";
export default {
    data() {
        return {
            session: false,
            userId: "",
        };
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        redirectToLogin() {
            window.location.href = "/auth";
        },
        async getUserInfo() {
            this.session = await Session.doesSessionExist();
            if (this.session) {
                this.userId = await Session.getUserId();
            }
        },
        async onLogout() {
            await Session.signOut();
            window.location.reload();
        },
    },
};
</script>

<template>
    <main>
        <div class="body">
            <h1>Hello</h1>

            <div v-if="session">
                <span>UserId:</span>
                <h3>{{ userId }}</h3>

                <button @click="onLogout">Sign Out</button>
            </div>
            <div v-else>
                <p>
                    Visit the <a href=" tutorial</a> to learn how to build Auth
                    under a day.
                </p>
                <button @click="redirectToLogin">Sign in</button>
            </div>
        </div>
    </main>
</template>

Чтобы загрузить HomeView компонент включен / мы обновим /src/router/index.ts файл:

const router = new VueRouter({
    // ...
    routes: [{
        path: "/",
        name: "home",
        component: HomeView,
    }, /*...*/],
});

Если вы сейчас посетите http://локальный: 4200вы должны увидеть следующую страницу:

Подписано_В.png

Настройка ядра SuperTokens

Выполняя настройку бэкэнда, мы используем как connectionURI для ядра. Это демонстрационный экземпляр ядра, размещенный командой SuperTokens. Вы можете использовать это столько, сколько захотите, но когда вы решите использовать SuperTokens, вам следует переключиться на самостоятельно размещенный или управляемая версия ядра.

Заключение

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

Написано людьми в Супертокены — надеюсь тебе понравилось! Мы всегда доступны на нашем сервере Discord. Присоединяйтесь к нам, если у вас есть какие-либо вопросы или вам нужна помощь.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *