Membuat aplikasi web menggunakan SignalR Service dan autentikasi GitHub

Skrip sampel ini membuat sumber daya Azure SignalR Service baru, yang digunakan untuk mendorong pembaruan konten real time kepada klien. Skrip ini juga menambahkan paket Aplikasi Web dan Azure App Service baru untuk menghosting Aplikasi Web Inti ASP.NET Anda yang menggunakan SignalR Service. Aplikasi web dikonfigurasi dengan pengaturan aplikasi agar tersambung ke sumber daya layanan SignalR baru, dan diautentikasi dengan Autentikasi GitHub. Aplikasi web juga dikonfigurasi untuk menggunakan sumber penyebaran repositori git lokal.

Penting

String koneksi mentah ditampilkan dalam artikel ini hanya untuk tujuan demonstrasi.

string koneksi menyertakan informasi otorisasi yang diperlukan aplikasi Anda untuk mengakses Azure SignalR Service. Kunci akses di dalam string koneksi mirip dengan kata sandi root untuk layanan Anda. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan string koneksi Anda menggunakan ID Microsoft Entra dan mengotorisasi akses dengan ID Microsoft Entra.

Hindari mendistribusikan kunci akses ke pengguna lain, melakukan hard-coding, atau menyimpannya di mana saja dalam teks biasa yang dapat diakses orang lain. Putar kunci Anda jika Anda yakin bahwa kunci tersebut mungkin telah disusupi.

Jika Anda tidak memiliki akun Azure, buat akun gratis sebelum memulai.

Azure Cloud Shell

Azure meng-hosting Azure Cloud Shell, lingkungan shell interaktif yang dapat Anda gunakan melalui browser. Anda dapat menggunakan Bash atau PowerShell dengan Cloud Shell untuk bekerja dengan layanan Azure. Anda dapat menggunakan perintah Cloud Shell yang telah diinstal sebelumnya untuk menjalankan kode dalam artikel ini tanpa harus menginstal apa-apa di lingkungan lokal Anda.

Untuk memulai Azure Cloud Shell:

Opsi	Contoh/Tautan
Pilih Coba di pojok kanan atas blok kode atau perintah. Memilih Coba tidak otomatis menyalin kode atau perintah ke Cloud Shell.
Buka https://shell.azure.com, atau pilih tombol Luncurkan Cloud Shell untuk membuka Cloud Shell di browser Anda.
Pilih tombol Cloud Shell pada bilah menu di kanan atas di portal Microsoft Azure.

Untuk menggunakan Azure Cloud Shell:

1. Mulai Cloud Shell.

2. Pilih tombol Salin pada blok kode (atau blok perintah) untuk menyalin kode atau perintah.

3. Tempel kode atau perintah ke dalam sesi Cloud Shell dengan memilih Ctrl+Shift+V di Windows dan Linux, atau dengan memilih Cmd+Shift+V di macOS.

4. Pilih Masukkan untuk menjalankan kode atau perintah.

Skrip sampel

String koneksi mentah ditampilkan dalam artikel ini hanya untuk tujuan demonstrasi. Di lingkungan produksi, selalu lindungi kunci akses Anda. Gunakan Azure Key Vault untuk mengelola dan memutar kunci Anda dengan aman dan mengamankan string koneksi Anda menggunakan ID Microsoft Entra dan mengotorisasi akses dengan ID Microsoft Entra.

Meluncurkan Azure Cloud Shell

Azure Cloud Shell adalah shell interaktif gratis yang dapat Anda gunakan untuk menjalankan langkah-langkah dalam artikel ini. Shell ini memiliki alat Azure umum yang telah dipasang sebelumnya dan dikonfigurasi untuk digunakan dengan akun Anda.

Untuk membuka Cloud Shell, cukup pilih Cobalah dari sudut kanan atas blok kode. Anda juga dapat meluncurkan Cloud Shell di tab browser terpisah dengan membuka https://shell.azure.com.

Saat Cloud Shell terbuka, verifikasi bahwa Bash dipilih untuk lingkungan Anda. Sesi berikutnya akan menggunakan Azure CLI dalam lingkungan Bash, Pilih Salin untuk menyalin blok kode, tempelkan ke Cloud Shell, lalu tekan Enter untuk menjalankannya.

Masuk ke Azure

Cloud Shell diautentikasi secara otomatis dengan akun awal yang digunakan untuk masuk. Gunakan skrip berikut untuk masuk menggunakan langganan lain, mengganti subscriptionId dengan ID langganan Azure Anda.

