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

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

ตัวเชื่อมต่อ 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 คุณสามารถข้ามการกรอก "AppStore download address" ได้

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

บันทึก:

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

เคล็ดลับ:

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

แอป Android

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

Android app platform

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

บันทึก:

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

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

./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 ในแอปของคุณแล้ว ในกรณีนี้ ทุกอย่างค่อนข้างง่าย และคุณไม่จำเป็นต้องอ่านเอกสาร SDK ของ WeChat ด้วยซ้ำ:

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 ได้โดยตรงหลังจากนำเข้า plugin

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: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  LogtoClient.handle(url: url)
  return true
}

Android​

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

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 ในโปรเจกต์ของคุณ

สร้าง package wxapi ใต้ root package ของคุณ และเพิ่ม WXEntryActivity ใน package 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 จะซ่อนตัวเชื่อมต่อนี้ระหว่างการลงชื่อเข้าใช้หากเป็นเช่นนั้น (ซึ่งเป็นวิธีที่แนะนำจาก คู่มือพัฒนาอย่างเป็นทางการ)