วิธีสร้างการลงชื่อเข้าใช้ด้วย OAuth2 ด้วย iOS (Swift)

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

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

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

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

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

มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
มีความรู้พื้นฐานเกี่ยวกับ iOS (Swift)
มีบัญชี OAuth2 ที่ใช้งานได้

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

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

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

เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน"
ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "Native app" หรือกรองเฟรมเวิร์ก "Native app" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "iOS (Swift)" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ
กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"

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

ผสานรวม iOS (Swift) กับ Logto

เพิ่ม Logto SDK เป็น dependency

บันทึก:

เวอร์ชัน iOS ขั้นต่ำที่รองรับของ Logto Swift SDK คือ iOS 13

Logto Swift SDK มีสองเวอร์ชันหลัก:

v2: เปิดประสบการณ์การลงชื่อเข้าใช้ใน ASWebAuthenticationSession (เบราว์เซอร์ของระบบ) ซึ่งรองรับการลงชื่อเข้าใช้ด้วย passkey และแชร์เซสชันเบราว์เซอร์ โปรดทราบว่า v2 ได้ลบ native social plugin targets ออกแล้ว; ตัวเชื่อมต่อโซเชียล (social connectors) ยังคงทำงานผ่านเบราว์เซอร์ หากคุณต้องพึ่ง native WeChat หรือ Alipay SDK handoff ให้ใช้ v1 ต่อไป
v1: เปิดประสบการณ์การลงชื่อเข้าใช้ใน WebView ที่ฝังอยู่ ซึ่งจำเป็นสำหรับ native social plugin targets แต่ไม่รองรับ การลงชื่อเข้าใช้ด้วย passkey (WebView ไม่รองรับ WebAuthn ซึ่งเป็นมาตรฐานพื้นฐานของ passkey)

คู่มือนี้ครอบคลุมทั้งสองเวอร์ชัน เลือกเวอร์ชันของคุณในแท็บด้านล่าง และตัวเลือกจะถูกซิงค์ตลอดทั้งคู่มือนี้

ใช้ URL ต่อไปนี้เพื่อเพิ่ม Logto SDK เป็น dependency ใน Swift Package Manager

https://github.com/logto-io/swift.git

ตั้งแต่ Xcode 11 เป็นต้นมา คุณสามารถ นำเข้า Swift package ได้โดยตรง โดยไม่ต้องใช้เครื่องมือเพิ่มเติม

เมื่อ Xcode ถามหาเวอร์ชันของแพ็กเกจ ให้เลือกเวอร์ชันที่คุณต้องการใช้งาน:

ใช้เวอร์ชัน v2 ล่าสุดเป็นเวอร์ชันอ้างอิง เวอร์ชัน v2 ล่าสุดคือ 2.0.0

หากคุณใช้ Package.swift โดยตรง:

Package.swift
// เพิ่ม Logto SDK ด้วยเวอร์ชัน 2.0.0
.package(url: "https://github.com/logto-io/swift.git", from: "2.0.0")

ใช้เวอร์ชัน v1 ล่าสุดหากคุณต้องการ native social plugin targets เวอร์ชัน v1 ล่าสุดคือ 1.2.0

หากคุณใช้ Package.swift โดยตรง:

Package.swift
// เพิ่ม Logto SDK ด้วยเวอร์ชัน 1.2.0
.package(url: "https://github.com/logto-io/swift.git", from: "1.2.0")

ขณะนี้เรายังไม่รองรับ Carthage และ CocoaPods เนื่องจากปัญหาทางเทคนิคบางประการ

Carthage

Carthage ต้องการไฟล์ xcodeproj เพื่อ build เราจะพยายามหาวิธีแก้ไขในภายหลัง

CocoaPods

CocoaPods ไม่รองรับ local dependency และ monorepo ดังนั้นจึงยากที่จะสร้าง .podspec สำหรับ repo นี้

เริ่มต้น LogtoClient

เริ่มต้นไคลเอนต์โดยการสร้างอินสแตนซ์ LogtoClient ด้วยอ็อบเจกต์ LogtoConfig

ContentView.swift
import Logto
import LogtoClient

let config = try? LogtoConfig(
  endpoint: "<your-logto-endpoint>", // เช่น http://localhost:3001
  appId: "<your-app-id>"
)
let client = LogtoClient(useConfig: config)

ข้อมูล:

โดยปกติ เราจะจัดเก็บข้อมูลรับรอง เช่น โทเค็น ID (ID Token) และ โทเค็นรีเฟรช (Refresh Token) ไว้ใน Keychain ดังนั้นผู้ใช้จึงไม่จำเป็นต้องลงชื่อเข้าใช้อีกเมื่อกลับมา

หากต้องการปิดการทำงานนี้ ให้ตั้งค่า usingPersistStorage เป็น false:

let config = try? LogtoConfig(
  // ...
  usingPersistStorage: false
)

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

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

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

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

กำหนดค่า redirect URI

ไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console เพิ่ม Redirect URI io.logto.app://callback แล้วคลิก "บันทึกการเปลี่ยนแปลง" (Save changes)

ใน v2 ประสบการณ์การลงชื่อเข้าใช้จะเปิดใน ASWebAuthenticationSession (เบราว์เซอร์ของระบบ) และการเปลี่ยนเส้นทาง (redirect) จะถูกส่งกลับไปยังแอปของคุณผ่านการจับคู่ callback ในระดับ OS สำหรับ redirect URI แบบ custom scheme เช่น io.logto.app://callback ให้ลงทะเบียนเฉพาะส่วน scheme (io.logto.app) ใน Info.plist ของแอปคุณ จากนั้นเพิ่ม redirect URI แบบเต็มใน Redirect URIs ของแอป Logto ของคุณ

ใน Xcode ให้เปิด target ของแอปคุณ เลือก Info ขยาย URL Types และเพิ่มรายการใหม่โดยใส่ io.logto.app ใน URL Schemes หากคุณแก้ไข Info.plist โดยตรง ให้เพิ่ม:

Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>io.logto.app</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>io.logto.app</string>
    </array>
  </dict>
</array>

สำหรับ browser flow ใน v2 คุณไม่จำเป็นต้องเรียก LogtoClient.handle(url:) อีกต่อไป; API สำหรับ handoff plugin นั้นถูกถอดออกไปพร้อมกับ flow แบบ embedded WebView

ใช้ Universal Links แทน custom scheme ได้ไหม?

คุณสามารถใช้ redirect URI แบบ HTTPS เช่น https://example.com/callback ได้เช่นกัน:

เพิ่มความสามารถ Associated Domains ให้กับแอปของคุณ
กำหนดค่า webcredentials:example.com เพื่อให้ ASWebAuthenticationSession สามารถจับคู่ callback แบบ HTTPS บน iOS 17.4 ขึ้นไป
หากต้องการให้ URL เดียวกันเปิดแอปของคุณเป็น Universal Link นอก session การยืนยันตัวตน ให้กำหนดค่า applinks:example.com และโฮสต์ไฟล์ apple-app-site-association ที่ถูกต้องสำหรับโดเมนและ path นั้น
เพิ่ม HTTPS URI นี้ใน Redirect URIs ของแอป Logto ของคุณ
ส่งค่า URI เดียวกันนี้ไปที่ signInWithBrowser

บน iOS 17.4 ขึ้นไป SDK จะใช้ API การจับคู่ callback แบบ HTTPS ของ ASWebAuthenticationSession ดังนั้น redirect แบบ HTTPS จะเสร็จสมบูรณ์และปิด session ให้อัตโนมัติ สำหรับ iOS เวอร์ชันเก่า คำขอการอนุญาตยังคงใช้ HTTPS redirect URI ได้ แต่ session อาจไม่ปิดเอง เว้นแต่แอปของคุณจะจัดการ callback ของ Universal Link เอง ควรเก็บ redirect แบบ custom scheme ไว้เป็นตัวเลือกเพื่อความเข้ากันได้ หากคุณต้องการให้ flow เสร็จสมบูรณ์อัตโนมัติบน iOS เวอร์ชันเก่า

ไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console เพิ่ม Redirect URI io.logto://callback แล้วคลิก "บันทึกการเปลี่ยนแปลง" (Save changes)

ข้อมูล:

Redirect URI ใน iOS SDK ใช้สำหรับการทำงานภายในเท่านั้น ไม่จำเป็นต้อง เพิ่ม Custom URL Scheme จนกว่าตัวเชื่อมต่อจะร้องขอ

บันทึก:

ก่อนเรียก .signInWithBrowser(redirectUri:) โปรดตรวจสอบให้แน่ใจว่าคุณได้กำหนดค่า Redirect URI ใน Admin Console อย่างถูกต้องแล้ว