Jika Anda tidak memiliki akun Azure, buat akun gratis sebelum memulai.

subscription="subscriptionId" # Set Azure subscription ID here

az account set -s $subscription # ...or use 'az login'

Untuk informasi selengkapnya, lihat mengatur langganan aktif atau masuk secara interaktif.

Membuat layanan SignalR dengan layanan Aplikasi

# Create a SignalR Service with an App Service

# Variable block
let "randomIdentifier=$RANDOM*$RANDOM"
location="East US"
resourceGroup="msdocs-azure-signalr-rg-$randomIdentifier"
tag="create-signal-service-with-app-service"
signalRSvc="msdocs-signalr-svc-$randomIdentifier"
webApp="msdocs-web-app-signalr-$randomIdentifier"
appSvcPlan="msdocs-app-svc-plan-$randomIdentifier"
signalRSku="Standard_S1"
unitCount="1"
serviceMode="Default"
planSku="Free"

# Create a resource group
echo "Creating $resourceGroup in "$location"..."
az group create --name $resourceGroup --location "$location" --tag $tag

# Create the Azure SignalR Service resource
echo "Creating $signalRSvc"
az signalr create \
  --name $signalRSvc \
  --resource-group $resourceGroup \
  --sku $signalRSku \
  --unit-count $unitCount \
  --service-mode $serviceMode

# Create an App Service plan.
echo "Creating $appSvcPlan"
az appservice plan create --name $appSvcPlan --resource-group $resourceGroup --sku $planSku

# Create the Web App
echo "Creating $webApp"
az webapp create --name $webApp --resource-group $resourceGroup --plan $appSvcPlan

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

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

Mengaktifkan autentikasi GitHub dan penyebaran Git untuk aplikasi web

1. Perbarui nilai dalam skrip berikut berdasarkan pendaftaran Aplikasi OAuth GitHub Anda.

   GitHubClientId=<Replace with your GitHub OAuth app Client ID>
   GitHubClientSecret=<Replace with your GitHub OAuth app Client Secret>
   

2. Menambahkan pengaturan aplikasi untuk digunakan dengan autentikasi GitHub

   az webapp config appsettings set --name $webApp --resource-group $resourceGroup --settings "GitHubClientSecret=$GitHubClientSecret" 
   

3. Konfigurasikan penyebaran Git dan kembalikan URL penyebaran.

   az webapp deployment source config-local-git --name $webAppName --resource-group $resourceGroupName --query [url] -o tsv
   

Membersihkan sumber daya

Gunakan perintah berikut untuk menghapus grup sumber daya dan semua sumber daya yang terkait dengannya menggunakan perintah az group delete - kecuali Anda masih memiliki kebutuhan untuk sumber daya ini. Beberapa sumber daya ini mungkin membutuhkan beberapa waktu untuk dibuat dan dihapus.

az group delete --name $resourceGroup

Referensi sampel

Setiap perintah dalam tabel ditautkan ke dokumentasi spesifik perintah. Skrip ini menggunakan perintah berikut:

Perintah	Catatan
Perintah az group create digunakan untuk membuat grup baru.	Membuat grup sumber daya tempat semua sumber daya disimpan.
az signalr buat	Membuat sumber daya Azure SignalR Service.
az signalr kunci daftar	Buat daftar kunci, yang akan digunakan oleh aplikasi Anda saat mendorong pembaruan konten real time dengan SignalR Service.
Perintah az appservice plan create untuk membuat rencana layanan aplikasi	Membuat Paket Azure App Service untuk menghosting aplikasi web.
membuat webapp az	Membuat Aplikasi web Azure menggunakan paket hosting Azure App Service.
set appsettings konfigurasi webapp az	Menambahkan pengaturan aplikasi baru untuk aplikasi web. Pengaturan aplikasi ini digunakan untuk menyimpan string koneksi SignalR Service dan rahasia aplikasi OAuth GitHub.
set pengguna penyebaran webapp az	Memperbarui penyebaran info masuk.
config-local-git sumber penyebaran webapp az	Mendapatkan URL untuk titik akhir repositori git guna mengkloning dan mendorong untuk penyebaran aplikasi web.

Langkah berikutnya

Untuk informasi selengkapnya tentang antarmuka tingkat panggilan Azure, lihat Dokumentasi antarmuka tingkat panggilan Azure.

Sampel skrip CLI Azure SignalR Service tambahan dapat ditemukan dalam Dokumentasi Azure SignalR Service.