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

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

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

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

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

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

สร้างแอปพลิเคชันใน 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. คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ

เพิ่มตัวเชื่อมต่อ Amazon​

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

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

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

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

ตั้งค่า Amazon​

ตั้งค่าแอป Amazon​

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

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

ขั้นตอนที่ 1: ไปที่บล็อก "Login with Amazon" ในหน้าแรก

หรือคุณสามารถเยี่ยมชม หน้านี้

ทำตามคำแนะนำเพื่อสร้าง security profile ใหม่

หลังจากสร้าง security profile แล้ว คุณจะได้รับ Client ID และ Client Secret จากตาราง

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

คลิกปุ่ม "Manage" ทางด้านขวาของตาราง และไปที่แท็บ "Web Settings"

ในช่อง "Allowed redirect URLs" ให้เพิ่ม URL ต่อไปนี้:

  • ${your_logto_origin}/callback/${connector_id}

connector_id สามารถดูได้ที่แถบด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Admin Console

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

ในการกำหนดค่าตัวเชื่อมต่อ Logto ของคุณ ให้กรอกข้อมูลในช่องต่อไปนี้ด้วยค่าที่ได้รับจากขั้นตอนก่อนหน้า:

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

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

ประเภทของ config​

NameType
clientIdstring
clientSecretstring
scopestring

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

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

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

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

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

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

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

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

กระบวนการสำหรับผู้ใช้ปลายทาง: 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 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