본문으로 건너뛰기

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 스킴을 추가하세요.

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 프로젝트의 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는 이 경우 로그인 시 해당 커넥터를 숨깁니다 (이는 공식 개발 가이드에서 권장하는 방식입니다).