วิธีสร้างการลงชื่อเข้าใช้ด้วย GitHub (GitHub App) ด้วย .NET Core (Blazor WebAssembly)

สำหรับเพื่อนใหม่ของเรา:

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

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

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

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

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

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

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

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

เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน"
ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "แอปหน้าเดียว" หรือกรองเฟรมเวิร์ก "แอปหน้าเดียว" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก ".NET Core (Blazor WebAssembly)" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ
กรอกชื่อแอปพลิเคชัน เช่น "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

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

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

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

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

บันทึก:

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

กำหนดค่า Redirect URI

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

เช่นเดียวกับการลงชื่อเข้าใช้ ผู้ใช้ควรถูกเปลี่ยนเส้นทางไปที่ 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 จะถูกเติมข้อมูลผู้ใช้โดยอัตโนมัติ

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

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

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

เพิ่มตัวเชื่อมต่อ GitHub (GitHub App)

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

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

ไปที่ Console > Connectors > Social Connectors
คลิก "Add social connector" และเลือก "GitHub (GitHub App)"
ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า

บันทึก:

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

ตั้งค่า GitHub (GitHub App)

ขั้นตอนที่ 1: สร้าง GitHub App

ก่อนที่คุณจะใช้ GitHub เป็นผู้ให้บริการการยืนยันตัวตน คุณต้องสร้าง GitHub App บน GitHub เพื่อรับข้อมูลประจำตัว OAuth 2.0

ไปที่ GitHub และลงชื่อเข้าใช้ด้วยบัญชีของคุณ หรือสร้างบัญชีใหม่หากจำเป็น
ไปที่ Settings > Developer settings > GitHub Apps
คลิก New GitHub App เพื่อจดทะเบียนแอปใหม่:
- GitHub App name: กรอกชื่อแอปของคุณที่ไม่ซ้ำกัน ชื่อไม่เกิน 34 ตัวอักษรและต้องไม่ซ้ำกับแอปอื่นใน GitHub
- Homepage URL: กรอก URL หน้าแรกของแอปพลิเคชันของคุณ
- Callback URL: คัดลอก Callback URI จากตัวเชื่อมต่อ GitHub ของคุณใน Logto แล้ววางที่นี่ คุณสามารถเพิ่ม Callback URL ได้หลายรายการหากต้องการ หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย GitHub แล้ว จะถูกเปลี่ยนเส้นทางมาที่นี่พร้อมรหัสการอนุญาตที่ Logto ใช้เพื่อดำเนินการยืนยันตัวตนให้เสร็จสมบูรณ์
- Expire user authorization tokens: ให้ติ๊ก ถูก (แนะนำ) เพื่อเปิดใช้งานการหมดอายุของโทเค็นและโทเค็นรีเฟรชเพื่อความปลอดภัยที่มากขึ้น
- Request user authorization (OAuth) during installation: เลือกตัวเลือกนี้หากต้องการให้ผู้ใช้อนุญาตแอประหว่างการติดตั้ง
- Webhook: ยกเลิกการเลือก Active หากคุณไม่ต้องการรับเหตุการณ์ webhook สำหรับกรณีใช้งานเฉพาะการยืนยันตัวตน มักไม่จำเป็นต้องใช้ webhook
ในส่วน Permissions กำหนดสิทธิ์ที่แอปของคุณต้องการ (ดูรายละเอียดในขั้นตอนที่ 2 ด้านล่าง)
ในส่วน Where can this GitHub App be installed? เลือก Any account หากคุณต้องการให้ผู้ใช้จากบัญชี GitHub ใดก็ได้ใช้แอปของคุณเพื่อการยืนยันตัวตน
คลิก Create GitHub App เพื่อสร้าง GitHub App

บันทึก:

แตกต่างจาก OAuth Apps, GitHub Apps ใช้สิทธิ์แบบละเอียด (fine-grained permissions) แทนขอบเขต (scopes) แบบกว้าง คุณกำหนดสิทธิ์ในแดชบอร์ด GitHub ระหว่างการสร้างแอป และผู้ใช้จะอนุญาตการเข้าถึง repository เฉพาะระหว่างการอนุญาต

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่า GitHub Apps ได้ที่ Registering a GitHub App

ขั้นตอนที่ 2: กำหนดสิทธิ์ใน GitHub

GitHub Apps ใช้สิทธิ์แบบละเอียด (fine-grained permissions) แทน OAuth scopes คุณต้องกำหนดสิทธิ์ ในแดชบอร์ด GitHub ขณะสร้างหรือแก้ไข GitHub App ของคุณ สิทธิ์เหล่านี้จะกำหนดว่าแอปของคุณสามารถเข้าถึงข้อมูลใดได้บ้าง

ทำความเข้าใจสิทธิ์ของ GitHub App

สิทธิ์แบ่งออกเป็น 3 ประเภท:

Repository permissions: เข้าถึงทรัพยากรระดับ repository (โค้ด, issues, pull requests ฯลฯ)
Organization permissions: เข้าถึงทรัพยากรระดับองค์กร (สมาชิก, ทีม, โปรเจกต์ ฯลฯ)
Account permissions: เข้าถึงข้อมูลบัญชีผู้ใช้ (อีเมล, โปรไฟล์, ผู้ติดตาม ฯลฯ)

สำหรับแต่ละสิทธิ์ คุณสามารถเลือกได้ว่า:

No access: แอปไม่สามารถเข้าถึงทรัพยากรนี้
Read-only: แอปอ่านได้แต่ไม่สามารถแก้ไขทรัพยากรนี้
Read & write: แอปอ่านและแก้ไขทรัพยากรนี้ได้

สิทธิ์ที่แนะนำสำหรับการยืนยันตัวตน

สำหรับฟังก์ชัน "Sign in with GitHub" พื้นฐาน ให้กำหนด Account permissions ขั้นต่ำดังนี้:

Permission	Access level	Purpose
Email addresses	Read-only	รับอีเมลของผู้ใช้เพื่อสร้างบัญชีผู้ใช้

เคล็ดลับ:

GitHub Apps สามารถอ่านข้อมูลโปรไฟล์สาธารณะของผู้ใช้ได้โดยอัตโนมัติเมื่อดำเนินการในนามของผู้ใช้ คุณไม่จำเป็นต้องขอสิทธิ์สำหรับข้อมูลโปรไฟล์พื้นฐาน เช่น ชื่อผู้ใช้, รูปโปรไฟล์, และ URL โปรไฟล์สาธารณะ

สิทธิ์เพิ่มเติมสำหรับการเข้าถึง API

หากแอปของคุณต้องการเข้าถึง GitHub API มากกว่าการยืนยันตัวตน ให้เพิ่มสิทธิ์ที่เกี่ยวข้องในแดชบอร์ด GitHub ตัวอย่างที่พบบ่อย:

Permission type	Permission	Access level	Use case
Repository	Contents	Read-only / Read & write	เข้าถึงไฟล์และโค้ดใน repository
Repository	Issues	Read & write	สร้างและจัดการ issues
Repository	Pull requests	Read & write	สร้างและจัดการ pull requests
Repository	Metadata	Read-only	เข้าถึง metadata ของ repository (จำเป็นสำหรับหลายกรณี)
Organization	Members	Read-only	แสดงรายชื่อสมาชิกองค์กร
Account	Followers	Read-only	เข้าถึงผู้ติดตามและการติดตามของผู้ใช้

นี่ไม่ใช่รายการทั้งหมด — GitHub Apps รองรับสิทธิ์แบบละเอียดอีกมากมาย ดู Permissions required for GitHub Apps สำหรับรายการทั้งหมด

ความแตกต่างสำคัญจาก OAuth Apps:

แตกต่างจาก OAuth Apps ที่คุณกำหนด scopes ในตัวเชื่อมต่อ Logto, สิทธิ์ของ GitHub App จะถูกจัดการทั้งหมดในแดชบอร์ด GitHub คุณสามารถเว้นว่างช่อง Scope ในตัวเชื่อมต่อ GitHub ของ Logto ได้เลย — ไม่จำเป็นต้องใช้ เพราะ GitHub Apps ไม่ใช้ OAuth scopes แบบเดิม

เพียงกำหนดสิทธิ์ที่คุณต้องการใน GitHub และผู้ใช้จะได้รับแจ้งให้อนุญาตระหว่างการอนุญาต

ขั้นตอนที่ 3: กำหนดค่าตัวเชื่อมต่อ Logto ของคุณ

หลังจากสร้าง GitHub App แล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าตั้งค่าซึ่งคุณสามารถรับข้อมูลประจำตัวได้

ในหน้าตั้งค่าของ GitHub App ของคุณ คัดลอก Client ID แล้ววางลงในช่อง clientId ใน Logto
ในส่วน Client secrets คลิก Generate a new client secret คัดลอกรหัสลับที่สร้างขึ้นแล้ววางลงในช่อง clientSecret ใน Logto
คลิก Save and Done ใน Logto เพื่อเชื่อมต่อระบบข้อมูลระบุตัวตนของคุณกับ GitHub

คำเตือน:

เก็บรักษา Client secret ของคุณให้ปลอดภัยและอย่าเปิดเผยในโค้ดฝั่งไคลเอนต์ หากคุณทำ Client secret หายจะไม่สามารถกู้คืนได้ — คุณต้องสร้างใหม่เท่านั้น

บันทึก:

Client ID สำหรับ GitHub App แตกต่างจาก App ID โปรดใช้ Client ID (แสดงเป็น "Client ID" ในหน้าตั้งค่า) ไม่ใช่ App ID

ขั้นตอนที่ 4: การตั้งค่าทั่วไป

นี่คือการตั้งค่าทั่วไปบางอย่างที่แม้จะไม่ขัดขวางการเชื่อมต่อกับ GitHub แต่ก็อาจมีผลต่อประสบการณ์การยืนยันตัวตนของผู้ใช้ปลายทาง

ซิงค์ข้อมูลโปรไฟล์

ในตัวเชื่อมต่อ GitHub คุณสามารถกำหนดวิธีซิงค์ข้อมูลโปรไฟล์จากข้อมูลผู้ใช้ GitHub ไปยังโปรไฟล์ผู้ใช้ใน Logto เช่น name, avatar, และ email โดยเลือกได้ดังนี้:

ซิงค์เฉพาะตอนสมัครสมาชิก: ดึงข้อมูลโปรไฟล์ครั้งเดียวเมื่อผู้ใช้ลงชื่อเข้าใช้ครั้งแรก
ซิงค์ทุกครั้งที่ลงชื่อเข้าใช้: อัปเดตข้อมูลโปรไฟล์ทุกครั้งที่ผู้ใช้ลงชื่อเข้าใช้

เก็บโทเค็นเพื่อเข้าถึง GitHub APIs (ไม่บังคับ)

หากคุณต้องการเข้าถึง GitHub APIs และดำเนินการต่าง ๆ ด้วยการอนุญาตของผู้ใช้ (ไม่ว่าจะผ่าน social sign-in หรือ account linking) ให้เปิดใช้งานการเก็บโทเค็นใน Logto:

กำหนดสิทธิ์ที่ต้องการในหน้าตั้งค่า GitHub App ของคุณ (ขั้นตอนที่ 2)
เปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto Logto จะเก็บทั้งโทเค็นการเข้าถึง (access token) และโทเค็นรีเฟรช (refresh token) ไว้อย่างปลอดภัยใน Secret Vault

บันทึก:

เนื่องจาก GitHub Apps ออกโทเค็นรีเฟรชเสมอ Logto จะเก็บทั้งสองโทเค็นโดยอัตโนมัติ โทเค็นการเข้าถึงจะหมดอายุหลัง 8 ชั่วโมง แต่ Logto สามารถใช้โทเค็นรีเฟรชเพื่อขอโทเค็นใหม่ได้ ทำให้เข้าถึง API ได้ต่อเนื่องสูงสุด 6 เดือน

