본문으로 건너뛰기

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

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

팁:

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

시작하기​

커넥터의 개념을 잘 모르거나 이 커넥터를 로그인 경험에 추가하는 방법을 모른다면 Logto 튜토리얼을 참고하세요.

네이티브 앱에서는 웹을 WeChat의 로그인 방식으로 사용할 수 없습니다: WeChat 앱으로의 네비게이션이 필요하며, 그들의 SDK를 사용해야 합니다.

조금 복잡하게 느껴질 수 있지만 걱정하지 마세요. 이 튜토리얼에서 쉽게 처리할 수 있습니다.

WeChat 오픈 플랫폼에서 모바일 앱 생성하기​

팁:

이미 완료한 부분이 있다면 일부 섹션을 건너뛸 수 있습니다.

계정 생성하기​

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은 네이티브 로그인을 위해 universal link를 요구합니다. 아직 설정하지 않았거나 잘 모른다면 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 프로젝트에서 universal link와 URL scheme 설정하기

Xcode 프로젝트 -> Signing & Capabilities 탭에서 "Associated Domains" 기능을 추가하고, 앞서 설정한 universal link를 입력하세요.

Universal link

그 다음 "Info" 탭으로 이동하여, WeChat App ID로 커스텀 URL scheme을 추가하세요.

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

Android​

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

1. 프로젝트에 Wechat Open SDK 추가하기

Gradle 프로젝트의 repositories에 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 패키지를 만들고, 그 안에 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는 로그인 시 해당 커넥터를 숨깁니다 (이는 공식 개발 가이드에서 권장하는 방식입니다).