Bagikan melalui

Autentikasi Azure SignalR Service

  • Artikel

Tutorial ini berlanjut pada aplikasi ruang obrolan yang diperkenalkan di Membuat ruang obrolan dengan SignalR Service. Selesaikan mulai cepat tersebut terlebih dahulu untuk menyiapkan ruang obrolan Anda.

Dalam tutorial ini, pelajari cara membuat dan mengintegrasikan metode autentikasi Anda menggunakan Microsoft Azure SignalR Service.

Autentikasi yang awalnya digunakan dalam aplikasi ruang obrolan mulai cepat terlalu sederhana untuk skenario dunia nyata. Aplikasi ini memungkinkan setiap klien mengklaim identitas mereka dan server hanya akan menerimanya. Pendekatan ini tidak efektif di dunia nyata karena pengguna jahat dapat menggunakan identitas palsu untuk mengakses data sensitif.

GitHub menyediakan API autentikasi berdasarkan protokol standar industri populer yang disebut OAuth. API ini memungkinkan aplikasi pihak ketiga untuk mengautentikasi akun GitHub. Dalam tutorial ini, Anda dapat menggunakan API ini untuk menerapkan autentikasi melalui akun GitHub sebelum mengizinkan login klien ke aplikasi ruang obrolan. Setelah autentikasi akun GitHub, informasi akun akan ditambahkan sebagai cookie yang akan digunakan oleh klien web untuk mengautentikasi.

Untuk mengetahui informasi selengkapnya tentang API autentikasi OAuth yang disediakan melalui GitHub, lihat Dasar-Dasar Autentikasi.

Anda dapat menggunakan editor kode apa pun untuk menyelesaikan langkah-langkah dalam mulai cepat ini. Namun, Visual Studio Code adalah opsi bagus yang tersedia di platform Windows, macOS, dan Linux.

Kode untuk tutorial ini dapat diunduh di repositori GitHub AzureSignalR-samples.

OAuth Complete hosted in Azure

Dalam tutorial ini, Anda akan mempelajari cara:

  • Mendaftarkan aplikasi OAuth baru dengan akun GitHub Anda
  • Menambahkan pengontrol autentikasi untuk mendukung otentikasi GitHub
  • Menyebarkan ASP.NET web Core Anda ke Azure

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda harus memenuhi prasyarat berikut:

Membuat aplikasi OAuth

  1. Buka browser web dan masuk ke https://github.com, lalu masuk ke akun Anda.

  2. Untuk akun Anda, navigasikan ke Pengaturan> Pengatelan>penyebaran Aplikasi OAuth, dan pilih Aplikasi OAuth Baru di bawah Aplikasi OAuth.

  3. Gunakan pengaturan berikut untuk Aplikasi OAuth baru, lalu pilih Daftarkan aplikasi:

    Nama Pengaturan Nilai yang Disarankan Deskripsi
    Nama aplikasi Azure SignalR Chat Pengguna GitHub harus dapat mengenali dan mempercayai aplikasi yang diautentikasi.
    URL Beranda https://localhost:5001
    Deskripsi aplikasi Sampel ruang obrolan menggunakan Azure SignalR Service dengan autentikasi GitHub Deskripsi aplikasi yang berguna yang membantu pengguna aplikasi Anda memahami konteks autentikasi yang digunakan.
    URL panggilan balik otorisasi https://localhost:5001/signin-github Pengaturan ini adalah pengaturan terpenting untuk aplikasi OAuth Anda. Ini adalah URL panggilan balik yang dikembalikan GitHub ke pengguna setelah autentikasi berhasil. Dalam tutorial ini, Anda harus menggunakan URL panggilan balik default untuk paket AspNet.Security.OAuth.GitHub, /signin-github.

  4. Setelah pendaftaran aplikasi OAuth baru selesai, tambahkan ID Klien dan Rahasia Klien ke Secret Manager menggunakan perintah berikut. Ganti Your_GitHub_Client_Id dan Your_GitHub_Client_Secret dengan nilai untuk aplikasi OAuth Anda.

    dotnet user-secrets set GitHubClientId Your_GitHub_Client_Id
