Question

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

我正在使用JavaScript library使用localStorage进行OAuth实施，该实施实现了 隐含流 ，其中只有 client-id 是需要 - 没有客户端秘密。

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

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

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

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
})

谢谢！

客户端OAuth2应用程序与VueJS - 需要服务器组件？

0 个答案: