vue.js - 带有 VueJS 的客户端 OAuth2 应用程序 - 需要服务器组件吗？

Question

我是使用 OAuth2 构建 JavaScript 客户端应用程序的新手。

我正在使用一个JavaScript 库，该库使用 localStorage 进行 OAuth 实现，它实现了只需要client-id的Implicit Flow - 没有client-secret。

我的公司使用企业身份提供者/身份验证服务器（不是社交网络）来发布令牌。我的自定义应用程序在返回时检查令牌，然后使用 Vue Router 的导航守卫继续导航。

问题：从安全的角度来看，下面的代码是一个很好的实用起点吗？我计划将其转换为 JavaScript 单页应用程序 (Webpack)，除非找到令牌，否则应用程序不会加载受保护的页面（仅显示欢迎/登陆页面，并带有用于身份验证的登录按钮）。是否需要某种服务器验证或客户端库是否足够好？

这是我的身份验证流程的一个简单示例（出于演示目的，使用 Google 作为身份验证服务器）

let client = new jso.JSO({
    providerID: "google",
    default_lifetime: 1800,
    client_id: '<my-app-id>',
    redirect_uri: "http://localhost/overview",
    authorization: "https://accounts.google.com/o/oauth2/auth",
    scopes: { request: ["https://www.googleapis.com/auth/userinfo.profile"] }
})

// check the browser response params when user returns        
client.callback()

const LandingPage = Vue.component('landing-page', {
    template: `<div>
        <h2>Thisis the landing page.</h2>
        <button v-on:click="oauthLogin">Login</button>
    </div>`,
    methods: {
        oauthLogin() {
            // get the token from the response params
            client.getToken()
        }
    }
})

const OverView = { template: '<div><h1>Welcome!</h1><p>Here is what site is about.</p></div>' }
const PResource = { template: '<h2>Protected Resource Content Here</h2>' }

const router = new VueRouter({
    mode: 'history',
    routes: [
        // {
        //     path: '*',
        //     component: NotFound
        // },
        {
            path: '/',
            component: LandingPage,
            meta: {
                requiresAuth: false
            }
        },
        {
            path: '/overview',
            component: OverView,
            meta: {
                requiresAuth: true
            }
        },
        {
            path: '/protected-resource',
            component: PResource,
            meta: {
                requiresAuth: true
            }
        }
    ]
})

router.beforeEach((to, from, next) => {
    const token = window.localStorage.getItem('tokens-google')

    if (to.matched.some(record => record.meta.requiresAuth)) {
        //if token exists, continue user to protected resource
        if (token !== null) {
            next()
        } else {
            //if no token exists, send to a landing page
            next({
                path: '/',
                query: {
                    redirect: to.fullPath
                }
            })
        }
    } else {
        // if token exists and user navigates to root, redirect to /overview
        if (token !== null && to.path == '/') {
            next({ path: '/overview' })
        } else {
            next() // make sure to always call next()!
        }
    }
})

var app = new Vue({
    el: '#app',
    computed: {
        checkToken() {
            return window.localStorage.getItem('tokens-google')
        }
    },
    router
})

谢谢！

标签： vue.jsoauth-2.0vue-router