Mulai cepat: Menambahkan rincian masuk dengan Microsoft ke aplikasi web

  • Artikel
  • 24 menit untuk membaca

Dalam mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan aplikasi web ASP.NET dapat memasukkan pengguna dengan akun Azure Active Directory (Azure AD).

Lihat Cara kerja sampel untuk melihat ilustrasi.

Prasyarat

Mendaftarkan dan mengunduh aplikasi

Anda memiliki dua opsi untuk mulai membuat aplikasi Anda: konfigurasi otomatis atau manual.

Konfigurasi otomatis

Jika Anda ingin mengonfigurasi aplikasi secara otomatis lalu mengunduh sampel kode, ikuti langkah-langkah berikut:

  1. Buka halaman portal Microsoft Azure untuk pendaftaran aplikasi.
  2. Masukkan nama aplikasi dan pilih Daftar.
  3. Ikuti petunjuk untuk mengunduh dan mengonfigurasikan aplikasi baru secara otomatis dengan satu kali klik.

Konfigurasi manual

Jika Anda ingin mengonfigurasikan sampel aplikasi dan kode secara manual, gunakan prosedur berikut.

Langkah 1: Daftarkan aplikasi

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.
  3. Cari dan pilih Microsoft Azure Active Directory.
  4. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.
  5. Untuk Nama, masukkan nama aplikasi. Misalnya, masukkan AspNetCore-Quickstart. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
  6. Atur Jenis URI Pengalihan ke Web dan nilai ke https://localhost:44368/.
  7. Pilih Daftar.
  8. Di bagian Kelola, pilih Autentikasi.
  9. Di bagian Pemberian akses implisit dan alur hibrid, pilih token ID.
  10. Pilih Simpan.

Langkah 2: Unduh proyek

Unduh sampel kode ASP.NET

Tip

Untuk menghindari kesalahan yang disebabkan oleh keterbatasan panjang jalur di Windows, kami sarankan mengekstrak arsip atau mengkloning repositori ke direktori di dekat akar drive Anda.

Langkah 3: Jalankan proyek

  1. Ekstrak file .zip ke folder lokal yang dekat dengan folder akar. Misalnya, ekstrak ke C:\Azure-Samples.

    Sebaiknya ekstrak arsip ke direktori dekat akar drive untuk menghindari kesalahan yang disebabkan oleh keterbatasan panjang jalur di Windows.

  2. Buka solusi di Visual Studio (AppModelv2-WebApp-OpenIDConnect-DotNet.sln).

  3. Bergantung pada versi Visual Studio, Anda mungkin perlu mengeklik kanan proyek AppModelv2-WebApp-OpenIDConnect-DotNet lalu pilih Pulihkan paket NuGet.

  4. Buka Package Manager Console dengan memilih Lihat>Windows Lainnya>Package Manager Console. Kemudian jalankan Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r.

  5. Edit Web.config ganti parameter ClientId, Tenant, dan redirectUri dengan:

    <add key="ClientId" value="Enter_the_Application_Id_here" />
<add key="Tenant" value="Enter_the_Tenant_Info_Here" />
<add key="redirectUri" value="https://localhost:44368/" />

    Dalam kode itu:

    • Enter_the_Application_Id_here adalah ID aplikasi (klien) dari pendaftaran aplikasi yang Anda buat sebelumnya. Temukan ID aplikasi (klien) di halaman Gambaran Umum aplikasi di Pendaftaran aplikasi di portal Microsoft Azure.
    • Enter_the_Tenant_Info_Here adalah satu opsi berikut ini:
      • Jika aplikasi Anda mendukung Hanya organisasi saya, ganti nilai ini dengan ID direktori (penyewa) atau nama penyewa (misalnya, contoso.onmicrosoft.com). Temukan ID direktori (penyewa) di halaman Gambaran Umum aplikasi di Pendaftaran aplikasi di portal Microsoft Azure.
      • Jika aplikasi Anda mendukung Akun di direktori organisasi apa pun, ganti nilai ini dengan organizations.
      • Jika aplikasi Anda mendukung Semua pengguna akun Microsoft, biarkan nilai ini sebagai common.
    • redirectUri adalah URI Pengalihan yang Anda masukkan sebelumnya di Pendaftaran aplikasi di portal Microsoft Azure.

Informasi selengkapnya

Bagian ini memberikan gambaran umum tentang kode yang diperlukan untuk masuk ke pengguna. Gambaran umum ini dapat berguna untuk memahami cara kerja kode, apa argumen utamanya, dan cara menambahkan rincian masuk ke aplikasi ASP.NET Core yang ada.

Cara kerja sampel

Diagram of the interaction between the web browser, the web app, and the Microsoft identity platform in the sample app.

Paket NuGet middleware OWIN

Anda dapat mengatur saluran autentikasi dengan autentikasi berbasis cookie menggunakan OpenID Connect di ASP.NET dengan paket middleware OWIN. Anda dapat menginstal paket ini dengan menjalankan perintah berikut di Package Manager Console dalam Visual Studio:

Install-Package Microsoft.Owin.Security.OpenIdConnect
Install-Package Microsoft.Owin.Security.Cookies
Install-Package Microsoft.Owin.Host.SystemWeb

Kelas permulaan OWIN

Middleware OWIN menggunakan kelas permulaan yang berjalan ketika proses hosting dimulai. Dalam mulai cepat ini, file startup.cs berada di folder akar. Kode berikut menunjukkan parameter yang digunakan mulai cepat ini:

