Vue2.0快速与OneAuth集成
本节介绍如何使用Vue2.0快速与OneAuth集成,实现SPA应用程序的用户登录。
准备工作
前提条件:
- 已经具备了OneAuth的组织账户。如果没有?免费创建
- 具备基础的JavaScript开发经验
- 有SPA应用或正在构建的工程需要接入认证流程
如果你没有相关的应用,只是期望学习如何使用,建议参考如下的资料 :
教您构建Vue.js应用程序的基础知识,Vue Quickstart
或者,如果您想快速开始,只需下载一个应用示例,请下载我们的Vue示例。
在OneAuth控制台创建SPA应用
在您使用OneAuth可以登录用户之前,您需要在管理后台创建一个单页应用用于的OneAuth的 应用集成。
-
使用您的管理员帐户登录您的OneAuth组织。
-
在管理后台,选择 应用 > 应用
-
点击 创建应用
-
选择OIDC-Openid Connect认证方式
-
选择SPA 单页面应用 应用类型,点击下一步
-
填写应用名称,应用描述(可选)
-
用户授权方式选择Authorization Code,这将为您的SPA启用带有 PKCE 的授权码流,并能够在访问令牌过期时刷新访问令牌,而不会提示用户重新进行身份验证。
-
输入登录重定向的地址 ,例如,添加本地开发环境的地址:
http://localhost:3000/callback
,或者生产环境的地址:https://app.example.com/callback
。 -
点击保存
-
添加CORS安全域名,选择API>安全域,点击添加域,填写名称和安全域的URI,例如本地调试环境
http://localhost:8080
, 或者生产环境的URIhttps://app.example.com
-
在新建的SPA应用的授权用户 Tab页面,选择授权给Everyone或需要限制在某个Group进行访问。
安装SDK
npm i --save @oneauth/sdk-core @oneauth/sdk-vue
@oneauth/sdk-core 会提供登录登出和鉴权所需的方法,@oneauth/sdk-vue 中会提供对路由的鉴权功能和准备好的登录重定向页面
@oneauth/sdk-core 可单独使用。也可搭配@oneauth/sdk-vue 使用。本文使用@oneauth/sdk-core 和 @oneauth/sdk-vue 共同来完成vue2.0的集成。
配置 SDK
初始化时需要传入 issuer
, clientId
, redirectUri
, scopes
, 这些值可以从 oneauth 控制台得到,
实例化@oneauth/sdk-core 和@oneauth/sdk-vue
import App from "./App.vue";
import router from "./router";
import OneAuth from "@oneauth/sdk-core";
import OneAuthVue from "@oneauth/sdk-vue";
const oneAuth = new OneAuth({
issuer: `kang.oneauth.cn/oauth/v1`,
clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
redirectUri: `http://localhost:8080/callback`,
scopes: ["openid", "profile", "email"],
});
初始化@oneauth/sdk-core
1.登录
调用oneauth.login
,传入originalUri
参数,则会在登录完成之后跳转回这个网址
oneauth.login({
originalUri: 'http://localhost:3000/originalUri',
});
2.登出
调用oneauth.logout
oneauth.logout();
3.获取 accessToken
const accessToken = oneauth.accessToken;
4.获取 idToken
const idToken = oneauth.idToken;
5.获取用户信息
可传入泛型,以获得类型约束
type User = unknown;
const userInfo = await oneauth.getUserInfo<User>();
6.获取当前用户的登录状态
/**
* 是否登录了
**/
const isAuthed = await oneauth.isAuthenticated();
7.校验从登录重定向页面获取的 code 和 state
登录之后,oneauth 会重定向到实例化时传入的redirectUri
对应的页面。
并在 query 中带上参数code
和state
。
将参数传入本方法,返回布尔值,标识 code 是否有效
const isValid = await oneauth.verify(code, state);
注入$oneauth
把 @oneauth/sdk-core 实例注入到 Vue 的原型上
Vue.use(OneAuthVue, {
oneAuth,
});
添加登录按钮
在页面中添加一个按钮,并对其调用
this.$oneauth.login();
<template>
<button @click="login">login</button>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {},
})
export default class App extends Vue {
private login() {
this.$oneAuth.login();
}
}
</script>
添加回调路由
从@oneauth/sdk-vue 得到登录重定向页面,并配置到路由中。 路由的路径需要与@oneauth/sdk-core 的实例化参数redirectUri一致。
import { LoginCallback } from "@oneauth/sdk-vue";
const routes: Array<RouteConfig> = [
{
path: "/callback",
component: LoginCallback,
},
];
对特定路由进行认证鉴权
从@oneauth/sdk-vue 中获取导航守卫navigationGuard,并配置到路由中。
在需要鉴权的路由的 meta 中配置 auth 属性这样,在打开该路由时都会检查是否登录了。
如果没有登录则会跳转到登录页,登录完成后会跳转回来。
import { LoginCallback, navigationGuard } from "@oneauth/sdk-vue";
const routes: Array<RouteConfig> = [
{
path: "/callback",
component: LoginCallback,
},
{
path: "/about",
name: "About",
meta: {
auth: true,
},
component: () => import("../views/About.vue"),
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
router.beforeEach(navigationGuard);
export default router;
开启CORS
为了减少可能的攻击媒介,您需要明确定义可以访问 OneAuth API 以进行应用程序集成的可信来源。
跨域资源共享 (CORS) 允许托管在您网站上的 JavaScript 使用 XMLHttpRequest 向 OneAuth API 和 OneAuth 会话 cookie 发出请求。
添加CORS安全域名,选择API>安全域,点击添加域,填写名称和安全域的URI,例如本地调试环境http://localhost:8080
, 或者生产环境的URIhttps://app.example.com