发布于 由admin

Vue与OAuth 2.0/OpenID Connect的集成：实现客户端认证流与安全状态管理

Vue与OAuth 2.0/OpenID Connect的集成：实现客户端认证流与安全状态管理

大家好，今天我们来深入探讨Vue应用如何与OAuth 2.0和OpenID Connect集成，实现客户端认证流程以及安全的状态管理。OAuth 2.0 是一种授权框架，允许第三方应用在不暴露用户凭据的情况下访问用户资源。OpenID Connect 构建在 OAuth 2.0 之上，添加了身份验证层，允许客户端验证用户的身份。在单页面应用（SPA）中使用OAuth 2.0/OIDC需要特别关注安全性，因为客户端代码完全暴露在浏览器中。我们将讨论几种常见的策略和最佳实践，并提供实际的代码示例。

OAuth 2.0/OIDC 基础概念回顾

在深入代码之前，我们先回顾一下OAuth 2.0/OIDC的一些关键概念。

术语 描述
Resource Owner 拥有受保护资源的用户。
Client 想要访问 Resource Owner 资源的应用程序。 在我们的场景中，这是 Vue SPA。
Authorization Server 用于验证 Resource Owner 身份并颁发 Access Token 的服务器。
Resource Server 托管受保护资源的服务器。只有持有有效 Access Token 的 Client 才能访问这些资源。
Access Token Client 用于访问 Resource Server 的凭据。
Refresh Token 用于获取新的 Access Token，而无需用户再次授权。
Scope Client 请求访问的特定资源或权限的范围。
Client ID 用于唯一标识客户端的字符串。
Client Secret 客户端的机密密钥，用于验证客户端身份。注意：在客户端中，应避免直接存储Client Secret，因为这会带来安全风险。我们将使用授权码流程（Authorization Code Flow）和PKCE来解决这个问题。
Authorization Code Authorization Server颁发给Client的临时代码，用于换取Access Token。
PKCE Proof Key for Code Exchange，一种防止授权码被恶意拦截并使用的安全机制。
ID Token OpenID Connect 添加的令牌，包含有关已验证用户的声明信息。

选择合适的OAuth 2.0 Flow

在SPA中，由于客户端代码的暴露性，传统的Implicit Grant Flow被认为是不安全的，因为它直接将Access Token返回给客户端，增加了被窃取的风险。 推荐使用授权码流程（Authorization Code Flow）配合PKCE（Proof Key for Code Exchange）。

授权码流程的步骤如下：

  1. 客户端生成一个 code verifier 和 code challenge。
  2. 客户端将用户重定向到 Authorization Server 的授权端点，并传递 code challenge。
  3. 用户在 Authorization Server 登录并授权。
  4. Authorization Server 将用户重定向回客户端，并传递一个 authorization code。
  5. 客户端使用 authorization code 和 code verifier 向 Authorization Server 的 token 端点请求 Access Token。
  6. Authorization Server 验证 authorization code 和 code verifier，并颁发 Access Token 和 Refresh Token (可选)。

PKCE的作用是防止攻击者拦截authorization code，并用自己的客户端换取Access Token。通过在客户端生成code verifier和code challenge，并在请求token时验证两者之间的关系，可以确保只有原始的客户端才能使用authorization code。

Vue 项目搭建

首先，我们需要创建一个 Vue 项目。 可以使用 Vue CLI:

vue create vue-oauth-app

选择你喜欢的预设，或者手动配置，例如选择 Babel, TypeScript, Router, Vuex, CSS pre-processors, Linter / Formatter。

安装必要的依赖：

npm install vue-router axios js-cookie crypto-js --save
  • vue-router: 用于路由管理。
  • axios: 用于发起 HTTP 请求。
  • js-cookie: 用于安全地存储 token (可选，也可以使用 localStorage 或 sessionStorage，但需要注意XSS攻击)。
  • crypto-js: 用于生成 PKCE 的 code verifier 和 code challenge。

实现 PKCE

首先，创建一个名为 pkce.js 的文件，用于生成 code verifier 和 code challenge：

import * as CryptoJS from 'crypto-js';

