跨域授权代码兑换错误：Azure AD、Vue 和 PKCE 指南

2024-03-06 22:21:26

## 使用 Vue 认证 Microsoft Entra

问题：跨域授权代码兑换错误

在使用 Vue-Authenticate 库为 Microsoft Entra 配置 OAuth2 认证时，您可能会遇到以下错误：

AADSTS9002325: 跨域授权代码兑换需要用于代码交换的证明密钥。

解决方法

要解决此错误，需要执行以下步骤：

1. 在 Azure AD 中启用 PKCE

登录 Azure 门户。
转到 Azure Active Directory > 应用程序注册。
选择您的应用程序。
在“平台配置”下，选择“Web”。
在“身份验证”部分，启用“PKCE 和防止 CSRF”。

2. 配置 Vue-Authenticate

安装 vue-authenticate 库。
在 main.js 文件中配置 Vue-Authenticate：

import Vue from 'vue';
import VueAuthenticate from 'vue-authenticate';

Vue.use(VueAuthenticate, {
  baseUrl: 'https://login.microsoftonline.com',
  clientId: 'YOUR_CLIENT_ID',
  tenant: 'YOUR_TENANT_ID',
  redirectUri: 'https://YOUR_APP_DOMAIN/callback',
  responseType: 'code',
  scope: 'openid email profile',
  codeChallengeMethod: 'S256',
});

3. 更新重定向 URI

在 Azure 门户中，转到应用程序注册 > 您的应用程序 > 认证 > 重定向 URI。
添加一个新重定向 URI，格式为：

https://YOUR_APP_DOMAIN/callback

4. 重新尝试登录

再次尝试使用 Vue-Authenticate 登录。错误应已消失。

PKCE 是什么？

PKCE（Proof Key for Code Exchange）是一种安全协议，可防止跨源攻击。当客户端请求授权代码时，它需要提供一个证明密钥。Microsoft Entra 在使用 OAuth 2.0 跨源授权代码兑换时需要 PKCE。

代码示例

以下是 main.js 文件中 vue-authenticate 配置的代码示例：

import Vue from 'vue';
import VueAuthenticate from 'vue-authenticate';

Vue.use(VueAuthenticate, {
  baseUrl: 'https://login.microsoftonline.com',
  clientId: 'YOUR_CLIENT_ID',
  tenant: 'YOUR_TENANT_ID',
  redirectUri: 'https://YOUR_APP_DOMAIN/callback',
  responseType: 'code',
  scope: 'openid email profile',
  codeChallengeMethod: 'S256',
});