본문으로 건너뛰기

WeChat 소셜 로그인을 설정하세요 (Native)

네이티브 앱 (iOS 및 Android)에서 WeChat 소셜 로그인을 위한 공식 Logto 커넥터입니다.

팁:

이 가이드는 Logto 커넥터에 대한 기본적인 이해를 전제로 합니다. 익숙하지 않은 분들은 커넥터 가이드를 참조하여 시작하세요.

시작하기​

커넥터의 개념을 모르거나 이 커넥터를 로그인 경험에 추가하는 방법을 모른다면, 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"을 클릭하여 계속 진행하세요.

플랫폼 정보​

Logto를 WeChat 네이티브 로그인과 통합하기 위해 iOS 및 Android 플랫폼 중 하나 또는 둘 다 구성할 수 있습니다.

iOS 앱

"iOS app" (iOS 应用)을 선택한 후, 앱의 대상 기기 유형을 적절히 선택하세요.

App platform

App Store 가용성을 "No"로 선택한 경우, 여기서 "AppStore download address"를 입력하는 것을 건너뛸 수 있습니다.

Bundle ID, Test version Bundle ID, 및 Universal Links를 입력하세요 (사실, 하나의 링크만 필요합니다 😂).

노트:

Bundle ID와 Test version Bundle ID는 동일한 값일 수 있습니다.

팁:

WeChat은 네이티브 로그인을 위해 유니버설 링크를 요구합니다. 설정하지 않았거나 모른다면, Apple 공식 문서를 참조하세요.

Android 앱

"Android app" (Android 应用)을 선택하세요.

Android app platform

Application Signing Signature (应用签名)와 Application Package Name (应用包名)을 입력하세요.

노트:

앱에 서명하여 서명을 얻어야 합니다. 자세한 내용은 앱 서명을 참조하세요.

서명을 완료한 후, signingReport 작업을 실행하여 서명 서명을 얻을 수 있습니다.

./gradlew your-android-project:signingReport

해당 빌드 변형의 보고서에서 MD5 값이 Application Signing Signature (应用签名)가 되지만, 값에서 모든 세미콜론을 제거하고 소문자로 변경하세요.

예: 1A:2B:3C:4D -> 1a2b3c4d.

검토 결과 대기​

플랫폼 정보를 완료한 후, "Submit Review"를 클릭하여 계속 진행하세요. 일반적으로 검토는 빠르게 진행되며, 1-2일 내에 끝납니다.

각 제출 시 검토자가 무작위로 할당된다고 의심되며, 기준이 유동적입니다. 처음에는 거절될 수 있지만 포기하지 마세요! 현재 상태를 설명하고 검토자에게 수정 방법을 문의하세요.

앱에서 WeChat 네이티브 로그인 활성화하기​

iOS​

앱에 Logto iOS SDK를 통합했다고 가정합니다. 이 경우, 매우 간단하며 WeChat SDK 문서를 읽을 필요도 없습니다:

1. Xcode 프로젝트에서 유니버설 링크 및 URL 스킴 구성하기

Xcode 프로젝트 -> Signing & Capabilities 탭에서 "Associated Domains" 기능과 이전에 구성한 유니버설 링크를 추가하세요.

Universal link

그런 다음 "Info" 탭으로 이동하여 WeChat App ID로 사용자 정의 URL 스킴을 추가하세요.

Custom URL scheme

마지막으로 Info.plist를 열고 LSApplicationQueriesSchemes 아래에 weixinULAPI와 weixin을 추가하세요.

Plist
노트:

이러한 작업이 매우 합리적이지 않다는 것을 알고 있지만, 이것이 우리가 찾은 최소한의 실행 가능한 솔루션입니다. 자세한 내용은 마법의 공식 가이드를 참조하세요.

2. LogtoSocialPluginWechat을 Xcode 프로젝트에 추가하기

프레임워크 추가:

Add framework

그리고 Build Settings > Linking > Other Linker Flags에 -ObjC를 추가하세요:

Linker flags
노트:

플러그인은 WeChat Open SDK 1.9.2를 포함합니다. 플러그인을 가져온 후 import WechatOpenSDK를 직접 사용할 수 있습니다.

3. 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를 프로젝트에 추가하기

Gradle 프로젝트 저장소에 mavenCentral() 저장소가 있는지 확인하세요:

repositories {
  // ...
  mavenCentral()
}

의존성에 Wechat Open SDK를 추가하세요:

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 패키지를 생성하고 wxapi 패키지에 WXEntryActivity를 추가하세요 (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 네이티브 커넥터 테스트하기​

이제 끝났습니다. 로그인 경험에서 소셜 커넥터 활성화를 잊지 마세요.

WeChat 네이티브 커넥터가 활성화되면, 앱을 빌드하고 실행하여 작동하는지 확인할 수 있습니다.

주의:

WeChat은 WeChat 앱이 설치되지 않은 기기에 대한 계획이 없습니다. Logto는 로그인 중에 이 커넥터를 숨길 것입니다 (이는 공식 개발 가이드에서 권장하는 방법입니다).