ข้ามไปยังเนื้อหาหลัก

ตั้งค่าการเข้าสู่ระบบโซเชียลด้วย WeChat (Native) (Set up social login with WeChat (Native))

ตัวเชื่อมต่อ (Connector) อย่างเป็นทางการของ Logto สำหรับการเข้าสู่ระบบโซเชียล WeChat ในแอปเนทีฟ (iOS และ Android)

เคล็ดลับ:

คู่มือนี้สมมติว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับ ตัวเชื่อมต่อ (Connectors) ของ Logto หากคุณยังไม่คุ้นเคย โปรดดูคู่มือ ตัวเชื่อมต่อ (Connectors) เพื่อเริ่มต้น

เริ่มต้นใช้งาน​

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

ในแอปเนทีฟ คุณไม่สามารถใช้เว็บเป็นวิธีการลงชื่อเข้าใช้ของ WeChat ได้: ต้องนำทางไปยังแอป WeChat และยังต้องใช้ SDK ของพวกเขาด้วย

เราเข้าใจว่ามันอาจดูน่ากลัว แต่ไม่ต้องกังวล เราจะจัดการได้อย่างง่ายดายในคู่มือนี้

สร้างแอปมือถือใน WeChat Open Platform​

เคล็ดลับ:

คุณสามารถข้ามบางส่วนได้หากทำเสร็จแล้ว

สร้างบัญชี​

เปิด https://open.weixin.qq.com/ คลิกปุ่ม "Sign Up" ที่มุมขวาบน แล้วดำเนินการสมัครให้เสร็จสิ้น

สร้างแอปมือถือ​

ลงชื่อเข้าใช้ด้วยบัญชีที่คุณเพิ่งสร้าง ในแท็บ "Mobile Application" (移动应用) คลิกปุ่มสีเขียวขนาดใหญ่ "Create a mobile app" (创建移动应用)

App tabs

กรอกข้อมูลที่จำเป็นในแบบฟอร์มแอปพลิเคชัน

Create mobile app

ข้อมูลพื้นฐาน​

ส่วนใหญ่ค่อนข้างตรงไปตรงมา และเรามีเคล็ดลับดังนี้:

  • หากคุณต้องการทดสอบการเข้าสู่ระบบ WeChat และแอปยังไม่ได้อยู่ใน App Store ในส่วน "App is available" ให้เลือก "No" เพื่อข้าม "App download link"
  • "App operation flow chart" ดูเหมือนจะยุ่งยาก จากประสบการณ์ของเรา คุณควรเตรียมไดอะแกรมโฟลว์ง่าย ๆ และภาพหน้าจอแอปหลายภาพเพื่อเพิ่มโอกาสผ่านการตรวจสอบ

คลิก "Next step" เพื่อดำเนินการต่อ

ข้อมูลแพลตฟอร์ม​

คุณสามารถกำหนดค่า iOS และ / หรือ Android เพื่อผสาน Logto กับการเข้าสู่ระบบ WeChat แบบเนทีฟ

แอป iOS

เลือก "iOS app" (iOS 应用) แล้วเลือกประเภทอุปกรณ์เป้าหมายของแอปคุณให้ถูกต้อง

App platform

หากคุณเลือก "No" สำหรับ App Store availability คุณสามารถข้ามการกรอก "AppStore download address" ได้

กรอก Bundle ID, Test version Bundle ID และ Universal Links (จริง ๆ แล้วต้องการแค่ลิงก์เดียว 😂)

บันทึก:

Bundle ID และ Test version Bundle ID สามารถใช้ค่าเดียวกันได้

เคล็ดลับ:

WeChat ต้องการ universal link สำหรับการเข้าสู่ระบบแบบเนทีฟ หากคุณยังไม่ได้ตั้งค่าหรือไม่รู้จัก universal link โปรดดู เอกสารทางการของ Apple

แอป Android

เลือก "Android app" (Android 应用)

Android app platform

กรอก Application Signing Signature (应用签名) และ Application Package Name (应用包名)

บันทึก:

คุณต้องเซ็นแอปของคุณเพื่อให้ได้ signature ดูข้อมูลเพิ่มเติมได้ที่ Sign your app

หลังจากเซ็นแอปเสร็จแล้ว คุณสามารถรันคำสั่ง signingReport เพื่อรับ signing signature

./gradlew your-android-project:signingReport

ค่า MD5 ของ build variant ที่เกี่ยวข้องจะเป็น Application Signing Signature (应用签名) แต่ต้องลบเครื่องหมายจุลภาคออกทั้งหมดและเปลี่ยนเป็นตัวพิมพ์เล็ก

เช่น 1A:2B:3C:4D -> 1a2b3c4d

รอผลการตรวจสอบ​

หลังจากกรอกข้อมูลแพลตฟอร์มเสร็จแล้ว คลิก "Submit Review" เพื่อดำเนินการต่อ โดยปกติการตรวจสอบจะรวดเร็ว มักเสร็จภายใน 1-2 วัน

เราสงสัยว่าผู้ตรวจสอบถูกสุ่มในแต่ละครั้งเพราะมาตรฐานไม่คงที่ คุณอาจถูกปฏิเสธครั้งแรก แต่ขอให้สู้ต่อ! แจ้งสถานะของคุณและสอบถามผู้ตรวจสอบว่าควรแก้ไขอย่างไร