dotnet user-secrets set GitHubClientSecret Your_GitHub_Client_Secret

Mengimplementasikan aliran OAuth

Mari kita gunakan kembali aplikasi obrolan yang dibuat dalam tutorial Membuat ruang obrolan dengan SignalR Service.

Pembaruan Program.cs untuk mendukung autentikasi GitHub

  1. Tambahkan referensi ke paket AspNet.Security.OAuth.GitHub terbaru dan pulihkan semua paket.

    dotnet add package AspNet.Security.OAuth.GitHub

  2. Buka Program.cs, dan perbarui kode ke cuplikan kode berikut:

    using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.OAuth;

using System.Net.Http.Headers;
using System.Security.Claims;

var builder = WebApplication.CreateBuilder(args);

builder.Services
    .AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie()
    .AddGitHub(options =>
    {
        options.ClientId = builder.Configuration["GitHubClientId"] ?? "";
        options.ClientSecret = builder.Configuration["GitHubClientSecret"] ?? "";
        options.Scope.Add("user:email");
        options.Events = new OAuthEvents
        {
            OnCreatingTicket = GetUserCompanyInfoAsync
        };
    });

builder.Services.AddControllers();
builder.Services.AddSignalR().AddAzureSignalR();

var app = builder.Build();

app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllers();
app.MapHub<ChatSampleHub>("/chat");

app.Run();

static async Task GetUserCompanyInfoAsync(OAuthCreatingTicketContext context)
{
    var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);
    request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
    request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", context.AccessToken);

    var response = await context.Backchannel.SendAsync(request,
        HttpCompletionOption.ResponseHeadersRead, context.HttpContext.RequestAborted);
    var user = await response.Content.ReadFromJsonAsync<GitHubUser>();
    if (user?.company != null)
    {
        context.Principal?.AddIdentity(new ClaimsIdentity(new[]
        {
            new Claim("Company", user.company)
        }));
    }
}

class GitHubUser
{
    public string? company { get; set; }
}

    Di dalam kode, AddAuthentication dan UseAuthentication digunakan untuk menambahkan dukungan autentikasi dengan aplikasi GitHub OAuth, dan GetUserCompanyInfoAsync metode pembantu adalah kode sampel yang menunjukkan cara memuat info perusahaan dari GitHub OAuth dan menyimpan ke identitas pengguna. Anda mungkin juga melihat bahwa UseHttpsRedirection() digunakan karena GitHub OAuth mengatur secure cookie yang hanya melewati ke skema aman https . Juga jangan lupa untuk memperbarui lokal Properties/lauchSettings.json untuk menambahkan titik akhir https:

    {
  "profiles": {
    "GitHubChat" : {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://0.0.0.0:5000/;https://0.0.0.0:5001/;"
    }
  }
}

Menambahkan Pengontrol autentikasi

Di bagian ini, Anda menerapkan Login API yang mengautentikasi klien menggunakan aplikasi GitHub OAuth. Setelah diautentikasi, API menambahkan cookie ke respons klien web sebelum mengalihkan klien kembali ke aplikasi obrolan. Cookie tersebut kemudian digunakan untuk mengidentifikasi klien.

  1. Tambahkan file kode pengontrol baru ke direktori GitHubChat\Controllers . Namai file sebagai AuthController.cs.

  2. Tambahkan kode berikut untuk pengontrol autentikasi. Pastikan untuk memperbarui namespace layanan, jika direktori proyek Anda bukan GitHubChat:

    using AspNet.Security.OAuth.GitHub;

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Mvc;