public void Configuration(IAppBuilder app)
{
    app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);

    app.UseCookieAuthentication(new CookieAuthenticationOptions());
    app.UseOpenIdConnectAuthentication(
        new OpenIdConnectAuthenticationOptions
        {
            // Sets the client ID, authority, and redirect URI as obtained from Web.config
            ClientId = clientId,
            Authority = authority,
            RedirectUri = redirectUri,
            // PostLogoutRedirectUri is the page that users will be redirected to after sign-out. In this case, it's using the home page
            PostLogoutRedirectUri = redirectUri,
            Scope = OpenIdConnectScope.OpenIdProfile,
            // ResponseType is set to request the code id_token, which contains basic information about the signed-in user
            ResponseType = OpenIdConnectResponseType.CodeIdToken,
            // ValidateIssuer set to false to allow personal and work accounts from any organization to sign in to your application
            // To only allow users from a single organization, set ValidateIssuer to true and the 'tenant' setting in Web.config to the tenant name
            // To allow users from only a list of specific organizations, set ValidateIssuer to true and use the ValidIssuers parameter
            TokenValidationParameters = new TokenValidationParameters()
            {
                ValidateIssuer = false // Simplification (see note below)
            },
            // OpenIdConnectAuthenticationNotifications configures OWIN to send notification of failed authentications to the OnAuthenticationFailed method
            Notifications = new OpenIdConnectAuthenticationNotifications
            {
                AuthenticationFailed = OnAuthenticationFailed
            }
        }
    );
}
Di mana Deskripsi
ClientId ID aplikasi untuk aplikasi yang terdaftar di portal Microsoft Azure.
Authority Titik akhir layanan token keamanan (STS) untuk diautentikasi pengguna. Biasanya https://login.microsoftonline.com/{tenant}/v2.0 untuk awan publik. Dalam URL tersebut, {tenant} adalah nama penyewa, ID penyewa, atau common untuk referensi ke titik akhir umum. (Titik akhir umum digunakan untuk aplikasi multipenyewa.)
RedirectUri URL tempat pengguna dikirim setelah autentikasi terhadap platform identitas Microsoft.
PostLogoutRedirectUri URL tempat pengguna dikirim setelah keluar.
Scope Daftar lingkup yang diminta, dipisahkan oleh spasi.
ResponseType Permintaan agar respons dari autentikasi berisi kode otorisasi dan token ID.
TokenValidationParameters Daftar parameter untuk validasi token. Dalam hal ini, ValidateIssuer diatur ke false untuk menunjukkan bahwa parameter dapat menerima rincian masuk dari jenis akun pribadi, kantor, atau sekolah apa pun.
Notifications Daftar delegasi yang dapat dijalankan di OpenIdConnect pesan.

Catatan

Pengaturan ValidateIssuer = false adalah penyederhanaan untuk mulai cepat ini. Dalam aplikasi nyata, validasi penerbit. Lihat sampel untuk memahami cara melakukannya.

Tantangan autentikasi

Anda dapat memaksa pengguna untuk masuk dengan meminta tantangan autentikasi di pengontrol Anda:

public void SignIn()
{
    if (!Request.IsAuthenticated)
    {
        HttpContext.GetOwinContext().Authentication.Challenge(
            new AuthenticationProperties{ RedirectUri = "/" },
            OpenIdConnectAuthenticationDefaults.AuthenticationType);
    }
}

Tip

Meminta tantangan autentikasi menggunakan metode ini bersifat opsional. Anda biasanya menggunakannya saat ingin tampilan dapat diakses dari pengguna yang terautentikasi dan tidak diautentikasi. Atau, Anda dapat melindungi pengontrol menggunakan metode yang dijelaskan di bagian berikutnya.

Atribut untuk melindungi pengontrol atau tindakan pengontrol

Anda dapat melindungi pengontrol atau metode pengontrol menggunakan atribut [Authorize]. Atribut ini membatasi akses ke pengontrol atau tindakan dengan hanya mengizinkan pengguna terautentikasi untuk mengakses tindakan di pengontrol. Tantangan otentikasi kemudian akan terjadi secara otomatis ketika pengguna yang tidak diautentikasi mencoba mengakses salah satu tindakan atau pengontrol yang dihiasi oleh atribut [Authorize].

Bantuan dan dukungan

Jika Anda memerlukan bantuan, ingin melaporkan masalah, atau ingin mempelajari opsi dukungan, lihat Bantuan dan dukungan bagi pengembang.

Langkah berikutnya

Untuk panduan langkah demi langkah lengkap tentang membangun aplikasi dan fitur baru, termasuk penjelasan lengkap dari mulai cepat ini, cobalah tutorial ASP.NET.

Menambahkan rincian masuk ke aplikasi web ASP.NET

Dalam mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi web ASP.NET Core dapat memasukkan pengguna dari organisasi Azure Active Directory (Azure AD) mana pun.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Prasyarat

Mendaftarkan dan mengunduh aplikasi mulai cepat Anda

Langkah 1: Daftarkan aplikasi

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.
  3. Cari dan pilih Microsoft Azure Active Directory.
  4. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.
  5. Untuk Nama, masukkan nama aplikasi. Misalnya, masukkan AspNetCore-Quickstart. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
  6. Atur Jenis URI Pengalihan ke Web dan nilai ke https://localhost:44321/signin-oidc.
  7. Pilih Daftar.
  8. Di bagian Kelola, pilih Autentikasi.
  9. Untuk URL keluar saluran depan, masukkan https://localhost:44321/signout-oidc.
  10. Di bagian Pemberian izin implisit dan alur hibrid, pilih token ID.
  11. Pilih Simpan.
  12. Di bagian Kelola, pilih Sertifikat & rahasia>Rahasia klien>Rahasia klien baru.
  13. Masukkan Deskripsi, misalnya clientsecret1.
  14. Pilih Dalam 1 tahun untuk kedaluwarsa rahasia.
  15. Pilih Tambahkan dan segera rekam Nilai rahasia untuk digunakan di langkah selanjutnya. Nilai rahasia tidak pernah ditampilkan lagi dan tidak dapat ditarik kembali dengan cara lain. Rekam di lokasi yang aman seperti kata sandi apa pun.

