ข้ามไปยังเนื้อหาหลัก
สำหรับเพื่อนใหม่ของเรา:

Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว

เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย

ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ Slack (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย .NET Core (Blazor WebAssembly) และ Logto

ข้อกำหนดเบื้องต้น

  • มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
  • มีความรู้พื้นฐานเกี่ยวกับ .NET Core (Blazor WebAssembly)
  • มีบัญชี Slack ที่ใช้งานได้

สร้างแอปพลิเคชันใน Logto

Logto สร้างขึ้นบนพื้นฐานของการยืนยันตัวตน OpenID Connect (OIDC) และการอนุญาต OAuth 2.0 โดยรองรับการจัดการข้อมูลระบุตัวตนแบบรวมศูนย์ข้ามหลายแอปพลิเคชัน ซึ่งมักเรียกว่า การลงชื่อเข้าใช้ครั้งเดียว (Single Sign-On; SSO)

ในการสร้างแอปพลิเคชัน แอปหน้าเดียว ของคุณ เพียงทำตามขั้นตอนเหล่านี้:

  1. เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน" Get started
  2. ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "แอปหน้าเดียว" หรือกรองเฟรมเวิร์ก "แอปหน้าเดียว" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก ".NET Core (Blazor WebAssembly)" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ Frameworks
  3. กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"

🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ

ผสานรวม .NET Core (Blazor WebAssembly) กับ Logto

เคล็ดลับ:
  • ตัวอย่างสาธิตต่อไปนี้สร้างขึ้นบน .NET Core 8.0 และ Blorc.OpenIdConnect
  • โปรเจกต์ตัวอย่าง .NET Core มีให้ใน GitHub repository

การติดตั้ง

เพิ่มแพ็กเกจ NuGet ลงในโปรเจกต์ของคุณ:

dotnet add package Blorc.OpenIdConnect

เพิ่มการอ้างอิงสคริปต์

เพิ่ม Blorc.Core/injector.js ลงในไฟล์ index.html:

index.html
<head>
<!-- ... -->
<script src="_content/Blorc.Core/injector.js"></script>
<!-- ... -->
</head>

ลงทะเบียนบริการ

เพิ่มโค้ดต่อไปนี้ในไฟล์ Program.cs:

Program.cs
using Blorc.OpenIdConnect;
using Blorc.Services;

builder.Services.AddBlorcCore();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlorcOpenIdConnect(
options =>
{
builder.Configuration.Bind("IdentityServer", options);
});

var webAssemblyHost = builder.Build();

await webAssemblyHost
.ConfigureDocumentAsync(async documentService =>
{
await documentService.InjectBlorcCoreJsAsync();
await documentService.InjectOpenIdConnectAsync();
});

await webAssemblyHost.RunAsync();
ข้อมูล:

ไม่จำเป็นต้องใช้แพ็กเกจ Microsoft.AspNetCore.Components.WebAssembly.Authentication แพ็กเกจ Blorc.OpenIdConnect จะดูแลกระบวนการยืนยันตัวตนให้เอง

กำหนดค่า redirect URI

ก่อนที่เราจะลงลึกในรายละเอียด นี่คือภาพรวมประสบการณ์ของผู้ใช้ปลายทาง กระบวนการลงชื่อเข้าใช้สามารถสรุปได้ดังนี้:

  1. แอปของคุณเรียกใช้งานเมธอดลงชื่อเข้าใช้
  2. ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto สำหรับแอปเนทีฟ ระบบจะเปิดเบราว์เซอร์ของระบบ
  3. ผู้ใช้ลงชื่อเข้าใช้และถูกเปลี่ยนเส้นทางกลับไปยังแอปของคุณ (ตามที่กำหนดไว้ใน redirect URI)

เกี่ยวกับการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง (redirect-based sign-in)

  1. กระบวนการยืนยันตัวตนนี้เป็นไปตามโปรโตคอล OpenID Connect (OIDC) และ Logto บังคับใช้มาตรการรักษาความปลอดภัยอย่างเข้มงวดเพื่อปกป้องการลงชื่อเข้าใช้ของผู้ใช้
  2. หากคุณมีหลายแอป คุณสามารถใช้ผู้ให้บริการข้อมูลระบุตัวตน (Logto) เดียวกันได้ เมื่อผู้ใช้ลงชื่อเข้าใช้แอปหนึ่งแล้ว Logto จะดำเนินการลงชื่อเข้าใช้โดยอัตโนมัติเมื่อผู้ใช้เข้าถึงแอปอื่น

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเหตุผลและประโยชน์ของการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง โปรดดูที่ อธิบายประสบการณ์การลงชื่อเข้าใช้ของ Logto


บันทึก:

ในตัวอย่างโค้ดต่อไปนี้ เราถือว่าแอปของคุณกำลังทำงานอยู่ที่ http://localhost:3000/

กำหนดค่า Redirect URI

ไปที่หน้ารายละเอียดแอปพลิเคชันใน Logto Console เพิ่ม redirect URI http://localhost:3000/callback

Redirect URI in Logto Console

เช่นเดียวกับการลงชื่อเข้าใช้ ผู้ใช้ควรถูกเปลี่ยนเส้นทางไปที่ Logto เพื่อออกจากเซสชันที่ใช้ร่วมกัน เมื่อเสร็จสิ้นแล้ว ควรเปลี่ยนเส้นทางผู้ใช้กลับไปยังเว็บไซต์ของคุณ ตัวอย่างเช่น เพิ่ม http://localhost:3000/ ในส่วน post sign-out redirect URI

จากนั้นคลิก "Save" เพื่อบันทึกการเปลี่ยนแปลง

กำหนดค่าแอปพลิเคชัน

เพิ่มโค้ดต่อไปนี้ในไฟล์ appsettings.json:

appsettings.json
{
// ...
IdentityServer: {
Authority: 'https://<your-logto-endpoint>/oidc',
ClientId: '<your-logto-app-id>',
PostLogoutRedirectUri: 'http://localhost:3000/',
RedirectUri: 'http://localhost:3000/callback',
ResponseType: 'code',
Scope: 'openid profile', // เพิ่มขอบเขต (scopes) เพิ่มเติมหากต้องการ
},
}

อย่าลืมเพิ่ม RedirectUri และ PostLogoutRedirectUri ลงในรายการ redirect URI ที่อนุญาตในหน้าตั้งค่าแอป Logto ทั้งสองคือ URL ของแอป WASM ของคุณ

เพิ่มคอมโพเนนต์ AuthorizeView

ในหน้า Razor ที่ต้องการการยืนยันตัวตน ให้เพิ่มคอมโพเนนต์ AuthorizeView สมมติว่าเป็นหน้า Home.razor:

Pages/Home.razor
@using Microsoft.AspNetCore.Components.Authorization
@page "/"

<AuthorizeView>
<Authorized>
@* มุมมองเมื่อเข้าสู่ระบบแล้ว *@
<button @onclick="OnLogoutButtonClickAsync">
Sign out
</button>
</Authorized>
<NotAuthorized>
@* มุมมองเมื่อยังไม่ได้เข้าสู่ระบบ *@
<button @onclick="OnLoginButtonClickAsync">
Sign in
</button>
</NotAuthorized>
</AuthorizeView>

ตั้งค่าการยืนยันตัวตน

ในไฟล์ Home.razor.cs (สร้างไฟล์นี้หากยังไม่มี) เพิ่มโค้ดต่อไปนี้:

Pages/Home.razor.cs
// using ต่าง ๆ เหมือนเดิม

[Authorize]
public partial class Home : ComponentBase
{
[Inject]
public required IUserManager UserManager { get; set; }

public User<Profile>? User { get; set; }

[CascadingParameter]
protected Task<AuthenticationState>? AuthenticationStateTask { get; set; }

protected override async Task OnInitializedAsync()
{
User = await UserManager.GetUserAsync<User<Profile>>(AuthenticationStateTask!);
}

private async Task OnLoginButtonClickAsync(MouseEventArgs obj)
{
await UserManager.SignInRedirectAsync();
}

private async Task OnLogoutButtonClickAsync(MouseEventArgs obj)
{
await UserManager.SignOutRedirectAsync();
}
}

เมื่อผู้ใช้ได้รับการยืนยันตัวตนแล้ว property User จะถูกเติมข้อมูลผู้ใช้โดยอัตโนมัติ

จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ

ตอนนี้คุณสามารถทดสอบแอปพลิเคชันของคุณได้แล้ว:

  1. รันแอปพลิเคชันของคุณ คุณจะเห็นปุ่มลงชื่อเข้าใช้
  2. คลิกปุ่มลงชื่อเข้าใช้ SDK จะเริ่มกระบวนการลงชื่อเข้าใช้และเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ของ Logto
  3. หลังจากที่คุณลงชื่อเข้าใช้แล้ว คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณและเห็นปุ่มลงชื่อออก
  4. คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ

เพิ่มตัวเชื่อมต่อ Slack

เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ .NET Core (Blazor WebAssembly) ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า

ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:

  1. ไปที่ Console > Connectors > Social Connectors
  2. คลิก "Add social connector" และเลือก "Slack"
  3. ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า
Connector tab
บันทึก:

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้

ตั้งค่า Slack OAuth app

ตั้งค่า Slack App

ไปที่ Slack API: Applications และลงชื่อเข้าใช้ด้วยบัญชี Slack ของคุณ หากคุณยังไม่มีบัญชี สามารถลงทะเบียนได้

จากนั้น สร้างแอป

ขั้นตอนที่ 1: ค้นหา Client ID และ Client Secret

คุณสามารถค้นหา Client ID และ Client Secret ได้ในส่วน "Basic Information"

ขั้นตอนที่ 2: ตั้งค่า redirect URLs

ไปที่ส่วน "OAuth & Permissions" คุณจะพบฟอร์ม "Redirect URLs"

ในกรณีของเรา จะเป็น ${your_logto_endpoint}/callback/${connector_id} เช่น https://foo.logto.app/callback/${connector_id} โดย connector_id สามารถดูได้ที่แถบด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Admin Console

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่ เอกสาร Slack API

กำหนดค่าตัวเชื่อมต่อของคุณ

ในหน้ากำหนดค่าตัวเชื่อมต่อ Logto ของคุณ ให้กรอกข้อมูลในช่องต่อไปนี้ด้วยค่าที่ได้จากหน้า "Keys and tokens" ส่วน "OAuth 2.0 Client ID and Client Secret" ของแอปคุณ:

  • clientId: Client ID ของแอปคุณ
  • clientSecret: Client Secret ของแอปคุณ

scope คือรายการ OpenID scopes ที่คั่นด้วยช่องว่าง หากไม่ระบุ จะใช้ scope เริ่มต้นคือ openid profile

ประเภทของ config

NameType
clientIdstring
clientSecretstring
scopestring

บันทึกการตั้งค่าของคุณ

โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ Slack ควรพร้อมใช้งานแล้ว

เปิดใช้งานตัวเชื่อมต่อ Slack ในประสบการณ์การลงชื่อเข้าใช้

เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย Slack" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้

  1. ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
  2. (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
  3. เพิ่มตัวเชื่อมต่อ Slack ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)
แท็บประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience tab)