namespace GitHubChat.Controllers
{
    [Route("/")]
    public class AuthController : Controller
    {
        [HttpGet("login")]
        public IActionResult Login()
        {
            if (User.Identity == null || !User.Identity.IsAuthenticated)
            {
                return Challenge(GitHubAuthenticationDefaults.AuthenticationScheme);
            }

            HttpContext.Response.Cookies.Append("githubchat_username", User.Identity.Name ?? "");
            HttpContext.SignInAsync(User);
            return Redirect("/");
        }
    }
}

  3. Simpan perubahan.

Memperbarui kelas Hub

Secara default, klien web terhubung ke SignalR Service menggunakan token akses yang dihasilkan oleh Azure SignalR SDK secara otomatis.

Di bagian ini, Anda mengintegrasikan alur kerja autentikasi nyata dengan menambahkan Authorize atribut ke kelas hub, dan memperbarui metode hub untuk membaca nama pengguna dari klaim pengguna yang diautentikasi.

  1. Buka Hub\ChatSampleHub.cs dan perbarui kode ke cuplikan kode di bawah ini. Kode menambahkan Authorize atribut ke ChatSampleHub kelas , dan menggunakan identitas terautentikasi pengguna dalam metode hub. Selain itu OnConnectedAsync , metode ditambahkan, yang mencatat pesan sistem ke ruang obrolan setiap kali klien baru terhubung.

    using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.SignalR;

[Authorize]
public class ChatSampleHub : Hub
{
    public override Task OnConnectedAsync()
    {
        return Clients.All.SendAsync("broadcastMessage", "_SYSTEM_", $"{Context.User?.Identity?.Name} JOINED");
    }

    // Uncomment this line to only allow user in Microsoft to send message
    //[Authorize(Policy = "Microsoft_Only")]
    public Task BroadcastMessage(string message)
    {
        return Clients.All.SendAsync("broadcastMessage", Context.User?.Identity?.Name, message);
    }

    public Task Echo(string message)
    {
        var echoMessage = $"{message} (echo from server)";
        return Clients.Client(Context.ConnectionId).SendAsync("echo", Context.User?.Identity?.Name, echoMessage);
    }
}

  2. Simpan perubahan.

Memperbarui kode klien web

  1. Buka wwwroot\index.html dan ganti kode yang meminta nama pengguna dengan kode untuk menggunakan cookie yang dikembalikan oleh pengontrol autentikasi.

    Perbarui kode di dalam fungsi getUserName di index.html ke yang berikut untuk menggunakan cookie:

    function getUserName() {
  // Get the user name cookie.
  function getCookie(key) {
    var cookies = document.cookie.split(";").map((c) => c.trim());
    for (var i = 0; i < cookies.length; i++) {
      if (cookies[i].startsWith(key + "="))
        return unescape(cookies[i].slice(key.length + 1));
    }
    return "";
  }
  return getCookie("githubchat_username");
}

  2. Perbarui onConnected fungsi untuk menghapus username parameter saat memanggil metode broadcastMessage hub dan echo:

    function onConnected(connection) {
  console.log("connection started");
  connection.send("broadcastMessage", "_SYSTEM_", username + " JOINED");
  document.getElementById("sendmessage").addEventListener("click", function (event) {
    // Call the broadcastMessage method on the hub.
    if (messageInput.value) {
      connection.invoke("broadcastMessage", messageInput.value)
        .catch((e) => appendMessage("_BROADCAST_", e.message));
    }

    // Clear text box and reset focus for next comment.
    messageInput.value = "";
    messageInput.focus();
    event.preventDefault();
  });
  document.getElementById("message").addEventListener("keypress", function (event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById("sendmessage").click();
      return false;
    }
  });
  document.getElementById("echo").addEventListener("click", function (event) {
    // Call the echo method on the hub.
    connection.send("echo", messageInput.value);

    // Clear text box and reset focus for next comment.
    messageInput.value = "";
    messageInput.focus();
    event.preventDefault();
  });
}

  3. Di bagian bawah index.html, perbarui handler kesalahan untuk connection.start() seperti yang ditunjukkan di bawah ini untuk meminta pengguna untuk masuk.

    connection.start()
  .then(function () {
    onConnected(connection);
  })
  .catch(function (error) {
    console.error(error.message);
    if (error.statusCode && error.statusCode === 401) {
      appendMessage(
        "_BROADCAST_",
        "You\"re not logged in. Click <a href="/login">here</a> to login with GitHub."
      );
    }
  });

  4. Simpan perubahan.