Langkah 2: Unduh ASP.NET Core

Unduh solusi ASP.NET Core

Tip

Untuk menghindari kesalahan yang disebabkan oleh keterbatasan panjang jalur di Windows, kami sarankan mengekstrak arsip atau mengkloning repositori ke direktori di dekat akar drive Anda.

Langkah 3: Konfigurasikan proyek ASP.NET Core

  1. Ekstrak arsip .zip ke folder lokal di dekat akar drive. Misalnya, ekstrak ke dalam C:\Azure-Samples.

    Sebaiknya ekstrak arsip ke direktori dekat akar drive untuk menghindari kesalahan yang disebabkan oleh keterbatasan panjang jalur di Windows.

  2. Buka solusi di Visual Studio 2019.

  3. Buka file appsettings.json dan ubah kode berikut:

    "Domain": "[Enter the domain of your tenant, e.g. contoso.onmicrosoft.com]",
"ClientId": "Enter_the_Application_Id_here",
"TenantId": "common",
    • Ganti Enter_the_Application_Id_here dengan ID aplikasi (klien) dari aplikasi yang Anda daftarkan di portal Microsoft Azure. Anda dapat menemukan nilai ID Aplikasi (klien) di halaman Gambaran Umum aplikasi.
    • Ganti common dengan salah satu hal berikut ini:
      • Jika aplikasi Anda hanya mendukung Akun di direktori organisasi, ganti nilai ini dengan ID direktori (penyewa) (GUID) atau nama penyewa (misalnya, contoso.onmicrosoft.com). Anda dapat menemukan nilai ID Direktori (penyewa) di halaman Gambaran Umum aplikasi.
      • Jika aplikasi Anda mendukung Akun di direktori organisasi apa pun, ganti nilai ini dengan organizations.
      • Jika aplikasi Anda mendukung Semua pengguna akun Microsoft, biarkan nilai ini sebagai common.
    • Ganti Enter_the_Client_Secret_Here dengan Rahasia klien Anda buat dan catat di langkah sebelumnya.

Untuk mulai cepat ini, jangan ubah nilai lain dalam file appsettings.json.

Langkah 4: Buat dan jalankan aplikasi

Buat dan jalankan aplikasi di Visual Studio dengan memilih menu Debug>Mulai Debugging, atau dengan menekan tombol F5.

Anda dimintai kredensial, lalu diminta untuk menyetujui izin yang diperlukan aplikasi Anda. Pilih Terima pada prompt persetujuan.

Screenshot of the consent dialog box, showing the permissions that the app is requesting from the user.

Setelah menyetujui izin yang diminta, aplikasi menampilkan bahwa Anda telah berhasil masuk menggunakan kredensial Azure Active Directory Anda, dan Anda akan melihat alamat email Anda di bagian "Hasil api" di halaman ini. Ini diekstrak menggunakan Microsoft Graph.

Web browser displaying the running web app and the user signed in

Informasi selengkapnya

Bagian ini memberikan gambaran umum tentang kode yang diperlukan untuk masuk pengguna dan memanggil Microsoft Graph API atas nama mereka. Gambaran umum ini dapat berguna untuk memahami cara kerja kode, argumen utama, dan juga jika Anda ingin menambahkan masuk ke aplikasi ASP.NET Core yang ada dan memanggil Microsoft Graph. Proses ini menggunakan Microsoft.Identity.Web, yang merupakan pembungkus di sekitar MSAL.NET.

Cara kerja sampel

Diagram of the interaction between the web browser, the web app, and the Microsoft identity platform in the sample app.

Kelas permulaan

Middleware Microsoft.AspNetCore.Authentication menggunakan kelas Startup yang dijalankan saat proses hosting dimulai:

  // Get the scopes from the configuration (appsettings.json)
  var initialScopes = Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');

  public void ConfigureServices(IServiceCollection services)
  {
      // Add sign-in with Microsoft
      services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))

            // Add the possibility of acquiring a token to call a protected web API
            .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)

                // Enables controllers and pages to get GraphServiceClient by dependency injection
                // And use an in memory token cache
                .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
                .AddInMemoryTokenCaches();

      services.AddControllersWithViews(options =>
      {
          var policy = new AuthorizationPolicyBuilder()
              .RequireAuthenticatedUser()
              .Build();
          options.Filters.Add(new AuthorizeFilter(policy));
      });

      // Enables a UI and controller for sign in and sign out.
      services.AddRazorPages()
          .AddMicrosoftIdentityUI();
  }

Metode AddAuthentication() ini mengonfigurasi layanan untuk menambahkan autentikasi berbasis cookie. Autentikasi ini digunakan dalam skenario browser dan untuk mengatur tantangan ke OpenID Connect.

Baris yang berisi .AddMicrosoftIdentityWebApp menambahkan autentikasi platform identitas Microsoft ke aplikasi Anda. Aplikasi kemudian dikonfigurasi untuk memasukkan pengguna berdasarkan informasi berikut di AzureAD bagian file konfigurasi appsettings.json:

Kunci appsettings.json Deskripsi
ClientId ID aplikasi (klien) untuk aplikasi yang terdaftar di portal Microsoft Azure.
Instance Titik akhir layanan token keamanan (STS) bagi pengguna untuk mengautentikasi. Nilai ini biasanya https://login.microsoftonline.com/, menunjukkan awan publik Azure.
TenantId Nama penyewa atau ID penyewa (GUID), atau common untuk memasukkan pengguna dengan akun kantor atau sekolah atau akun pribadi Microsoft.