ใน v2 client.signOut(postLogoutRedirectUri:) จะทำการออกจากระบบอย่างสมบูรณ์: ล้างข้อมูลรับรองในเครื่อง, เพิกถอนโทเค็นรีเฟรช (refresh token), และสิ้นสุด session ของ Logto โดยเปิด endpoint สำหรับจบ session ในเบราว์เซอร์ของระบบ จากนั้นเบราว์เซอร์จะนำทางกลับไปยังแอปของคุณผ่าน post sign-out redirect URI ก่อนใช้งาน ให้ไปที่หน้ารายละเอียดแอปใน Logto Console เพิ่ม post sign-out redirect URI io.logto.app://signed-out และคลิก "Save changes" โดย post sign-out redirect URI สามารถใช้ custom scheme เดียวกับที่คุณลงทะเบียนสำหรับการลงชื่อเข้าใช้

ตัวอย่างในแอป SwiftUI:

ContentView.swift
// โค้ดเหมือนเดิม ไม่ต้องแปล
struct ContentView: View {
  @State var isAuthenticated: Bool

  private let redirectUri = "io.logto.app://callback"
  private let postLogoutRedirectUri = "io.logto.app://signed-out"

  init() {
    isAuthenticated = client.isAuthenticated
  }

  var body: some View {
    VStack {
      if isAuthenticated {
        Button("Sign Out") {
          Task { [self] in
            let error = await client.signOut(postLogoutRedirectUri: postLogoutRedirectUri)
            if let error = error {
              print(error)
              return
            }
            isAuthenticated = false
          }
        }
      } else {
        Button("Sign In") {
          Task { [self] in
            do {
              try await client.signInWithBrowser(redirectUri: redirectUri)
              isAuthenticated = true
            } catch let error as LogtoClientErrors.SignIn {
              // error occurred during sign in
            } catch {
              // other errors
            }
          }
        }
      }
    }
  }
}

บันทึก:

คุณสามารถเรียก client.signOut() โดยไม่ต้องระบุ post sign-out redirect URI ก็ได้ กรณีนี้ไม่ต้องตั้งค่าใน Console: เบราว์เซอร์จะแสดงหน้าลงชื่อออกของ Logto และผู้ใช้จะกลับเข้าแอปโดยปิดเบราว์เซอร์เอง
หากไม่มี UI context ให้เรียก client.clearCredentials() เพื่อล้างข้อมูลรับรองในเครื่องและเพิกถอนโทเค็นรีเฟรช (refresh token) โปรดทราบว่าสิ่งนี้จะคง session ของ Logto ในเบราว์เซอร์ไว้ ดังนั้นการ signInWithBrowser ครั้งถัดไปอาจลงชื่อเข้าใช้ผู้ใช้อัตโนมัติผ่าน session เดิม

คุณสามารถใช้ client.signInWithBrowser(redirectUri:) เพื่อลงชื่อเข้าใช้ผู้ใช้ และ client.signOut() เพื่อออกจากระบบ

ตัวอย่างในแอป SwiftUI:

ContentView.swift
// โค้ดเหมือนเดิม ไม่ต้องแปล
struct ContentView: View {
  @State var isAuthenticated: Bool

  init() {
    isAuthenticated = client.isAuthenticated
  }

  var body: some View {
    VStack {
      if isAuthenticated {
        Button("Sign Out") {
          Task { [self] in
            await client.signOut()
            isAuthenticated = false
          }
        }
      } else {
        Button("Sign In") {
          Task { [self] in
            do {
              try await client.signInWithBrowser(redirectUri: "io.logto://callback")
              isAuthenticated = true
            } catch let error as LogtoClientErrors.SignIn {
              // error occurred during sign in
            } catch {
              // other errors
            }
          }
        }
      }
    }
  }
}

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

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

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

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

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

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

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

บันทึก:

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

ตั้งค่า Standard OAuth 2.0 app

สร้างแอป OAuth ของคุณ

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

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

เรารองรับเฉพาะประเภท grant แบบ "Authorization Code" เท่านั้นเพื่อเหตุผลด้านความปลอดภัย และเหมาะสมกับกรณีการใช้งานของ Logto อย่างสมบูรณ์

clientId และ clientSecret สามารถดูได้ที่หน้ารายละเอียดแอป OAuth ของคุณ

clientId: client ID คือรหัสระบุที่ไม่ซ้ำกันซึ่งใช้ระบุแอปพลิเคชันลูกค้าในระหว่างการลงทะเบียนกับเซิร์ฟเวอร์การอนุญาต รหัสนี้ใช้โดยเซิร์ฟเวอร์การอนุญาตเพื่อตรวจสอบตัวตนของแอปพลิเคชันลูกค้าและเชื่อมโยงโทเค็นการเข้าถึงที่ได้รับอนุญาตกับแอปพลิเคชันลูกค้านั้น