Membangun dan menjalankan aplikasi secara lokal

  1. Simpan perubahan ke semua file.

  2. Jalankan perintah berikut untuk menjalankan aplikasi web secara lokal:

    dotnet run

    Aplikasi ini dihosting secara lokal pada port 5000 secara default:

    info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://0.0.0.0:5000
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://0.0.0.0:5001
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: Development

  3. Luncurkan jendela browser dan buka https://localhost:5001. Pilih tautan di sini di bagian atas untuk masuk dengan GitHub.

    OAuth Complete hosted in Azure

    Anda diminta untuk mengotorisasi akses aplikasi obrolan ke akun GitHub Anda. Pilih tombol Otorisasi.

    Authorize OAuth App

    Anda dialihkan kembali ke aplikasi obrolan dan masuk dengan nama akun GitHub Anda. Aplikasi web menentukan nama akun Anda dengan mengautentikasi Anda menggunakan autentikasi baru yang Anda tambahkan.

    Account identified

    Dengan aplikasi obrolan sekarang melakukan autentikasi dengan GitHub dan menyimpan informasi autentikasi sebagai cookie, langkah berikutnya melibatkan penyebarannya ke Azure. Pendekatan ini memungkinkan pengguna lain untuk mengautentikasi menggunakan akun masing-masing dan berkomunikasi dari berbagai stasiun kerja.

Menyebarkan aplikasi ke Azure

Persiapkan lingkungan Anda untuk Azure CLI:

Di bagian ini, Anda menggunakan Azure CLI untuk membuat aplikasi web baru di Azure App Service untuk menghosting aplikasi ASP.NET Anda di Azure. Aplikasi web dikonfigurasi untuk menggunakan penyebaran Git lokal. Aplikasi web juga dikonfigurasi dengan string koneksi SignalR, rahasia aplikasi GitHub OAuth, dan pengguna penyebaran Anda.

Saat membuat sumber daya berikut, pastikan untuk menggunakan grup sumber daya yang sama dengan sumber daya SignalR Service Anda. Pendekatan ini membuat pembersihan jauh lebih mudah nanti ketika Anda ingin menghapus semua sumber daya. Contoh yang diberikan mengasumsikan Anda menggunakan nama grup yang direkomendasikan dalam tutorial sebelumnya, SignalRTestResources.

Membuat aplikasi dan paket web

Salin teks untuk perintah di bawah ini dan perbarui parameter. Tempel skrip yang diperbarui ke Azure Cloud Shell, dan tekan Enter untuk membuat paket App Service dan aplikasi web baru.

#========================================================================
#=== Update these variable for your resource group name.              ===
#========================================================================
ResourceGroupName=SignalRTestResources

#========================================================================
#=== Update these variable for your web app.                          ===
#========================================================================
WebAppName=myWebAppName
WebAppPlan=myAppServicePlanName

# Create an App Service plan.
az appservice plan create --name $WebAppPlan --resource-group $ResourceGroupName \
    --sku FREE

# Create the new Web App
az webapp create --name $WebAppName --resource-group $ResourceGroupName \
    --plan $WebAppPlan
Parameter Deskripsi
ResourceGroupName Nama grup sumber daya ini disarankan dalam tutorial sebelumnya. Ada baiknya untuk menjaga semua sumber daya tutorial dikelompokkan bersama-sama. Gunakan grup sumber daya yang sama dengan yang Anda gunakan di tutorial sebelumnya.
WebAppPlan Masukkan nama Paket App Service yang baru dan unik.
WebAppName Parameter ini adalah nama aplikasi web baru dan bagian dari URL. Buatlah unik. Misalnya, signalrtestwebapp22665120.

