メインコンテンツまでスキップ

WeChat を使用してソーシャルログインを設定する (Set up social login with WeChat (Native))

ネイティブアプリ（iOS および Android）向けの WeChat ソーシャルサインイン用公式 Logto コネクターです。

ヒント:

このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。

はじめに​

コネクターの概念が分からない場合や、このコネクターをサインイン体験に追加する方法が分からない場合は、 Logto チュートリアル を参照してください。

ネイティブアプリでは、WeChat のサインイン方法として Web を利用できません。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 を入力します（実際にはリンクは 1 つで十分です 😂）。

注記:

Bundle ID と Test version Bundle ID は同じ値でも問題ありません。

ヒント:

WeChat ではネイティブサインインにユニバーサルリンクが必要です。まだ設定していない場合や分からない場合は、 Apple 公式ドキュメント を参照してください。

Android アプリ

「Android app」（Android 应用）にチェックを入れます。

Android app platform

Application Signing Signature（应用签名）と Application Package Name（应用包名）を入力します。

注記:

署名を取得するにはアプリに署名する必要があります。詳細は Sign your app を参照してください。

署名が完了したら、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:) 関数は有効化したすべてのネイティブコネクターを処理します。1 回呼び出せば十分です。

// 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 プロジェクトのリポジトリに 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 はその場合、このコネクターをサインイン時に非表示にします（ 公式開発ガイド でも推奨されています）。