如何通过AJAX GET请求实现Microsoft登录并调用MS Graph API？

嘿，我发现你用AJAX来调用微软的授权端点是走不通的，这是因为OAuth2的授权流程必须让用户在浏览器环境里和微软的登录页面直接交互，AJAX是后台异步请求，既没法弹出用户需要操作的登录窗口，还会遇到跨域限制的问题。

给你两种正确的实现方式：

方式1：打开新的登录窗口 #

这种方式不会让当前页面跳转，用户体验更流畅：

// 构造完整的授权URL（记得替换成你的<app ID>）
const authUrl = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=<你的App ID>&redirect_uri=http%3A%2F%2Flocalhost/myapp%2F&response_type=code&state=1234&scope=mail.read";

// 打开固定大小的登录窗口，方便用户操作
const loginWindow = window.open(authUrl, "MicrosoftLogin", "width=600,height=700,top=100,left=100");

// 可选：监听窗口关闭，后续处理登录完成后的逻辑
const checkLoginStatus = setInterval(() => {
  if (loginWindow.closed) {
    clearInterval(checkLoginStatus);
    // 这里可以做登录后的操作，比如刷新页面、获取用户信息等
    console.log("登录窗口已关闭，可处理后续业务逻辑");
  }
}, 1000);

方式2：直接跳转到授权页面 #

如果不需要保留当前页面状态，直接跳转是最简洁的方式：

const authUrl = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=<你的App ID>&redirect_uri=http%3A%2F%2Flocalhost/myapp%2F&response_type=code&state=1234&scope=mail.read";
window.location.href = authUrl;

后续关键步骤提示 #

用户完成登录授权后，微软会把code参数带回你设置的redirect_uri页面，你需要在这个页面里做这些操作：

• 从URL中提取code和state参数
• 验证state和你之前传入的一致，防止CSRF攻击
• 用code向微软的token端点发送POST请求，换取访问令牌（access_token）
• 拿到access_token后，才能正式调用MS Graph的API（比如读取邮件的/me/messages接口）

举个提取code的简单示例：

// 在redirect_uri对应的页面中执行
const urlParams = new URLSearchParams(window.location.search);
const authCode = urlParams.get('code');
const state = urlParams.get('state');

// 验证state合法性
if (state === "1234" && authCode) {
  console.log("拿到授权code：", authCode);
  // 这里发起POST请求换取token
}

内容的提问来源于stack exchange，提问作者Magg