clientSecret: client secret คือคีย์ลับที่ออกให้กับแอปพลิเคชันลูกค้าโดยเซิร์ฟเวอร์การอนุญาตในระหว่างการลงทะเบียน แอปพลิเคชันลูกค้าจะใช้คีย์ลับนี้เพื่อยืนยันตัวตนกับเซิร์ฟเวอร์การอนุญาตเมื่อขอโทเค็นการเข้าถึง client secret ถือเป็นข้อมูลลับและควรเก็บไว้อย่างปลอดภัยตลอดเวลา

tokenEndpointAuthMethod: วิธีการยืนยันตัวตนที่ token endpoint ใช้โดยแอปพลิเคชันลูกค้าเพื่อยืนยันตัวตนกับเซิร์ฟเวอร์การอนุญาตเมื่อขอโทเค็นการเข้าถึง หากต้องการค้นหาวิธีที่รองรับ ให้ดูที่ฟิลด์ token_endpoint_auth_methods_supported ที่มีอยู่ใน discovery endpoint ของ OpenID Connect ของผู้ให้บริการ OAuth 2.0 หรือดูเอกสารที่เกี่ยวข้องของผู้ให้บริการ OAuth 2.0

clientSecretJwtSigningAlgorithm (ไม่บังคับ): ต้องระบุเฉพาะเมื่อ tokenEndpointAuthMethod เป็น client_secret_jwt อัลกอริทึมสำหรับลงนาม JWT ด้วย client secret ใช้โดยแอปพลิเคชันลูกค้าเพื่อลงนาม JWT ที่ส่งไปยังเซิร์ฟเวอร์การอนุญาตระหว่างการขอโทเค็น

scope: พารามิเตอร์ scope ใช้ระบุชุดทรัพยากรและสิทธิ์ที่แอปพลิเคชันลูกค้าต้องการเข้าถึง โดยปกติ scope จะถูกกำหนดเป็นรายการค่าที่คั่นด้วยช่องว่างซึ่งแสดงถึงสิทธิ์เฉพาะ ตัวอย่างเช่น ค่า scope เป็น "read write" อาจหมายถึงแอปพลิเคชันลูกค้าต้องการสิทธิ์อ่านและเขียนข้อมูลของผู้ใช้

คุณควรค้นหา authorizationEndpoint, tokenEndpoint และ userInfoEndpoint ได้จากเอกสารของผู้ให้บริการโซเชียล

authenticationEndpoint: endpoint นี้ใช้เริ่มต้นกระบวนการยืนยันตัวตน โดยปกติจะเกี่ยวข้องกับการที่ผู้ใช้เข้าสู่ระบบและให้สิทธิ์แก่แอปพลิเคชันลูกค้าในการเข้าถึงทรัพยากรของตน

tokenEndpoint: endpoint นี้ใช้โดยแอปพลิเคชันลูกค้าเพื่อขอโทเค็นการเข้าถึงที่สามารถใช้เข้าถึงทรัพยากรที่ร้องขอได้ โดยปกติแอปพลิเคชันลูกค้าจะส่งคำขอไปยัง token endpoint พร้อม grant type และ authorization code เพื่อรับ access token

userInfoEndpoint: endpoint นี้ใช้โดยแอปพลิเคชันลูกค้าเพื่อขอข้อมูลเพิ่มเติมเกี่ยวกับผู้ใช้ เช่น ชื่อเต็ม อีเมล หรือรูปโปรไฟล์ โดยปกติจะเข้าถึง user info endpoint หลังจากแอปพลิเคชันลูกค้าได้รับ access token จาก token endpoint แล้ว

Logto ยังมีฟิลด์ profileMap ให้ผู้ใช้ปรับแต่งการแมปข้อมูลจากโปรไฟล์ของผู้ให้บริการโซเชียลซึ่งมักจะไม่เป็นมาตรฐาน คีย์คือชื่อฟิลด์โปรไฟล์ผู้ใช้มาตรฐานของ Logto และค่าควรเป็นชื่อฟิลด์ของโปรไฟล์โซเชียล ในปัจจุบัน Logto สนใจเฉพาะ 'id', 'name', 'avatar', 'email' และ 'phone' จากโปรไฟล์โซเชียล โดย 'id' เป็นฟิลด์ที่จำเป็น ส่วนอื่นเป็นฟิลด์ไม่บังคับ

