0

我正在客户端实施identity server 4。vue js

目前，我在应用程序中只有管理员登录名，密码和用户名。

我没有任何将用户重定向到登录的公共站点。我希望用户在点击应用程序客户端 URL 时直接重定向到登录页面。

目前在示例版本中identity server 4，用户需要点击导航栏上的登录按钮并重定向到登录。

我想通过以下方式做：

  1. 客户端点击 URL。检查用户是否通过身份验证。
  2. 重定向到身份服务器。
  3. 使用用户名/密码登录
  4. 成功登录后重定向到客户端门户。

我很难将这种方法集成到vue js.

在我当前的实现中，应用程序总是在循环中运行，并且总是被重定向到登录。

store.getters.isAuthenticated永远不会是真的，它总是用 SignIn 重定向应用程序。

我无法弄清楚我是否遗漏了我router.beforeEach的某些内容或oidc.

路线：

export const routes = [
  {
    component: Full,
    path: "/",
    meta: {
      requiresAuth: true
    },
    children: [
      {
        path: "/dashboard",
        name: "Dahboard",
        component: DashboardView,
        meta: {
          requiresAuth: true
        }
      },
      {
        path: "/signin",
        component: Signin
      },
      {
        path: "/company",
        component: Company,
        meta: {
          requiresAuth: true
        }
      }
    ]
  }
];

import Vue from "vue";
import VueRouter from "vue-router";
import { routes } from "./routes";
import store from '../store'

Vue.use(VueRouter);

let router = new VueRouter({
  mode: "history",
  routes
});

export default router;
router.beforeEach((to, from, next) => {
  if (store.getters.isAuthenticated) {
    const notValid = ['/signin', '/signup']

    if (notValid.lastIndexOf(to.path) >= 0) {
      next({
        path: '/dashboard'
      })
    } else if (to.path === '/signout') {
      store.commit('removeAuthentication')
      next({
        path: '/'
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresAuth)) {
    next({
      path: '/signin',
      query: {
        redirect: to.fullPath
      }
    })
  } else if (to.path === '/signout') {
    next({
      path: '/'
    })
  } else {
    next()
  }
})

登录组件：

import authService from './authService';

export default {
    name: 'Auth',
    mounted() {
        authService.login();
        authService.completeLogin();
    }
};

配置.js

export default {
    authority: "https://localhost:44350",
    client_id: "js",
    redirect_uri: `${domain}/signin`,
    response_type: "id_token token",
    scope:"openid profile api1",
    post_logout_redirect_uri : `${domain}`,
    silent_redirect_uri: `${domain}/silent.html`,
}

登录：this.userManager.signinRedirect()

完成登录：this.userManager.signinRedirectCallback()

静音.html：

new Oidc.UserManager().signinSilentCallback()
.catch(function (error) {
    console.error(error);
});
4

1 回答 1

1

我不确定我是否正确理解了所有内容，并且我从未使用过 Vue。但是让我描述一个我假设的典型隐式流程，您希望在这里实现：

  1. 用户将在未经身份验证的情况下访问您的网站（例如yoursite.com/dashboard）
  2. AuthService 将尝试登录用户 - 即他/她将被重定向到身份服务器的登录页面
  3. 如果用户在身份服务器上没有有效的会话，他/她将被提示输入凭据。否则，他/她将立即被重定向回您网站的请求重定向 uri（例如yoursite.com/signin）。
  4. 此时用户已回到您的站点，但仍未登录。您会注意到 url 在“#”字符后包含大量附加文本（例如yoursite.com/singin#access_token=ey456...）
  5. 当您调用completeLogin()oidc-client 将读取此数据并将其保存（例如在您的浏览器会话存储中） - 此方法完成后，您的用户已登录，您可以将他/她重定向到原始站点（例如yoursite.com/dashboard）

您可能会在第 1 步到第 4 步之间出现无限循环，因为您永远不允许第 5 步发生，因此登录永远不会完成。

尝试更改您的登录组件

import authService from './authService';

export default {
    name: 'Auth',
    mounted() {
        //authService.login(); -- This line will redirect the user again before the login can complete
        authService.completeLogin();
    }
};

还要确保即使他/她尚未通过身份验证，用户也可以访问登录组件，以便他/她可以完成登录过程。

于 2018-04-07T18:52:13.383 回答