Menambahkan pengaturan aplikasi ke aplikasi web

Di bagian ini, Anda menambahkan pengaturan aplikasi untuk komponen berikut:

  • String koneksi sumber daya SignalR Service
  • ID klien aplikasi GitHub OAuth
  • Rahasia klien aplikasi GitHub OAuth

Salin teks untuk perintah di bawah ini dan perbarui parameter. Tempel skrip yang diperbarui ke Azure Cloud Shell, dan tekan Enter untuk menambahkan pengaturan aplikasi:

#========================================================================
#=== Update these variables for your GitHub OAuth App.                ===
#========================================================================
GitHubClientId=1234567890
GitHubClientSecret=1234567890

#========================================================================
#=== Update these variables for your resources.                       ===
#========================================================================
ResourceGroupName=SignalRTestResources
SignalRServiceResource=mySignalRresourcename
WebAppName=myWebAppName

# Get the SignalR primary connection string
primaryConnectionString=$(az signalr key list --name $SignalRServiceResource \
  --resource-group $ResourceGroupName --query primaryConnectionString -o tsv)

#Add an app setting to the web app for the SignalR connection
az webapp config appsettings set --name $WebAppName \
    --resource-group $ResourceGroupName \
    --settings "Azure__SignalR__ConnectionString=$primaryConnectionString"

#Add the app settings to use with GitHub authentication
az webapp config appsettings set --name $WebAppName \
    --resource-group $ResourceGroupName \
    --settings "GitHubClientId=$GitHubClientId"
az webapp config appsettings set --name $WebAppName \
    --resource-group $ResourceGroupName \
    --settings "GitHubClientSecret=$GitHubClientSecret"
Parameter Deskripsi
GitHubClientId Tetapkan variabel ini ID Klien rahasia untuk Aplikasi OAuth GitHub Anda.
GitHubClientSecret Pada variabel ini, tetapkan kata sandi rahasia untuk Aplikasi GitHub OAuth Anda.
ResourceGroupName Perbarui variabel ini menjadi nama grup sumber daya yang sama dengan yang Anda gunakan di bagian sebelumnya.
SignalRServiceResource Perbarui variabel ini dengan nama sumber daya SignalR Service yang Anda buat di mulai cepat. Misalnya, signalrtestsvc48778624.
WebAppName Perbarui variabel ini dengan nama aplikasi web baru yang Anda buat di bagian sebelumnya.

Mengonfigurasi aplikasi web untuk penyebaran Git lokal

Di Azure Cloud Shell, tempel skrip berikut ini. Skrip ini membuat nama pengguna dan kata sandi penyebaran baru yang Anda gunakan saat menyebarkan kode Anda ke aplikasi web dengan Git. Skrip ini juga mengonfigurasi aplikasi web untuk penyebaran dengan repositori Git lokal dan menampilkan URL penyebaran Git.

#========================================================================
#=== Update these variables for your resources.                       ===
#========================================================================
ResourceGroupName=SignalRTestResources
WebAppName=myWebAppName

#========================================================================
#=== Update these variables for your deployment user.                 ===
#========================================================================
DeploymentUserName=myUserName
DeploymentUserPassword=myPassword

# Add the desired deployment user name and password
az webapp deployment user set --user-name $DeploymentUserName \
    --password $DeploymentUserPassword

# Configure Git deployment and note the deployment URL in the output
az webapp deployment source config-local-git --name $WebAppName \
    --resource-group $ResourceGroupName \
    --query [url] -o tsv
Parameter Deskripsi
DeploymentUserName Pilih nama pengguna penyebaran baru.
DeploymentUserPassword Pilih kata sandi untuk pengguna penyebaran baru.
ResourceGroupName Gunakan nama grup sumber daya yang sama dengan yang Anda gunakan di bagian sebelumnya.
WebAppName Parameter ini adalah nama aplikasi web baru yang Anda buat sebelumnya.