responseType และ grantType สามารถเป็นค่า FIXED ได้เฉพาะกับ authorization code grant type ดังนั้นเราจึงตั้งให้เป็นตัวเลือกและจะเติมค่าเริ่มต้นให้อัตโนมัติ

ตัวอย่างเช่น คุณสามารถดู Google user profile response และดังนั้น profileMap ควรเป็นแบบนี้:

{
  "id": "sub",
  "avatar": "picture"
}

บันทึก:

เรามีคีย์ customConfig (ไม่บังคับ) สำหรับใส่พารามิเตอร์ที่คุณปรับแต่งเอง ผู้ให้บริการข้อมูลระบุตัวตนโซเชียลแต่ละรายอาจมีความแตกต่างจากมาตรฐาน OAuth หากผู้ให้บริการของคุณยึดตามมาตรฐาน OAuth อย่างเคร่งครัด คุณไม่จำเป็นต้องสนใจ customConfig

ประเภทของการตั้งค่า

ชื่อ	ประเภท	จำเป็นต้องระบุ
authorizationEndpoint	string	true
userInfoEndpoint	string	true
clientId	string	true
clientSecret	string	true
tokenEndpointResponseType	enum	false
responseType	string	false
grantType	string	false
tokenEndpoint	string	false
scope	string	false
customConfig	Record<string, string>	false
profileMap	ProfileMap	false

ฟิลด์ ProfileMap	ประเภท	จำเป็นต้องระบุ	ค่าเริ่มต้น
id	string	false	id
name	string	false	name
avatar	string	false	avatar
email	string	false	email
phone	string	false	phone

การตั้งค่าทั่วไป

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

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

ชื่อผู้ให้บริการข้อมูลระบุตัวตน

ตัวเชื่อมต่อโซเชียลแต่ละตัวจะมีชื่อผู้ให้บริการข้อมูลระบุตัวตน (IdP) เฉพาะเพื่อแยกแยะตัวตนของผู้ใช้ ตัวเชื่อมต่อทั่วไปจะใช้ชื่อ IdP แบบคงที่ ส่วนตัวเชื่อมต่อแบบกำหนดเองต้องใช้ค่าที่ไม่ซ้ำกัน ดูข้อมูลเพิ่มเติมเกี่ยวกับ ชื่อ IdP

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

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

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

เก็บโทเค็นเพื่อเข้าถึง API ของบุคคลที่สาม (ไม่บังคับ)

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

เพิ่มขอบเขตที่ต้องการในฟิลด์ scope ตามคำแนะนำข้างต้น
เปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ OAuth ของ Logto Logto จะเก็บ access token ไว้อย่างปลอดภัยใน Secret Vault
สำหรับผู้ให้บริการข้อมูลระบุตัวตน OAuth/OIDC แบบ มาตรฐาน ต้องรวม scope offline_access เพื่อรับ refresh token ป้องกันการขอความยินยอมจากผู้ใช้ซ้ำ

คำเตือน:

เก็บ client secret ของคุณให้ปลอดภัยและอย่าเปิดเผยในโค้ดฝั่ง client หากถูกเปิดเผย ให้สร้างใหม่ทันทีในหน้าตั้งค่าแอปของผู้ให้บริการข้อมูลระบุตัวตนของคุณ

ใช้งานตัวเชื่อมต่อ OAuth

เมื่อคุณสร้างตัวเชื่อมต่อ OAuth และเชื่อมต่อกับผู้ให้บริการข้อมูลระบุตัวตนแล้ว คุณสามารถนำไปใช้ใน flow สำหรับผู้ใช้ปลายทางได้ เลือกตัวเลือกที่ตรงกับความต้องการของคุณ:

ใน Logto Console ไปที่ Sign-in & account > Sign-up and sign-in
เพิ่มตัวเชื่อมต่อ OAuth ในส่วน Social sign-in เพื่อให้ผู้ใช้ยืนยันตัวตนกับผู้ให้บริการข้อมูลระบุตัวตนของคุณ

ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประสบการณ์ social sign-in

ใช้ Account API เพื่อสร้าง Account Center แบบกำหนดเองในแอปของคุณ ให้ผู้ใช้ที่ลงชื่อเข้าใช้เชื่อมโยงหรือยกเลิกการเชื่อมโยงบัญชีโซเชียลของตน ดูตัวอย่างการใช้งาน Account API