EnableTokenAcquisitionToCallDownstreamApiMetode ini memungkinkan aplikasi Anda memperoleh token untuk memanggil API web yang dilindungi. AddMicrosoftGraph memungkinkan pengontrol atau halaman Razor Anda untuk mendapatkan manfaat langsung GraphServiceClient (dengan injeksi dependensi) AddInMemoryTokenCaches dan metode ini memungkinkan aplikasi Anda mendapatkan manfaat dari cache token.

Configure()Metode ini berisi dua metode penting, app.UseAuthentication() dan app.UseAuthorization(), yang memungkinkan fungsionalitas bernama mereka. Juga dalam metode Configure() ini, Anda harus mendaftarkan rute Web Identitas Microsoft dengan setidaknya satu panggilan ke endpoints.MapControllerRoute() atau panggilan ke endpoints.MapControllers():

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapRazorPages();
});

Melindungi pengontrol atau metode pengontrol

Anda dapat melindungi pengontrol atau metodenya dengan menerapkan [Authorize] atribut ke kelas pengontrol atau satu atau beberapa metodenya. [Authorize]Atribut ini membatasi akses dengan hanya mengizinkan pengguna terautentikasi. Jika pengguna belum diautentikasi, tantangan autentikasi dapat mulai mengakses pengontrol. Di mulai cepat ini, cakupan dibaca dari file konfigurasi:

[AuthorizeForScopes(ScopeKeySection = "DownstreamApi:Scopes")]
public async Task<IActionResult> Index()
{
    var user = await _graphServiceClient.Me.Request().GetAsync();
    ViewData["ApiResult"] = user.DisplayName;

    return View();
}

Bantuan dan dukungan

Jika Anda memerlukan bantuan, ingin melaporkan masalah, atau ingin mempelajari opsi dukungan, lihat Bantuan dan dukungan bagi pengembang.

Langkah berikutnya

Repossikan GitHub yang berisi sampel kode ASP.NET Core yang direferensikan dalam mulai cepat ini mencakup instruksi dan lebih banyak sampel kode yang menunjukkan kepada Anda cara:

  • Menambahkan autentikasi ke aplikasi web ASP.NET Core baru.
  • Memanggil Microsoft Graph, API Microsoft lainnya, atau API web Anda sendiri.
  • Menambahkan otorisasi.
  • Memasukkan pengguna di cloud nasional atau dengan identitas sosial.

Tutorial aplikasi web ASP.NET Core di GitHub

Dalam mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi web Node.js dapat memasukkan pengguna dengan menggunakan alur kode otorisasi. Sampel kode juga menunjukkan cara mendapatkan token akses untuk memanggil Microsoft Graph API.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Mulai cepat ini menggunakan Microsoft Authentication Library for Node.js (MSAL Node) dengan alur kode otorisasi.

Prasyarat

Mendaftarkan dan mengunduh aplikasi mulai cepat Anda

Langkah 1: Daftarkan aplikasi

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.
  3. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.
  4. Masukkan Nama untuk aplikasi Anda. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
  5. Di bawah Jenis akun yang didukung, pilih Hanya akun dalam direktori organisasi ini.
  6. Atur jenis URI Pengalihan ke Web dan nilai ke http://localhost:3000/auth/redirect.
  7. Pilih Daftar.
  8. Di halaman Gambaran Umum aplikasi, catat nilai ID Aplikasi (klien) untuk digunakan nanti.
  9. Di bagian Kelola, pilih Sertifikat & rahasia>Rahasia klien baru>Rahasia klien baru. Biarkan deskripsi kosong dan kedaluwarsa default, lalu pilih Tambahkan.
  10. Perhatikan nilai Rahasia klien untuk digunakan nanti.

Langkah 2: Unduh proyek

Untuk menjalankan proyek dengan server web menggunakan Node.js, unduh file proyek inti.

Langkah 3: Konfigurasikan aplikasi Node Anda

Ekstrak proyek, buka folder ms-identity-node-main, lalu buka file .env di bawah folder App. Ganti nilai di atas sebagai berikut:

Variabel Deskripsi Misalnya
Enter_the_Cloud_Instance_Id_Here Instans cloud Azure tempat aplikasi Anda terdaftar https://login.microsoftonline.com/ (termasuk garis miring berikutnya)
Enter_the_Tenant_Info_here ID Penyewa atau Domain primer contoso.microsoft.com atau cbe899ec-5f5c-4efe-b7a0-599505d3d54f
Enter_the_Application_Id_Here ID Klien dari aplikasi yang Anda daftarkan cbe899ec-5f5c-4efe-b7a0-599505d3d54f
Enter_the_Client_Secret_Here Rahasia klien dari aplikasi yang Anda daftarkan WxvhStRfDXoEiZQj1qCy
Enter_the_Graph_Endpoint_Here Instans cloud Microsoft Graph API yang akan dipanggil oleh aplikasi Anda https://graph.microsoft.com/ (termasuk garis miring berikutnya)
Enter_the_Express_Session_Secret_Here Serangkaian karakter acak yang digunakan untuk menandatangani cookie sesi Ekspres WxvhStRfDXoEiZQj1qCy

File Anda akan terlihat seperti di bawah ini:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=cbe899ec-5f5c-4efe-b7a0-599505d3d54f
CLIENT_ID=fa29b4c9-7675-4b61-8a0a-bf7b2b4fda91
CLIENT_SECRET=WxvhStRfDXoEiZQj1qCy

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

Langkah 4: Jalankan proyek

Jalankan proyek menggunakan Node.js.

  1. Untuk memulai server, jalankan perintah berikut dari direktori proyek:

    cd App
npm install
npm start

  2. Buka http://localhost:3000/.

  3. Pilih Masuk untuk memulai proses masuk.

    Saat pertama kali masuk, Anda akan diminta untuk memberikan persetujuan untuk mengizinkan aplikasi memasukkan Anda dan mengakses profil Anda. Setelah Anda berhasil masuk, Anda akan diarahkan kembali ke beranda aplikasi.