function generateCodeVerifier(length) {
  let text = "";
  let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
  for (let i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

function generateCodeChallenge(codeVerifier) {
  const hash = CryptoJS.SHA256(codeVerifier);
  const base64Digest = CryptoJS.enc.Base64.stringify(hash);
  return base64Digest.replace(/+/g, '-').replace(///g, '_').replace(/=+$/, '');
}

export function generatePkcePair() {
  const codeVerifier = generateCodeVerifier(128);
  const codeChallenge = generateCodeChallenge(codeVerifier);
  return {
    codeVerifier,
    codeChallenge
  };
}

export function storeCodeVerifier(codeVerifier) {
  localStorage.setItem('pkce_code_verifier', codeVerifier);
}

export function getCodeVerifier() {
  return localStorage.getItem('pkce_code_verifier');
}

export function removeCodeVerifier() {
  localStorage.removeItem('pkce_code_verifier');
}

这段代码使用 crypto-js 库生成一个随机的 code verifier，并使用 SHA256 算法对其进行哈希处理，然后进行 Base64 编码，生成 code challenge。 storeCodeVerifier, getCodeVerifier 和 removeCodeVerifier 函数用于在 localStorage 中存储、检索和删除 code verifier。 注意： localStorage 有 XSS 攻击的风险，请确保你的应用对输入进行充分的验证和转义。

实现 OAuth 2.0 认证流程

接下来，创建一个名为 auth.js 的文件，用于处理 OAuth 2.0 认证流程：

import axios from 'axios';
import { generatePkcePair, storeCodeVerifier, getCodeVerifier, removeCodeVerifier } from './pkce';
import router from './router'; // 导入你的 Vue Router 实例

const AUTH_SERVER_URL = 'YOUR_AUTH_SERVER_URL'; // 替换为你的授权服务器的 URL
const CLIENT_ID = 'YOUR_CLIENT_ID'; // 替换为你的客户端 ID
const REDIRECT_URI = 'YOUR_REDIRECT_URI'; // 替换为你的重定向 URI (通常是你的 Vue 应用的某个路由)
const SCOPE = 'openid profile email'; // 你需要的 scope
const TOKEN_ENDPOINT = `${AUTH_SERVER_URL}/oauth/token`; // 替换为你的 token endpoint

export const login = () => {
  const { codeVerifier, codeChallenge } = generatePkcePair();
  storeCodeVerifier(codeVerifier);

  const authorizationUrl = `${AUTH_SERVER_URL}/oauth/authorize?` +
    `client_id=${CLIENT_ID}&` +
    `response_type=code&` +
    `scope=${SCOPE}&` +
    `redirect_uri=${REDIRECT_URI}&` +
    `code_challenge=${codeChallenge}&` +
    `code_challenge_method=S256`;

  window.location.href = authorizationUrl;
};

export const handleCallback = async () => {
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');

  if (code) {
    const codeVerifier = getCodeVerifier();
    removeCodeVerifier();

    try {
      const response = await axios.post(
        TOKEN_ENDPOINT,
        new URLSearchParams({
          grant_type: 'authorization_code',
          code: code,
          redirect_uri: REDIRECT_URI,
          client_id: CLIENT_ID,
          code_verifier: codeVerifier
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
      );

      const accessToken = response.data.access_token;
      const refreshToken = response.data.refresh_token; // 如果有的话
      const idToken = response.data.id_token; // 如果使用 OpenID Connect

      // 存储 Access Token, Refresh Token (可选), 和 ID Token (可选)
      localStorage.setItem('access_token', accessToken);
      if (refreshToken) {
          localStorage.setItem('refresh_token', refreshToken);
      }
      if (idToken) {
          localStorage.setItem('id_token', idToken);
      }

      // 重定向到你的应用
      router.push('/'); // 或者你想要重定向到的页面

    } catch (error) {
      console.error('Error exchanging code for token:', error);
      // 处理错误，例如显示错误消息
    }
  } else {
    // 处理缺少 code 的情况
    console.error('Missing code in callback');
  }
};

export const logout = () => {
  // 清除 tokens
  localStorage.removeItem('access_token');
  localStorage.removeItem('refresh_token');
  localStorage.removeItem('id_token');

  // 重定向到登录页面或主页
  router.push('/login'); // 或者你想要重定向到的页面
};

export const isLoggedIn = () => {
  return !!localStorage.getItem('access_token');
};

export const getAccessToken = () => {
  return localStorage.getItem('access_token');
};

这段代码实现了以下功能：

  • login(): 生成 PKCE 的 code verifier 和 code challenge，并将用户重定向到 Authorization Server 的授权端点。
  • handleCallback(): 处理 Authorization Server 的回调，从 URL 中获取 authorization code，然后使用 code verifier 向 Authorization Server 的 token 端点请求 Access Token。
  • logout(): 清除 Access Token 和 Refresh Token。
  • isLoggedIn(): 检查用户是否已登录。
  • getAccessToken(): 获取 Access Token。

重要安全提示:

  • 永远不要在客户端存储 Client Secret。 PKCE 的目的就是为了避免在客户端使用 Client Secret。
  • 使用 HTTPS。 确保你的应用和 Authorization Server 之间的所有通信都使用 HTTPS 加密。
  • 验证重定向 URI。 在 Authorization Server 中注册你的重定向 URI，并确保它与你在客户端中使用的 URI 完全匹配。这可以防止攻击者使用自己的重定向 URI 来拦截 authorization code。
  • 定期轮换 Refresh Token。 如果你的 Authorization Server 支持，配置 Refresh Token 的过期时间，并定期轮换它们。
  • 实施 XSS 防护。 由于 Access Token 存储在 localStorage 中，你的应用容易受到 XSS 攻击。 确保你的应用对所有用户输入进行验证和转义，以防止 XSS 攻击。
  • 使用 CORS。 配置你的 Authorization Server 和 Resource Server，只允许来自你的应用的域的请求。

在 Vue 组件中使用认证流程

现在，我们可以在 Vue 组件中使用 auth.js 中的函数。

创建一个名为 Login.vue 的组件：

<template>
  <button @click="login">Login</button>
</template>

<script>
import { login } from '@/auth';

export default {
  methods: {
    login() {
      login();
    }
  }
};
</script>

创建一个名为 Callback.vue 的组件，用于处理回调：

<template>
  <div>
    处理认证中...
  </div>
</template>

<script>
import { handleCallback } from '@/auth';
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      handleCallback();
    });
  }
};
</script>

创建一个名为 Home.vue 的组件，用于显示用户信息：

<template>
  <div>
    <h1>Welcome!</h1>
    <p v-if="isLoggedIn">
      You are logged in.
      <button @click="logout">Logout</button>
      <button @click="fetchData">Fetch Data</button>
      <p v-if="userData">{{userData}}</p>
    </p>
    <p v-else>
      Please <router-link to="/login">login</router-link>.
    </p>
  </div>
</template>

<script>
import { isLoggedIn, logout, getAccessToken } from '@/auth';
import { ref, onMounted } from 'vue';
import axios from 'axios';

const RESOURCE_SERVER_URL = 'YOUR_RESOURCE_SERVER_URL'; // 替换为你的资源服务器的 URL

export default {
  setup() {
    const isLoggedInRef = ref(isLoggedIn());
    const userData = ref(null);

    const logoutHandler = () => {
      logout();
      isLoggedInRef.value = false;
    };

    const fetchData = async () => {
      try {
        const accessToken = getAccessToken();
        const response = await axios.get(`${RESOURCE_SERVER_URL}/api/userinfo`, {
          headers: {
            Authorization: `Bearer ${accessToken}`
          }
        });
        userData.value = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    onMounted(() => {
      if (isLoggedInRef.value) {
        //可选： 可以在这里自动fetchData
      }
    });

    return {
      isLoggedIn: isLoggedInRef,
      logout: logoutHandler,
      fetchData,
      userData,
    };
  }
};
</script>

配置 Vue Router：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/components/Home.vue';
import Login from '@/components/Login.vue';
import Callback from '@/components/Callback.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/callback', component: Callback }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在 main.js 中使用 Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Refresh Token 的使用

如果你的 Authorization Server 颁发 Refresh Token，你可以使用它来获取新的 Access Token，而无需用户再次授权。 创建一个函数用于刷新 token：

// auth.js
export const refreshToken = async () => {
  const refreshTokenValue = localStorage.getItem('refresh_token');

  if (!refreshTokenValue) {
    // 没有 refresh token，用户需要重新登录
    logout();
    return null;
  }

  try {
    const response = await axios.post(
      TOKEN_ENDPOINT,
      new URLSearchParams({
        grant_type: 'refresh_token',
        refresh_token: refreshTokenValue,
        client_id: CLIENT_ID
      }),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    );

    const newAccessToken = response.data.access_token;
    const newRefreshToken = response.data.refresh_token || refreshTokenValue; // 如果服务器不返回新的 refresh token，则使用旧的

    localStorage.setItem('access_token', newAccessToken);
    localStorage.setItem('refresh_token', newRefreshToken);

    return newAccessToken;
  } catch (error) {
    console.error('Error refreshing token:', error);
    // 处理错误，例如清除 tokens 并重定向到登录页面
    logout();
    return null;
  }
};

你可以使用这个函数在 Access Token 过期时自动刷新它。 例如，你可以创建一个 Axios 拦截器：

// 在你的某个文件中，例如 api.js
import axios from 'axios';
import { getAccessToken, refreshToken } from './auth';

const api = axios.create({
  baseURL: 'YOUR_API_BASE_URL' // 替换为你的 API 的基本 URL
});

api.interceptors.request.use(
  async (config) => {
    let accessToken = getAccessToken();

    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

api.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const originalRequest = error.config;

    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      const newAccessToken = await refreshToken();

      if (newAccessToken) {
        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
        return api(originalRequest);
      }
    }

    return Promise.reject(error);
  }
);

export default api;

安全存储Access Token 的最佳实践

虽然我们在上面的例子中使用localStorage 存储access token，但需要注意XSS攻击的风险。以下是一些更安全的替代方案：

  1. HttpOnly Cookies: 使用 HttpOnly cookies 存储 Access Token。 HttpOnly cookies 只能由服务器访问，无法通过 JavaScript 访问，从而降低了 XSS 攻击的风险。 你需要配置你的 Authorization Server，将 Access Token 存储在 HttpOnly cookie 中。 你的 Vue 应用需要向你的服务器发送请求，服务器才能访问 cookie 并将 Access Token 传递给 Resource Server。

  2. Secure, SameSite Cookies: 设置 cookies 的 Secure 和 SameSite 属性，以提高安全性。 Secure 属性确保 cookie 只能通过 HTTPS 连接发送。 SameSite 属性可以防止 CSRF 攻击。

  3. Web Workers: 将 Access Token 存储在 Web Worker 中。 Web Worker 在单独的线程中运行，无法直接被主线程访问，从而降低了 XSS 攻击的风险。 你需要使用 Message Passing API 在主线程和 Web Worker 之间传递消息。

  4. 使用服务端的 BFF 模式 (Backend for Frontend): 让服务端来处理认证流程，客户端只负责UI展示，避免了客户端直接操作token，极大的提升了安全性。

选择哪种方案取决于你的具体需求和安全要求。 HttpOnly cookies 和 BFF 模式通常被认为是更安全的方案，但它们也需要更多的配置和服务器端支持。

代码示例的总结

我们探讨了如何使用 Vue.js 和 OAuth 2.0/OpenID Connect 构建安全的单页应用程序。通过使用授权码流程和 PKCE，我们避免了在客户端存储 Client Secret 的风险，并防止了 authorization code 被恶意拦截。我们还讨论了如何使用 Refresh Token 来获取新的 Access Token，以及如何使用 Axios 拦截器来自动刷新 Access Token。最后，我们探讨了安全存储 Access Token 的最佳实践，包括 HttpOnly cookies、Secure, SameSite Cookies 和 Web Workers。

后续开发的建议

在实际项目中，需要根据具体的业务需求和安全要求，选择合适的认证流程和安全措施。 此外，还需要考虑用户体验，例如记住用户的登录状态，提供友好的错误提示，以及支持多种认证方式。

更多IT精英技术系列讲座，到智猿学院

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注