ขั้นตอนที่ 5: ทดสอบการเชื่อมต่อของคุณ (ไม่บังคับ)

ก่อนเปิดใช้งานจริง ให้ทดสอบการเชื่อมต่อ GitHub App ของคุณ:

ใช้ตัวเชื่อมต่อใน Logto tenant สำหรับการพัฒนา
ตรวจสอบว่าผู้ใช้สามารถลงชื่อเข้าใช้ด้วย GitHub ได้
ตรวจสอบว่าผู้ใช้ได้รับแจ้งขอสิทธิ์ที่ถูกต้องระหว่างการอนุญาต
หากคุณเปิดใช้งานการเก็บโทเค็น ให้ตรวจสอบว่า access token (และ refresh token) ถูกเก็บไว้อย่างถูกต้อง
ทดสอบเรียก API โดยใช้โทเค็นที่เก็บไว้เพื่อให้แน่ใจว่าสิทธิ์ทำงานถูกต้อง

GitHub Apps สามารถใช้งานได้กับบัญชีผู้ใช้ GitHub ใด ๆ ทันที — ไม่จำเป็นต้องมีผู้ใช้ทดสอบหรือขออนุมัติแอปเหมือนบางแพลตฟอร์ม อย่างไรก็ตาม หากแอปของคุณถูกติดตั้งในองค์กร เจ้าขององค์กรอาจต้องอนุมัติการติดตั้ง

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

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

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

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

แท็บประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience tab)

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

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

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

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

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

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

การติดตั้ง​

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

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

กำหนดค่า redirect URI​

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

กำหนดค่า Redirect URI​

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

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

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

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

เพิ่มตัวเชื่อมต่อ GitHub (GitHub App)​

ตั้งค่า GitHub (GitHub App)​

ขั้นตอนที่ 1: สร้าง GitHub App​

ขั้นตอนที่ 2: กำหนดสิทธิ์ใน GitHub​

ทำความเข้าใจสิทธิ์ของ GitHub App​

สิทธิ์ที่แนะนำสำหรับการยืนยันตัวตน​

สิทธิ์เพิ่มเติมสำหรับการเข้าถึง API​

ขั้นตอนที่ 3: กำหนดค่าตัวเชื่อมต่อ Logto ของคุณ​

ขั้นตอนที่ 4: การตั้งค่าทั่วไป​

ซิงค์ข้อมูลโปรไฟล์​

เก็บโทเค็นเพื่อเข้าถึง GitHub APIs (ไม่บังคับ)​

ขั้นตอนที่ 5: ทดสอบการเชื่อมต่อของคุณ (ไม่บังคับ)​

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

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

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

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

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

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

การติดตั้ง

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

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

กำหนดค่า redirect URI

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

กำหนดค่า Redirect URI

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

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

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

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

เพิ่มตัวเชื่อมต่อ GitHub (GitHub App)

ตั้งค่า GitHub (GitHub App)

ขั้นตอนที่ 1: สร้าง GitHub App

ขั้นตอนที่ 2: กำหนดสิทธิ์ใน GitHub

ทำความเข้าใจสิทธิ์ของ GitHub App

สิทธิ์ที่แนะนำสำหรับการยืนยันตัวตน

สิทธิ์เพิ่มเติมสำหรับการเข้าถึง API

ขั้นตอนที่ 3: กำหนดค่าตัวเชื่อมต่อ Logto ของคุณ

ขั้นตอนที่ 4: การตั้งค่าทั่วไป

ซิงค์ข้อมูลโปรไฟล์

เก็บโทเค็นเพื่อเข้าถึง GitHub APIs (ไม่บังคับ)

ขั้นตอนที่ 5: ทดสอบการเชื่อมต่อของคุณ (ไม่บังคับ)

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

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

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

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