Informasi selengkapnya

Cara kerja sampel

Sampel menghosting server web di localhost, port 3000. Saat browser web mengakses alamat ini, aplikasi merender beranda. Setelah pengguna memilih Masuk, aplikasi mengalihkan browser ke layar masuk Azure AD, melalui URL yang dihasilkan oleh pustaka MSAL Node. Setelah persetujuan pengguna, browser mengalihkan pengguna kembali ke beranda aplikasi, bersama dengan ID dan token akses.

MSAL Node

Pustaka MSAL Node memasukkan pengguna dan meminta token yang digunakan untuk mengakses API yang dilindungi oleh platform identitas Microsoft. Anda dapat mengunduh versi terbaru menggunakan Node.js Package Manager (npm):

npm install @azure/msal-node

Langkah berikutnya

Pelajari selengkapnya tentang skenario aplikasi web yang didukung platform identitas Microsoft:

Skenario aplikasi web yang memasukkan pengguna

Dalam mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan cara menyiapkan autentikasi OpenID Connect di aplikasi web yang dibangun menggunakan Node.js dengan Ekspres. Sampel dirancang untuk berjalan di platform apa pun.

Prasyarat

Mendaftarkan aplikasi Anda

  1. Masuk ke portal Microsoft Azure.

  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.

  3. Cari dan pilih Microsoft Azure Active Directory.

  4. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.

  5. Masukkan Nama untuk aplikasi Anda, misalnya MyWebApp. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.

  6. Di bagian Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun (misalnya, Skype, Xbox, Outlook.com) .

    Jika ada lebih dari satu URI pengalihan, tambahkan ini tab Autentikasi nanti setelah aplikasi berhasil dibuat.

  7. Pilih Daftar untuk membuat aplikasi.

  8. Di halaman Gambaran Umum aplikasi, temukan nilai ID Aplikasi (klien) dan rekam untuk digunakan nanti. Anda akan memerlukan nilai ini untuk mengonfigurasi aplikasi nanti dalam proyek ini.

  9. Di bagian Kelola, pilih Autentikasi.

  10. Pilih Tambahkan platform>Web.

  11. Di bagian URI Pengalihan, masukkan http://localhost:3000/auth/openid/return.

  12. Masukkan URL keluar saluran depanhttps://localhost:3000.

  13. Di bagian Pemberian izin implisit dan alur hibrid, pilih token ID karena sampel ini mengharuskan Alur pemberian izin implisit diaktifkan untuk memasukkan pengguna.

  14. Pilih Konfigurasikan.

  15. Di bagian Kelola, pilih Sertifikat & rahasia>Rahasia klien>Rahasia klien baru.

  16. Masukkan deskripsi kunci (misalnya aplikasi instans).

  17. Pilih durasi kunci baik Dalam 1 tahun, Dalam 2 tahun, atau Tidak Pernah Kedaluwarsa.

  18. Pilih Tambahkan. Nilai kunci akan ditampilkan. Salin nilai kunci dan simpan di lokasi yang aman untuk digunakan nanti.

Mengunduh aplikasi contoh dan modul

Selanjutnya, kloning repo sampel dan instal modul NPM.

Dari shell atau baris perintah:

$ git clone git@github.com:AzureADQuickStarts/AppModelv2-WebApp-OpenIDConnect-nodejs.git

atau

$ git clone https://github.com/AzureADQuickStarts/AppModelv2-WebApp-OpenIDConnect-nodejs.git

Dari direktori akar proyek, jalankan perintah:

$ npm install

Mengonfigurasi aplikasi

Berikan parameter di exports.creds dalam config.js seperti yang diinstruksikan.

  • Perbarui <tenant_name> di exports.identityMetadata dengan nama penyewa Microsoft Azure Active Directory dari format ".onmicrosoft.com.
  • Perbarui exports.clientID dengan ID Aplikasi yang dicatat dari pendaftaran aplikasi.
  • Perbarui exports.clientSecret dengan Rahasia aplikasi yang dicatat dari pendaftaran aplikasi.
  • Perbarui exports.redirectUrl dengan URI Pengalihan yang dicatat dari pendaftaran aplikasi.

Konfigurasi opsional untuk aplikasi produksi:

  • Perbarui exports.destroySessionUrl dalam config.js, jika Anda ingin menggunakan post_logout_redirect_uri berbeda.

  • Atur exports.useMongoDBSessionStore di config.js menjadi true, jika Anda ingin menggunakan mongoDB atau penyimpanan sesi yang kompatibel lainnya. Penyimpanan sesi default dalam sampel ini adalah express-session. Penyimpanan sesi default tidak cocok untuk produksi.

  • Perbarui exports.databaseUri, jika Anda ingin menggunakan penyimpanan sesi mongoDB dan URI database yang berbeda.

  • Perbarui exports.mongoDBSessionMaxAge. Di sini Anda dapat menentukan berapa lama Anda ingin menyimpan sesi di mongoDB. Unit ini adalah detik.

Membangun dan menjalankan aplikasi

Mulai layanan mongoDB. Jika menggunakan penyimpanan sesi mongoDB di aplikasi ini, Anda harus menginstal mongoDB dan memulai layanan terlebih dahulu. Jika menggunakan penyimpanan sesi default, Anda dapat melewati langkah ini.

Jalankan aplikasi menggunakan perintah berikut dari baris perintah.

$ node app.js

Apakah output server sulit dimengerti?: Kami menggunakan bunyan untuk masuk dalam sampel ini. Konsol tidak akan masuk akal bagi Anda kecuali Anda juga menginstal bunyan dan menjalankan server seperti di atas tetapi menyalurkannya melalui biner bunyan:

$ npm install -g bunyan

$ node app.js | bunyan

Anda selesai!

