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

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

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

เคล็ดลับ:

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

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

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

ในแอป native คุณไม่สามารถใช้เว็บเป็นวิธีลงชื่อเข้าใช้ของ 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 แบบ native

แอป 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 สำหรับการเข้าสู่ระบบ native หากคุณยังไม่ได้ตั้งค่าหรือไม่รู้จัก โปรดดู เอกสารทางการของ Apple

แอป Android

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

Android app platform

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

บันทึก:

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

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

./gradlew your-android-project:signingReport

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

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

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

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

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

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

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 ได้ทันทีเมื่อ import ปลั๊กอินนี้

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

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

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

บันทึก:

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

// 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 ในแอปของคุณแล้ว ในกรณีนี้ ทุกอย่างค่อนข้างง่าย และคุณไม่จำเป็นต้องอ่านเอกสาร 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>
    <!-- บรรทัดที่ต้องเพิ่ม -->
    <activity android:name=".wxapi.WXEntryActivity" android:exported="true"/>
  </application>

</manifest>

ทดสอบตัวเชื่อมต่อ WeChat native​

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

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

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

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