Aracılığıyla paylaş

Hızlı Başlangıç: PKCE ile kimlik doğrulama kod akışını kullanarak bir JavaScript SPA'da oturum açma ve erişim belirteci alma

  • Makale

Hoş geldiniz! Bu muhtemelen beklediğiniz sayfa değildir. Bir düzeltme üzerinde çalışırken bu bağlantı sizi doğru makaleye götürmelidir:

Hızlı Başlangıç: JavaScript kullanarak Kod Değişimi için Proof Key (PKCE) ile yetkilendirme kodu akışı aracılığıyla tek sayfalı uygulamalarda (SPA) kullanıcılarla oturum açma

Bu sorun için özür dileriz ve bu sorunu çözmek için çalışırken sabrınızı takdir ediyoruz.

Bu hızlı başlangıçta, bir JavaScript tek sayfalı uygulamanın (SPA) kullanıcılarda nasıl oturum açabileceğini ve Kod Değişimi için Proof Key (PKCE) ile yetkilendirme kodu akışını kullanarak Microsoft Graph'ı nasıl çağırabileceğini gösteren bir kod örneği indirip çalıştıracaksınız. Kod örneği, Microsoft Graph API'sini veya herhangi bir web API'sini çağırmak için erişim belirteci almayı gösterir.

Bkz. Örnek bir çizim için nasıl çalışır ?

Önkoşullar

1. Adım: Uygulamanızı Azure portalında yapılandırma

Bu hızlı başlangıçtaki kod örneğinin çalışması için öğesinin Yeniden Yönlendirme URI'sinihttp://localhost:3000/ekleyin.

Bu değişiklikleri benim için yap

Already configured Uygulamanız bu özniteliklerle yapılandırıldı.

2. Adım: Projeyi indirme

Node.js kullanarak projeyi bir web sunucusuyla çalıştırma

Kod örneğini indirme

Not

Enter_the_Supported_Account_Info_Here

3. Adım: Uygulamanız yapılandırılmış ve çalışmaya hazır

Projenizi uygulamanızın özelliklerinin değerleriyle yapılandırdık.

Node.js kullanarak projeyi bir web sunucusuyla çalıştırın.

  1. Sunucuyu başlatmak için proje dizininden aşağıdaki komutları çalıştırın:

    npm install
npm start

  2. Şuraya git: http://localhost:3000/.

  3. Oturum açma işlemini başlatmak için Oturum Aç'ı seçin ve ardından Microsoft Graph API'sini çağırın.

    İlk kez oturum açtığınızda, uygulamanın profilinize erişmesine ve oturum açmasına izin vermek için onay vermeniz istenir. Başarıyla oturum açtıktan sonra, kullanıcı profili bilgileriniz sayfada görüntülenir.

Daha Fazla Bilgi

Örnek nasıl çalışır?

Diagram showing the authorization code flow for a single-page application.

MSAL.js

MSAL.js kitaplığı, kullanıcılarda oturum açar ve Microsoft > kimlik platformu tarafından korunan bir API'ye erişmek için kullanılan belirteçleri istemektedir. Örneğin index.html dosyası kitaplığa bir başvuru içerir:

<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 yüklediyseniz, Node.js Paket Yöneticisi (npm) kullanarak en son sürümü indirebilirsiniz:

npm install @azure/msal-browser

Sonraki adımlar

Bu hızlı başlangıçta kullanılan uygulamayı oluşturmaya ilişkin daha ayrıntılı bir adım adım kılavuz için aşağıdaki öğreticiye bakın:

MS Graph'te oturum açma ve çağırma öğreticisi