Anda akan memiliki server yang berhasil dijalankan di http://localhost:3000.

Bantuan dan dukungan

Jika Anda memerlukan bantuan, ingin melaporkan masalah, atau ingin mempelajari opsi dukungan, lihat Bantuan dan dukungan bagi pengembang.

Langkah berikutnya

Pelajari selengkapnya tentang skenario aplikasi web yang didukung platform identitas Microsoft:

Skenario aplikasi web yang memasukkan pengguna

Di mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi web Java dapat masuk pengguna dan memanggil Microsoft Graph API. Pengguna dari organisasi Azure Active Directory (Azure AD) mana pun dapat masuk ke aplikasi.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Prasyarat

Untuk menjalankan sampel ini, Anda perlu:

Mendaftar dan mengunduh aplikasi mulai cepat Anda

Ada dua cara untuk memulai aplikasi mulai cepat Anda: express (opsi 1) dan manual (opsi 2).

Opsi 1: Mendaftarkan dan mengonfigurasikan aplikasi Anda secara otomatis, lalu mengunduh contoh kode

  1. Buka pengalaman mulai cepat portal Microsoft Azure - Pendaftaran aplikasi.
  2. Masukkan nama untuk aplikasi Anda, lalu pilih Daftarkan.
  3. Ikuti instruksi dalam pengalaman mulai cepat portal untuk mengunduh kode aplikasi yang dikonfigurasi secara otomatis.

Opsi 2: Mendaftar dan mengonfigurasi sampel aplikasi dan kode secara manual

Langkah 1: Daftarkan aplikasi

Untuk mendaftarkan aplikasi Anda dan menambahkan informasi pendaftaran aplikasi secara manual ke aplikasi tersebut, ikuti langkah-langkah berikut:

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk beralih penyewa aplikasinya ingin Anda daftarkan.
  3. Cari dan pilih Microsoft Azure Active Directory.
  4. Di bawah Kelola, pilih Pendaftaran aplikasi.
  5. Pilih Pendaftaran baru.
  6. Masukkan Nama untuk aplikasi Anda, misalnya java-webapp. Pengguna aplikasi Anda mungkin melihat nama ini. Anda bisa mengubahnya nanti.
  7. Pilih Daftarkan.
  8. Di halaman Gambaran Umum, perhatikan ID Aplikasi (klien) dan ID Direktori (penyewa) . Anda akan membutuhkan nilai-nilai ini nanti.
  9. Di bagian Kelola, pilih Autentikasi.
  10. Pilih Tambahkan platform>Web.
  11. Di bagian URI Pengalihan, masukkan https://localhost:8443/msal4jsample/secure/aad.
  12. Pilih Konfigurasikan.
  13. Di bagian Web, di bawah URI Pengalihan, masukkan https://localhost:8443/msal4jsample/graph/me sebagai URI pengalihan kedua.
  14. Di bagian Kelola, pilih Sertifikat & rahasia. Di bagian Rahasia klien, pilih Rahasia klien baru.
  15. Masukkan deskripsi kunci (misalnya, rahasia aplikasi), biarkan kedaluwarsa default, dan pilih Tambahkan.
  16. Perhatikan Nilai rahasia klien. Anda akan membutuhkannya nanti.

Langkah 2: Unduh sampel kode

Unduh sampel kode

Langkah 3: Konfigurasikan sampel kode

  1. Ekstrak file zip ke folder lokal.

  2. Opsional. Jika Anda menggunakan lingkungan pengembangan terintegrasi, buka sampel di lingkungan tersebut.

  3. Buka file application.properties. Anda dapat menemukannya di folder src/main/resources/ . Ganti nilai di bidang aad.clientId, aad.authority, dan aad.secretKey dengan ID aplikasi, ID penyewa, dan nilai rahasia klien. Berikut adalah apa yang harus terlihat seperti:

     aad.clientId=Enter_the_Application_Id_here
 aad.authority=https://login.microsoftonline.com/Enter_the_Tenant_Info_Here/
 aad.secretKey=Enter_the_Client_Secret_Here
 aad.redirectUriSignin=https://localhost:8443/msal4jsample/secure/aad
 aad.redirectUriGraph=https://localhost:8443/msal4jsample/graph/me
 aad.msGraphEndpointHost="https://graph.microsoft.com/"

Dalam kode sebelumnya:

  • Enter_the_Application_Id_here adalah ID aplikasi untuk aplikasi yang Anda daftarkan.
  • Enter_the_Client_Secret_Here adalah Rahasia Klien yang dibuat di Sertifikat & rahasia untuk aplikasi yang Anda daftarkan.
  • Enter_the_Tenant_Info_Here adalah nilai ID Direktori (penyewa) dari aplikasi yang Anda daftarkan.
  1. Untuk menggunakan HTTPS dengan localhost, sediakan server.ssl.key properti. Untuk menghasilkan sertifikat yang ditandatangani sendiri, gunakan utilitas keytool (termasuk dalam JRE).

Berikut contohnya:

keytool -genkeypair -alias testCert -keyalg RSA -storetype PKCS12 -keystore keystore.p12 -storepass password

server.ssl.key-store-type=PKCS12
server.ssl.key-store=classpath:keystore.p12
server.ssl.key-store-password=password
server.ssl.key-alias=testCert
  1. Masukkan file keystore yang dihasilkan ke dalam folder sumber daya.

Langkah 4: Jalankan sampel kode

Untuk menjalankan proyek, lakukan salah satu langkah berikut:

  • Jalankan langsung dari IDE Anda dengan menggunakan server Spring Boot yang disematkan.
  • Kemas ke file WAR dengan menggunakan Maven, dan kemudian sebarkan ke solusi kontainer J2EE seperti Apache Tomcat.
Menjalankan proyek dari IDE