เคล็ดลับ:

สามารถเปิดใช้งานตัวเชื่อมต่อ OAuth เฉพาะสำหรับการเชื่อมโยงบัญชีและเข้าถึง API ได้ โดยไม่ต้องเปิดใช้งานสำหรับ social sign-in ก็ได้

เข้าถึง API ของผู้ให้บริการข้อมูลระบุตัวตนและดำเนินการต่าง ๆ

แอปพลิเคชันของคุณสามารถดึง access token ที่เก็บไว้จาก Secret Vault เพื่อเรียก API ของผู้ให้บริการข้อมูลระบุตัวตนและทำงาน backend อัตโนมัติ ความสามารถเฉพาะขึ้นอยู่กับผู้ให้บริการข้อมูลระบุตัวตนและขอบเขตที่คุณร้องขอ ดูคู่มือการดึงโทเค็นที่เก็บไว้เพื่อเข้าถึง API

หลังจากผู้ใช้เชื่อมโยงบัญชีโซเชียลแล้ว ผู้ดูแลระบบสามารถจัดการการเชื่อมต่อนั้นใน Logto Console ได้ดังนี้:

ไปที่ Logto console > User management และเปิดโปรไฟล์ของผู้ใช้
ใต้ Social connections ค้นหารายการผู้ให้บริการข้อมูลระบุตัวตนแล้วคลิก Manage
ในหน้านี้ ผู้ดูแลระบบสามารถจัดการการเชื่อมต่อโซเชียลของผู้ใช้ ดูข้อมูลโปรไฟล์ทั้งหมดที่ได้รับและซิงค์จากบัญชีโซเชียล และตรวจสอบสถานะ access token

บันทึก:

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

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

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

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

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

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

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

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

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

กระบวนการสำหรับผู้ใช้ปลายทาง: 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​

ผสานรวม iOS (Swift) กับ Logto​

เพิ่ม Logto SDK เป็น dependency​

Carthage​

CocoaPods​

เริ่มต้น LogtoClient​

ลงชื่อเข้าใช้​

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

กำหนดค่า redirect URI​

ใช้ Universal Links แทน custom scheme ได้ไหม?​

การลงชื่อเข้าใช้และออกจากระบบ​

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

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

ตั้งค่า Standard OAuth 2.0 app​

สร้างแอป OAuth ของคุณ​

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

ประเภทของการตั้งค่า​

การตั้งค่าทั่วไป​

ชื่อและโลโก้ของปุ่มโซเชียล​

ชื่อผู้ให้บริการข้อมูลระบุตัวตน​

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

เก็บโทเค็นเพื่อเข้าถึง API ของบุคคลที่สาม (ไม่บังคับ)​

ใช้งานตัวเชื่อมต่อ OAuth​

เปิดใช้งานปุ่ม social sign-in​

เชื่อมโยงหรือยกเลิกการเชื่อมโยงบัญชีโซเชียล​

เข้าถึง API ของผู้ให้บริการข้อมูลระบุตัวตนและดำเนินการต่าง ๆ​

จัดการข้อมูลระบุตัวตนโซเชียลของผู้ใช้​

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

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

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

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

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

ผสานรวม iOS (Swift) กับ Logto

เพิ่ม Logto SDK เป็น dependency

Carthage

CocoaPods

เริ่มต้น LogtoClient

ลงชื่อเข้าใช้

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

กำหนดค่า redirect URI

ใช้ Universal Links แทน custom scheme ได้ไหม?

การลงชื่อเข้าใช้และออกจากระบบ

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

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

ตั้งค่า Standard OAuth 2.0 app

สร้างแอป OAuth ของคุณ

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

ประเภทของการตั้งค่า

การตั้งค่าทั่วไป

ชื่อและโลโก้ของปุ่มโซเชียล

ชื่อผู้ให้บริการข้อมูลระบุตัวตน

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

เก็บโทเค็นเพื่อเข้าถึง API ของบุคคลที่สาม (ไม่บังคับ)

ใช้งานตัวเชื่อมต่อ OAuth

เปิดใช้งานปุ่ม social sign-in

เชื่อมโยงหรือยกเลิกการเชื่อมโยงบัญชีโซเชียล

เข้าถึง API ของผู้ให้บริการข้อมูลระบุตัวตนและดำเนินการต่าง ๆ

จัดการข้อมูลระบุตัวตนโซเชียลของผู้ใช้

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

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

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

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