構建自己的身份驗證服務可能很乏味、復雜且耗時。為了節省時間，開發人員經常求助于使用第三方身份驗證服務進行身份驗證。這篇文章將指導您如何使用 SuperTokens 向 VueJS 應用程序添加身份驗證。IP：Bhagya：Plag 檢查清楚。

SuperTokens是一個開源項目，可讓您快速將身份驗證添加到您的應用程序。它為您提供了預構建的身份驗證 UI 和后端 API，以提供端到端的集成體驗。

在深入研究代碼之前，讓我們討論一下整體架構。

Architecture

SuperTokens 由三個組件構成：

• 前端 SDK
• 后端 SDK
• 與數據庫對話的核心微服務。

預構建的 UI 是 ReactJS 組件（由supertokens-auth-react庫提供）。為了使用它們，我們必須在 VueJS 應用程序中渲染 React 組件。

supertokens-node對于后端，我們將使用 SuperTokens ( library )提供的 NodeJS SDK 。此 SDK 通過中間件公開所有身份驗證 API（如/auth/signin等/auth/signout），供前端調用。當調用這些 API 時，SDK 將與 SuperTokens Core 微服務對話，以讀取和寫入數據庫信息。

SuperTokens 核心服務可以是自托管的（并連接到您自己的數據庫），也可以由 SuperTokens 背后的團隊托管（在 supertokens.com 上注冊）。

為了使應用程序的包大小保持較小，我們將supertokens-auth-reactSDK 的使用限制為所有與身份驗證相關的路由（/auth/*默認情況下），并為我們應用程序中的所有其他路由使用更輕量的 vanilla JS SDK（supertokens-web-js庫）。最后，我們將使用代碼拆分和延遲導入來確保supertokens-auth-reactSDK 僅在訪問/auth/*路由時被捆綁。

前端集成

1. 設置和安裝

創建一個新的 Vue + Typescript 應用程序：

殼

npm init vue@latest

在提示中，選擇 Typescript 和 Vue Router：

完成后，進入項目并安裝以下依賴項：

殼

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

該supertokens-auth-react庫將在前端用于呈現登錄 UI，該supertokens-node庫將在后端用于公開身份驗證 API 路由。

2.調用Supertokens-auth-React和Supertokens-web-Js初始化函數

首先在文件夾AuthView內創建組件。/src/views該組件將渲染 SuperTokens React 組件以在前端處理身份驗證：

Vue.js 組件

<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-reactSDK 并在 Reactrender函數中使用它。

JAVA

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: "http://localhost:3001",
       websiteDomain: "http://localhost:4200",
   },
   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組件中加載它：

Vue.js 組件

<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-jsSDK。我們在 Vue 應用程序的根文件中初始化這個 SDK /src/main.ts：

Vue.js 組件

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: "http://localhost:3001",
    },
    recipeList: [Session.init()],
});

Vue.use(VueCompositionAPI);

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

app.mount("#app");

Session.init調用的配置，函數 (和)的theapiDomain和 the應該始終相同。 appNameinitsupertokens-auth-reactsupertokens-web-js

3. 設置路由以顯示登錄 UI

Vue CLI 已經為我們的應用生成了初始路由/src/router.index.ts。我們將更新此文件，以便所有/auth/*路由都加載AuthView我們之前創建的組件：

Vue.js 組件

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-reactSDK 顯示身份驗證 UI。

我們延遲加載/auth路由，因為AuthView組件將 ReactJS 作為依賴項加載。延遲加載確保這些依賴項僅在AuthView您訪問/auth/*路由時注入到組件中。對于所有其他路由，不會導入這些依賴項，從而保持應用程序的整體包大小。

4.查看登錄界面

如果您現在訪問
http://localhost:4200/auth，您應該會看到如下所示的登錄 UI：

后端集成

您可以在 supertokens.com 上的文檔中查看后端快速設置部分，甚至可以從我們的示例應用程序中復制代碼。總結：

• 您需要初始化supertokens-nodeSDK 并提供它recipeList（類似于您在前端所做的）。
• 然后您需要設置CORS、添加 SuperTokensmiddleware和errorHandler到您的應用程序。SuperTokens 向前端middleware公開所有與身份驗證相關的 API 路由（如登錄、注冊、注銷等）。
• 最后，您需要提供connectionURISuperTokens 核心的（位置）。為了快速開始，您可以提供它https://try.supertokens.com（這是我們為演示目的而托管的核心）。

成功設置服務器后，您現在可以嘗試在前臺注冊。

會話管理

在/src/views/HomeView.vue文件中，我們將檢查用戶是否經過身份驗證并有條件地呈現模板。對于經過身份驗證的用戶，我們可以向他們顯示一個注銷按鈕，其中包含有關其會話的信息（例如他們的userId）。對于未經身份驗證的用戶，我們可以向他們顯示一個按鈕以路由到該/auth頁面。

Vue.js 組件

<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="https://supertokens.com">SuperTokens 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,

    }, /*...*/],

});

If you now visit http://localhost:4200, you should see the following page:

SuperTokens 核心設置

在進行后端設置時，我們將
https://try.supertokens.com其connectionURI用作核心。這是一個由 SuperTokens 團隊托管的演示核心實例。您可以隨意使用它，但是當您致力于使用 SuperTokens 時，您應該切換到核心的自托管或托管版本。

結論

總而言之，我們使用 SuperTokens 提供的 ReactJS SDK 來展示我們的 Vue 應用程序的預構建登錄 UI。我們還優化了包大小，以便僅為與身份驗證相關的路由加載 ReactJS SDK。有用的鏈接：

• 示例 Vue 應用程序
• 配方/身份驗證方法列表