Untuk menjalankan aplikasi web dari IDE, pilih jalankan, lalu buka halaman beranda proyek. Untuk sampel ini, URL beranda standar adalah https://localhost:8443.

  1. Pada halaman depan, pilih tombol Masuk untuk mengalihkan pengguna ke Azure Active Directory dan meminta kredensial kepada mereka.

  2. Setelah pengguna diautentikasi, mereka dialihkan ke https://localhost:8443/msal4jsample/secure/aad. Mereka sekarang masuk, dan halaman akan menampilkan informasi tentang akun pengguna. Contoh UI memiliki tombol-tombol ini:

    • Keluar: Mengeluarkan pengguna saat ini dari aplikasi dan mengalihkan pengguna tersebut ke halaman beranda.
    • Tampilkan Info Pengguna: Memperoleh token untuk Microsoft Graph dan memanggil Microsoft Graph dengan permintaan yang berisi token, yang mengembalikan informasi dasar tentang pengguna yang masuk.
Menjalankan proyek dari Tomcat

Jika Anda ingin menyebarkan sampel web ke Tomcat, buat beberapa perubahan pada kode sumber.

  1. Buka ms-identity-java-webapp/src/main/java/com.microsoft.azure.msalwebsample/MsalWebSampleApplication.

    • Hapus semua kode sumber dan ganti dengan kode ini:

       package com.microsoft.azure.msalwebsample;

 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.boot.builder.SpringApplicationBuilder;
 import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

 @SpringBootApplication
 public class MsalWebSampleApplication extends SpringBootServletInitializer {

  public static void main(String[] args) {
   SpringApplication.run(MsalWebSampleApplication.class, args);
  }

  @Override
  protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
   return builder.sources(MsalWebSampleApplication.class);
  }
 }

  2. Port HTTP default Tomcat adalah 8080, tetapi Anda memerlukan koneksi HTTPS melalui port 8443. Untuk mengonfigurasi pengaturan ini:

    • Buka tomcat/conf/server.xml.

    • Cari <connector> tag, dan ganti konektor yang ada dengan konektor ini:

      <Connector
         protocol="org.apache.coyote.http11.Http11NioProtocol"
         port="8443" maxThreads="200"
         scheme="https" secure="true" SSLEnabled="true"
         keystoreFile="C:/Path/To/Keystore/File/keystore.p12" keystorePass="KeystorePassword"
         clientAuth="false" sslProtocol="TLS"/>

  3. Buka jendela Prompt Perintah. Masuk ke folder akar sampel ini (di mana pom.xml file berada), dan jalankan mvn package untuk membuat proyek.

    • Perintah ini akan menghasilkan file msal-web-sample-0.1.0.war di direktori /targets Anda.
    • Ganti nama file ini menjadi msal4jsample.war.
    • Terapkan file WAR dengan menggunakan Tomcat atau solusi kontainer J2EE lainnya.
      • Untuk menyebarkan file msal4jsample.war, salin ke direktori /webapps/ di instalasi Tomcat Anda, lalu mulai server Tomcat.

  4. Setelah file digunakan, buka https://localhost:8443/msal4jsample dengan menggunakan browser.

Penting

Aplikasi mulai cepat ini menggunakan rahasia klien untuk mengidentifikasi dirinya sebagai klien rahasia. Karena rahasia klien ditambahkan sebagai teks biasa ke file proyek Anda, untuk alasan keamanan, kami sarankan Anda menggunakan sertifikat alih-alih rahasia klien sebelum menggunakan aplikasi di lingkungan produksi. Untuk informasi selengkapnya tentang cara menggunakan sertifikat, lihat Kredensial sertifikat untuk autentikasi aplikasi.

Informasi selengkapnya

Cara kerja sampel

Diagram that shows how the sample app generated by this quickstart works.

Mendapatkan MSAL

MSAL for Java (MSAL4J) adalah pustaka Java yang digunakan untuk masuk pengguna dan meminta token yang digunakan untuk mengakses API yang dilindungi oleh platform identitas Microsoft.

Tambahkan MSAL4J ke aplikasi Anda dengan menggunakan Maven atau Gradle untuk mengelola dependensi Anda dengan membuat perubahan berikut ke file pom.xml (Maven) atau build.gradle (Gradle) aplikasi.

Dalam pom.xml:

<dependency>
    <groupId>com.microsoft.azure</groupId>
    <artifactId>msal4j</artifactId>
    <version>1.0.0</version>
</dependency>

Dalam build.gradle:

compile group: 'com.microsoft.azure', name: 'msal4j', version: '1.0.0'

Menginisialisasi MSAL

Tambahkan referensi ke MSAL untuk Java dengan menambahkan kode berikut di awal file tempat Anda akan menggunakan MSAL4J:

import com.microsoft.aad.msal4j.*;

Bantuan dan dukungan

Jika Anda memerlukan bantuan, ingin melaporkan masalah, atau ingin mempelajari opsi dukungan, lihat Bantuan dan dukungan bagi pengembang.

Langkah berikutnya

Untuk diskusi yang lebih mendalam tentang membangun aplikasi web yang masuk pengguna di platform identitas Microsoft, lihat seri skenario multipihak:

Skenario: Aplikasi web yang memasukkan pengguna

Di mulai cepat ini, Anda mengunduh dan menjalankan sampel kode yang menunjukkan bagaimana aplikasi web Python dapat memasukkan pengguna dan mendapatkan token akses untuk memanggil Microsoft Graph API. Pengguna dengan Akun Microsoft pribadi atau akun di organisasi Azure Active Directory (Azure AD) apa pun dapat masuk ke aplikasi.

Lihat Cara kerja sampel untuk melihat ilustrasi.

Prasyarat

Mendaftarkan dan mengunduh aplikasi mulai cepat

