AADSTS9002325: 코드 교환을 위한 인증 키는 교차 오리진 인증 코드를 상환하는 데 필요합니다.

AADSTS9002325: 코드 교환을 위한 인증 키는 교차 오리진 인증 코드를 상환하는 데 필요합니다.

다음을 생성했습니다.spa내 조직에서만 소유한 응용프로그램인데 코드를 요청했을 때 문제가 발생했습니다.어떻게 해결할 수 있습니까?

문제를 재현할 수 있습니다. 리다이렉트 URL을 웹 아래에 추가해야 합니다(단일 페이지 애플리케이션이 아님).그런 다음 인증 코드 흐름을 사용하여 코드를 가져올 수 있습니다.

비슷한 문제가 있습니다. 여기, 여기, 여기.

승인된 답변에 문제가 있습니다.질문은 SPA WEB에 대한 것이었지만 제안된 솔루션은 SSR WEB로 변경하는 것이었습니다.

SSR 웹의 경우 사용되는 흐름을 OAuth 2.0 인증 코드 흐름이라고 하며, 성공 로그인(302 리디렉션) 후 Microsoft에서 코드를 보내고 이 코드를 새 access_token(Microsoft 내부 아피스)으로 교환합니다.

때때로 웹 파일(idnex.html, js, css)을 제공하는 프로그래밍 가능한 백엔드 서버가 없는 spa 웹의 경우 코드를 수신하고 access_token으로 교환할 수 있습니다.사용되는 흐름을 OAuth 2.0 암묵적 허가 흐름이라고 합니다. 이 흐름은 ID 토큰 또는 액세스 토큰이 성공 로그인 후 Microsoft에서 직접 반환됩니다(302 리디렉션).

참고: 일부 IAM 플랫폼에서는 암묵적인 허가 흐름이 더 이상 사용되지 않습니다.

java, c#, php 등이 있는 ssr 웹 대신 순수한 react, angular, vue 등을 사용하는 spa 웹을 개발하는 경우, next, next 등과 같은 하이브리드를 사용하는 경우 auth code(ssr) 대신 access_token이 필요하다면 다음 단계를 수행해야 합니다.

1단계

앱을 관리자 또는 단순 사용자로 등록

https://portal.azure.com/ #blade/Microsoft_AAD_등록된 응용 프로그램/응용 프로그램 목록 블레이드

2단계

스파로 리디렉션하여 웹 플랫폼 유형 SPA 추가

3단계

액세스 토큰 확인란을 선택합니다.

4단계

이 단계에서는 clientid, clientsecret, reduirect_uri, tenant 등과 같은 종류의 로그인에 대한 고전적인 값(구글, 페이스북, 마이크로소프트 등)을 얻을 수 있어야 합니다.

5단계

스파 소스 코드 계층에서 인증 URL에서 response_type=code를 response_type=code로 변경합니다.

https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&response_type=token
&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F
&scope=openid
&response_mode=query

여러가지 종류의

모든 것이 작동하면 로그인 단계에서 모든 최종 사용자에게 다음과 같은 메시지가 표시됩니다.

예, 이것은 또 다른 "Azure 기능"입니다.그런데 누가 당신에게 마이크로소프트 도구를 사용하라고 했습니까?

이를 방지하려면 관리자 도움말을 사용하여 승인하거나 다음과 같은 무한 단계를 수행하여 앱을 확인됨으로 표시합니다.

참조:

• https://developer.okta.com/blog/2018/04/10/oauth-authorization-code-grant-type
• https://developer.okta.com/blog/2018/05/24/what-is-the-oauth2-implicit-grant-type
• https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow
• https://learn.microsoft.com/en-us/power-apps/developer/data-platform/walkthrough-register-app-azure-active-directory

제가 늦었는지는 모르겠지만, 저는 리액트 SPA 애플리케이션에서 동일한 문제를 겪었고 해결책은 제 앱을 웹인 포털로 변경하는 것이 아니라 제 요청에 증명 키가 없는 실제 문제를 해결하는 것이었습니다.도우미 기능을 만들고 사용자를 인증할 URL에 추가하여 해결했습니다.

function buildAuthorizationUrl(codeChallenge) {
    const clientId = "YOUR_CLIENT_ID":
    const redirectUri = encodeURIComponent("http://localhost:5173/auth/"); 
    // Change to url you need
    const responseType = "code";
    const scope = encodeURIComponent("openid profile offline_access User.Read");
    const state = encodeURIComponent("my_custom_state");
    return `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${clientId}&response_type=${responseType}&redirect_uri=${redirectUri}&scope=${scope}&state=${state}&code_challenge=${codeChallenge}&code_challenge_method=S256`;
    }
async function generateCodeVerifier() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array)
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");
}

async function generateCodeChallenge(codeVerifier) {
  const encoder = new TextEncoder();
  const data = encoder.encode(codeVerifier);
  const digest = await crypto.subtle.digest("SHA-256", data);

  const base64Url = (arrayBuffer) => {
    const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
    return base64.replace("+", "-").replace("/", "_").replace(/=+$/, "");
  };

  return base64Url(digest);
}

그런 다음 사용자가 로깅 버튼을 클릭하면 다음 논리가 추가되었습니다.

  const handleClick = async () => {
    const codeVerifier = await generateCodeVerifier();
    const codeChallenge = await generateCodeChallenge(codeVerifier);
    sessionStorage.setItem("code_verifier", codeVerifier);
    const authUrl = buildAuthorizationUrl(codeChallenge);
    window.location.href = authUrl;
  };

물론 일반 테넌트와 거래하지 않는 경우 빌드도 변경해야 합니다.AuthorizationUrl 함수입니다.

언급URL : https://stackoverflow.com/questions/64692600/aadsts9002325-proof-key-for-code-exchange-is-required-for-cross-origin-authoriz