빠른 시작: PKCE를 통해 인증 코드 흐름을 사용하여 사용자를 로그인하고 JavaScript SPA에서 액세스 토큰을 가져옵니다.
환영합니다! 아마도 기대했던 페이지는 아닐 것입니다. 수정 작업을 진행하는 동안 이 링크를 통해 올바른 문서로 이동해야 합니다.
빠른 시작: JavaScript를 사용하여 PKCE(코드 교환용 증명 키)를 사용하여 권한 부여 코드 흐름을 통해 SPA(단일 페이지 앱)에서 사용자 로그인
이 문제를 해결하는 동안 불편을 끼쳐 드려 죄송하며 양해해 주셔서 감사합니다.
이 빠른 시작에서는 PKCE(Proof Key for Code Exchange)를 통해 인증 코드 흐름을 사용하여 JavaScript SPA(단일 페이지 애플리케이션)에서 사용자를 로그인하고 Microsoft Graph를 호출할 수 있는 방법을 보여주는 코드 샘플을 다운로드하고 실행합니다. 코드 샘플은 Microsoft Graph API 또는 웹 API를 호출하기 위한 액세스 토큰을 가져오는 방법을 보여줍니다.
자세한 내용은 샘플 작동 방식을 참조하세요.
필수 조건
- Azure 구독 - 체험용 Azure 구독 만들기
- Node.JS
- Visual Studio Code 또는 다른 코드 편집기
1단계: Azure Portal에서 애플리케이션 구성
이 빠른 시작의 코드 샘플이 작동하려면 http://localhost:3000/의 리디렉션 URI를 추가합니다.
이러한 특성을 사용하여 애플리케이션을 구성합니다.
2단계: 프로젝트 다운로드
Node.js를 사용하여 웹 서버에서 프로젝트 실행
참고 항목
Enter_the_Supported_Account_Info_Here
3단계: 앱이 구성되고 실행할 준비가 됨
앱 속성 값을 사용하여 프로젝트를 구성했습니다.
Node.js를 사용하여 웹 서버에서 프로젝트를 실행합니다.
서버를 시작하려면 프로젝트의 디렉터리 내에서 다음 명령을 실행합니다.
npm install npm starthttp://localhost:3000/(으)로 이동합니다.로그인을 선택하여 로그인 프로세스를 시작한 다음, Microsoft Graph API를 호출합니다.
사용자가 처음으로 로그인하면 애플리케이션이 사용자 프로필에 액세스하고 로그인할 수 있도록 동의하라는 메시지가 표시됩니다. 성공적으로 로그인하면 사용자 프로필 정보가 페이지에 표시됩니다.
자세한 정보
샘플 작동 방법
MSAL.js
MSAL.js 라이브러리는 사용자를 로그인하고 Microsoft > ID 플랫폼으로 보호되는 API 액세스에 사용되는 토큰을 요청합니다. 샘플의 index.html 파일에는 라이브러리에 대한 참조가 포함되어 있습니다.
<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>
Node.js가 설치된 경우 Node.js 패키지 관리자(npm)를 사용하여 최신 버전을 다운로드할 수 있습니다.
npm install @azure/msal-browser
다음 단계
이 빠른 시작에 사용되는 애플리케이션을 빌드하기 위한 더 자세한 단계별 가이드는 다음 자습서를 참조하세요.