Anda memiliki dua opsi untuk memulai aplikasi mulai cepat: ekspres (Opsi 1), dan manual (Opsi 2)

Opsi 1: Mendaftarkan dan mengonfigurasi aplikasi secara otomatis lalu mengunduh sampel kode

  1. Buka pengalaman mulai cepat portal Microsoft Azure - Pendaftaran aplikasi.
  2. Masukkan nama aplikasi dan pilih Daftar.
  3. Ikuti petunjuk untuk mengunduh dan mengonfigurasi aplikasi baru Anda secara otomatis.

Opsi 2: Mendaftarkan dan mengonfigurasi sampel aplikasi dan kode secara manual

Langkah 1: Daftarkan aplikasi

Untuk mendaftarkan aplikasi Anda dan menambahkan informasi pendaftaran aplikasi ke solusi Anda secara manual, ikuti langkah-langkah berikut:

  1. Masuk ke portal Microsoft Azure.
  2. Jika Anda memiliki akses ke beberapa penyewa, gunakan filter Direktori + langganan di menu atas untuk memilih penyewa tempat Anda ingin mendaftarkan aplikasi.
  3. Di bagian Kelola, pilih Pendaftaran aplikasi>Pendaftaran baru.
  4. Masukkan Nama aplikasi, misalnya python-webapp. Pengguna aplikasi mungkin melihat nama ini, dan Anda dapat mengubahnya nanti.
  5. Di bagian Jenis akun yang didukung, pilih Akun di direktori organisasi dan akun Microsoft pribadi apa pun.
  6. Pilih Daftar.
  7. Di halaman Gambaran Umum aplikasi, catat nilai ID Aplikasi (klien) untuk digunakan nanti.
  8. Di bagian Kelola, pilih Autentikasi.
  9. Pilih Tambahkan platform>Web.
  10. Tambahkan http://localhost:5000/getAToken sebagai URI Pengalihan.
  11. Pilih Konfigurasikan.
  12. Di bagian Kelola, pilih Sertifikat & rahasia dan dari bagian Rahasia klien, pilih Rahasia klien baru.
  13. Ketik deskripsi kunci (misalnya rahasia aplikasi), biarkan kedaluwarsa default, dan pilih Tambahkan.
  14. Perhatikan NilaiRahasia Klien untuk digunakan nanti.
  15. Di bagian Kelola, pilih Izin API>Tambahkan izin.
  16. Pastikan bahwa tab API Microsoft dipilih.
  17. Dari bagian API Microsoft yang umum digunakan, pilih Microsoft Graph.
  18. Dari bagian Izin yang didelegasikan, pastikan bahwa izin yang tepat dicentang: User.ReadBasic.All. Gunakan kotak pencarian jika perlu.
  19. Pilih tombol Tambahkan izin akses.

Langkah 2: Unduh proyek

Unduh Sampel Kode

Langkah 3: Konfigurasikan Aplikasi

  1. Ekstrak file zip ke folder lokal yang lebih dekat dengan folder akar - misalnya, C:\Azure-Samples
  2. Jika Anda menggunakan lingkungan pengembangan terintegrasi, buka sampel di IDE favorit (opsional).
  3. Buka file app_config.py, yang dapat ditemukan di folder akar dan ganti dengan cuplikan kode berikut:
CLIENT_ID = "Enter_the_Application_Id_here"
CLIENT_SECRET = "Enter_the_Client_Secret_Here"
AUTHORITY = "https://login.microsoftonline.com/Enter_the_Tenant_Name_Here"

Di mana:

  • Enter_the_Application_Id_here - adalah ID Aplikasi untuk aplikasi yang Anda daftarkan.
  • Enter_the_Client_Secret_Here - adalah Rahasia Klien yang Anda buat di Sertifikat & Rahasia untuk aplikasi yang Anda daftarkan.
  • Enter_the_Tenant_Name_Here - adalah nilai ID Direktori (penyewa) dari aplikasi yang Anda daftarkan.

Langkah 4: Jalankan sampel kode

  1. Anda harus menginstal perpustakaan MSAL Python, kerangka kerja Flask, Flask-Sessions untuk manajemen sesi sisi server dan permintaan menggunakan pip sebagai berikut:

    pip install -r requirements.txt

  2. Jalankan app.py dari shell atau baris perintah:

    python app.py

    Penting

    Aplikasi mulai cepat ini menggunakan rahasia klien untuk mengidentifikasi aplikasi itu sendiri sebagai klien rahasia. Karena rahasia klien ditambahkan sebagai teks biasa ke file proyek, karena alasan keamanan, sebaiknya Anda menggunakan sertifikat alih-alih rahasia klien sebelum mempertimbangkan aplikasi sebagai aplikasi produksi. Untuk informasi selengkapnya tentang cara menggunakan sertifikat, lihat instruksi ini.

Informasi selengkapnya

Cara kerja sampel

Shows how the sample app generated by this quickstart works

Mendapatkan MSAL

MSAL adalah pustaka yang digunakan untuk memasukkan pengguna dan meminta token yang digunakan untuk mengakses API yang dilindungi oleh Platform identitas Microsoft. Anda dapat menambahkan MSAL Python ke aplikasi menggunakan Pip.

pip install msal

Inisialisasi MSAL

Anda dapat menambahkan referensi ke MSAL Python dengan menambahkan kode berikut ke bagian atas file tempat Anda akan menggunakan MSAL:

import msal

Bantuan dan dukungan

Jika Anda memerlukan bantuan, ingin melaporkan masalah, atau ingin mempelajari opsi dukungan, lihat Bantuan dan dukungan bagi pengembang.

Langkah berikutnya

Pelajari selengkapnya mengenai aplikasi web yang memasukkan pengguna dalam rangkaian skenario beberapa bagian.

Skenario: Aplikasi web yang memasukkan pengguna