Catat URL penyebaran Git yang ditampilkan dari perintah ini. Anda menggunakan URL ini nanti.

Menyebarkan kode Anda ke aplikasi web Azure

Untuk menyebarkan kode Anda, jalankan perintah berikut dalam shell Git.

  1. Buka akar direktori proyek Anda. Jika Anda tidak memiliki proyek yang diinisialisasi dengan repositori Git, jalankan perintah berikut:

    git init

  2. Tambahkan remote untuk URL penyebaran Git yang Anda catat sebelumnya:

    git remote add Azure <your git deployment url>

  3. Siapkan semua file dalam repositori yang diinisialisasi dan tambahkan penerapan.

    git add -A
git commit -m "init commit"

  4. Sebarkan kode Anda ke aplikasi web Azure.

    git push Azure main

    Anda diminta untuk mengautentikasi untuk menyebarkan kode ke Azure. Masukkan nama pengguna dan kata sandi pengguna penyebaran yang Anda buat di atas.

Memperbarui aplikasi GitHub OAuth

Hal terakhir yang perlu Anda lakukan adalah memperbarui URL Beranda dan URL panggilan balik otorisasi aplikasi GitHub OAuth untuk mengarahkan ke aplikasi baru yang dihosting.

  1. Buka https://github.com di browser dan masuk ke akun Anda dan buka Pengaturan>Pengaturan pengembang>Aplikasi Oauth.

  2. Pilih pada aplikasi autentikasi Anda dan perbarui URL Beranda dan URL panggilan balik Otorisasi seperti yang ditunjukkan di bawah ini:

    Pengaturan Contoh
    URL Beranda https://signalrtestwebapp22665120.azurewebsites.net
    URL panggilan balik otorisasi https://signalrtestwebapp22665120.azurewebsites.net/signin-github

  3. Buka URL aplikasi web Anda dan uji aplikasi.

    OAuth Complete hosted in Azure

Membersihkan sumber daya

Jika Anda akan melanjutkan ke tutorial berikutnya, Anda dapat menyimpan sumber daya yang dibuat dalam mulai cepat ini dan menggunakannya kembali dengan tutorial berikutnya.

Jika tidak, jika Anda selesai dengan aplikasi sampel mulai cepat, Anda dapat menghapus sumber daya Azure yang dibuat dalam mulai cepat ini untuk menghindari biaya.

Penting

Menghapus grup sumber daya tidak bisa dibatalkan dan grup sumber daya serta semua sumber daya di dalamnya akan dihapus secara permanen. Pastikan Anda tidak salah menghapus grup sumber daya atau sumber daya secara tidak sengaja. Jika Anda membuat sumber daya untuk meng-host sampel ini di dalam grup sumber daya yang ada yang berisi sumber daya yang ingin disimpan, Anda dapat menghapus setiap sumber daya satu per satu dari bilahnya dan bukan menghapus grup sumber daya.

Masuk ke portal Microsoft Azure, lalu pilih Grup sumber daya.

Di kotak teks Filter menurut nama..., ketik nama grup sumber daya Anda. Petunjuk untuk artikel ini menggunakan grup sumber daya bernama SignalRTestResources. Pada grup sumber daya Anda di daftar hasil, klik ... lalu Hapus grup sumber daya.

Delete

Anda akan diminta untuk mengonfirmasi penghapusan grup sumber daya. Ketik nama grup sumber daya Anda untuk mengonfirmasi, dan pilih Hapus.

Setelah beberapa saat, grup sumber daya dan semua sumber daya di dalamnya akan dihapus.

Langkah berikutnya

Dalam tutorial ini, Anda menambahkan autentikasi dengan OAuth untuk memberikan pendekatan yang lebih baik untuk otentikasi dengan Azure SignalR Service. Untuk mempelajari lebih lanjut cara menggunakan Azure SignalR Server, lanjutkan ke sampel Azure CLI untuk SignalR Service.

Sampel CLI SignalR Service