การทดสอบและการตรวจสอบความถูกต้อง

กลับไปที่แอป .NET Core (Blazor WebAssembly) ของคุณ ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้ด้วย Slack ได้แล้ว ขอให้สนุก!

อ่านเพิ่มเติม

กระบวนการสำหรับผู้ใช้ปลายทาง: Logto มีโฟลว์การยืนยันตัวตนสำเร็จรูปพร้อมใช้งาน รวมถึง MFA และ Enterprise SSO พร้อม API อันทรงพลังสำหรับการปรับแต่งการตั้งค่าบัญชี การตรวจสอบความปลอดภัย และประสบการณ์แบบหลายผู้เช่า (multi-tenant) ได้อย่างยืดหยุ่น

การอนุญาต (Authorization): การอนุญาต (Authorization) กำหนดว่าผู้ใช้สามารถทำอะไรหรือเข้าถึงทรัพยากรใดได้บ้างหลังจากได้รับการยืนยันตัวตนแล้ว สำรวจวิธีปกป้อง API ของคุณสำหรับแอปเนทีฟและแอปหน้าเดียว (SPA) และการใช้งานการควบคุมการเข้าถึงตามบทบาท (RBAC)

องค์กร (Organizations): ฟีเจอร์องค์กรมีประสิทธิภาพอย่างยิ่งใน SaaS แบบหลายผู้เช่าและแอป B2B โดยช่วยให้สร้างผู้เช่า จัดการสมาชิก RBAC ระดับองค์กร และ Just-in-Time Provisioning ได้

ชุดบทความ Customer IAM: บทความต่อเนื่องเกี่ยวกับการจัดการข้อมูลระบุตัวตนและการเข้าถึงของลูกค้า (Customer IAM) ตั้งแต่ระดับพื้นฐาน 101 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