เปิดใช้งานการเข้าสู่ระบบ WeChat แบบเนทีฟในแอปของคุณ​

iOS​

เราสมมติว่าคุณได้ผสาน Logto iOS SDK ในแอปของคุณแล้ว ในกรณีนี้ ทุกอย่างค่อนข้างง่าย และคุณไม่จำเป็นต้องอ่านเอกสาร WeChat SDK ด้วยซ้ำ:

1. กำหนดค่า universal link และ URL scheme ในโปรเจกต์ Xcode ของคุณ

ในโปรเจกต์ Xcode -> แท็บ Signing & Capabilities ให้เพิ่มความสามารถ "Associated Domains" และ universal link ที่คุณตั้งค่าไว้ก่อนหน้านี้

Universal link

จากนั้นไปที่แท็บ "Info" เพิ่ม custom URL scheme ด้วย WeChat App ID

Custom URL scheme

สุดท้ายเปิด Info.plist ของคุณ เพิ่ม weixinULAPI และ weixin ใน LSApplicationQueriesSchemes

Plist
บันทึก:

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

2. เพิ่ม LogtoSocialPluginWechat ในโปรเจกต์ Xcode ของคุณ

เพิ่ม framework:

Add framework

และเพิ่ม -ObjC ใน Build Settings > Linking > Other Linker Flags:

Linker flags
บันทึก:

ปลั๊กอินนี้รวม WeChat Open SDK 1.9.2 คุณสามารถใช้ import WechatOpenSDK ได้ทันทีหลังจากนำเข้า

3. เพิ่มปลั๊กอินในตัวเลือก init ของ LogtoClient ของคุณ

let logtoClient = LogtoClient(
  useConfig: config,
  socialPlugins: [LogtoSocialPluginWechat()]
)

4. จัดการ onOpenURL ให้ถูกต้อง

บันทึก:

ฟังก์ชัน LogtoClient.handle(url:) จะจัดการตัวเชื่อมต่อเนทีฟทั้งหมดที่คุณเปิดใช้งาน คุณเพียงแค่เรียกใช้ครั้งเดียว

// SwiftUI
YourRootView()
  .onOpenURL { url in
      LogtoClient.handle(url: url)
  }

// หรือ AppDelegate
func application(_ app: UIApplication, open url: URL, options: /*...*/) -> Bool {
  LogtoClient.handle(url: url)
}

Android​

เราสมมติว่าคุณได้ผสาน Logto Android SDK ในแอปของคุณแล้ว ในกรณีนี้ ทุกอย่างค่อนข้างง่าย และคุณไม่จำเป็นต้องอ่านเอกสาร WeChat SDK ด้วยซ้ำ:

1. เพิ่ม Wechat Open SDK ในโปรเจกต์ของคุณ

ตรวจสอบให้แน่ใจว่า repository mavenCentral() อยู่ใน repositories ของโปรเจกต์ Gradle ของคุณ:

repositories {
  // ...
  mavenCentral()
}

เพิ่ม Wechat Open SDK ใน dependencies ของคุณ:

dependencies {
  // ...
  api("com.tencent.mm.opensdk:wechat-sdk-android:6.8.0")  // kotlin-script
  // หรือ
  api 'com.tencent.mm.opensdk:wechat-sdk-android:6.8.0'   // groovy-script
}

2. สร้าง WXEntryActivity ในโปรเจกต์ของคุณ

สร้างแพ็กเกจ wxapi ใต้ root ของแพ็กเกจคุณ และเพิ่ม WXEntryActivity ในแพ็กเกจ wxapi (ตัวอย่างเช่น com.sample.app):

// WXEntryActivity.kt
package com.sample.app.wxapi

import io.logto.sdk.android.auth.social.wechat.WechatSocialResultActivity

class WXEntryActivity: WechatSocialResultActivity()
// WXEntryActivity.java
package com.sample.app.wxapi

import io.logto.sdk.android.auth.social.wechat.WechatSocialResultActivity

public class WXEntryActivity extends WechatSocialResultActivity {}

ตำแหน่งสุดท้ายของ WXEntryActivity ในโปรเจกต์ควรเป็นดังนี้ (ตัวอย่าง Kotlin):

src/main/kotlin/com/sample/app/wxapi/WXEntryActivity.kt

3. แก้ไข AndroidManifest.xml

เพิ่มบรรทัดต่อไปนี้ใน AndroidManifest.xml ของคุณ:

\<?xml version="1.0" encoding="utf-8"?>
\<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.sample.app">

  \<application>
    \<!-- line to be added -->
    \<activity android:name=".wxapi.WXEntryActivity" android:exported="true"/>
  \</application>

\</manifest>

ทดสอบตัวเชื่อมต่อ WeChat แบบเนทีฟ​

เรียบร้อยแล้ว อย่าลืม เปิดใช้งานตัวเชื่อมต่อโซเชียลใน Sign-up และ sign-in

เมื่อเปิดใช้งานตัวเชื่อมต่อ WeChat แบบเนทีฟแล้ว คุณสามารถ build และรันแอปของคุณเพื่อตรวจสอบการทำงาน

ข้อควรระวัง:

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