メインコンテンツにスキップ

モバイルアプリでの新しいMessengerインストール体験

iOS、Android、React NativeでIntercom Messengerをインストールする手順ガイド。SDK追加からユーザー認証、テストまで。

対応者:Dawn Perrott

この記事を使ってモバイルアプリにIntercom Messengerをインストールし、signed-in usersを安全に認証し、出荷前にすべてが正常に動作していることを確認してください。

完全かつ安全なMessengerインストールの手順は次のとおりです:

  1. インストールタイプを選択します。

  2. SDKをインストールして初期化します。

  3. signed-in usersを認証します。

  4. インストールをテストします。

注意:

  • Messengerをインストールするには契約プランまたは月額プランが必要で、アプリのコードベース(または開発者)へのアクセスが必要です。MessengerはiOS、Android、React Nativeをサポートしています。


インストールタイプを選択してください

設定 > チャンネル > Messenger Live Chat > 概要に移動し、Mobile appカードを見つけてInstall on mobile app.を選択します。

Messenger Live Chat概要ページを表示しているIntercom設定で、Mobile appカードがハイライトされ、Install on mobile appボタンが選択されています。

インストールタイプを選択してください

「チームはinboxにどの情報が必要ですか?」と尋ねられ、2つのオプションが表示されます:

  • Non signed-in users (最も早くインストール可能) — 会話はユーザー情報にリンクされません。後で追加設定を行いsigned-in usersを識別できます。

  • Signed-in users and non signed-in users — signed-in usersからの会話には関連情報が含まれ、チームがパーソナライズされたサポートを提供するためのコンテキストが得られます。アプリとバックエンドの変更が必要です。

ビジネスに合ったオプションを選択し、Continueをクリックして以下のインストール手順に進みます。


SDKをインストールして初期化します

このセクションはインストールのステップ1〜3をカバーします。数分で完了し、signed-in usersを識別するかどうかに関わらず適用されます。

1. プラットフォームを選択します

Mobile app platformドロップダウンを使って、iOS、Android、React Nativeのいずれかのプラットフォームを選択します。以下の手順はiOSを例にしていますが、他のプラットフォームでも流れは同じで、プラットフォーム固有のコードがあります。

プラットフォーム選択ステップで展開されたMobile app platformドロップダウンには、iOS、Android、React Nativeの3つのオプションが表示されています。

2. SDK依存関係を追加します

ドロップダウンからインストール方法を選択します(iOSの場合、Swift Package ManagerとCocoaPodsが含まれます)。Swift Package Managerの場合:

  1. XcodeでFile > Add Packages.に移動します。

  2. 求められたら、Intercom iOS SDK(ソフトウェア開発キット)のリポジトリURLを入力します:

    .package(url: "https://github.com/intercom/intercom-ios", from: "18.0.0")

  3. 使用したいIntercomのバージョンを選択します。最新バージョンの使用を推奨します。

  4. Add Packageをクリックすると、Intercomが自動的にプロジェクトの依存関係としてダウンロードされます。

3. Intercomを初期化します

このステップでプラットフォーム固有のAPIキー(例:iOS API Key)が表示されます。Copy codeをクリックしてコピーするか、新しいキーが必要な場合はRegenerate API keyをクリックしてください。

アプリケーションデリゲートメソッドで次を呼び出します:

import UIKit
import Intercom

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions
    launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        Intercom.setApiKey("YOUR_IOS_API_KEY", forAppId: "YOUR_APP_ID")
        Intercom.setLauncherVisible(true)
        // If you have identifying information for your user you can use
        // `Intercom.loginUser(with:completion:)`
        Intercom.loginUnidentifiedUser()
        return true
    }
}

signed-in usersを認証します

このセクションはステップ4〜7をカバーし、モバイルアプリとバックエンドの両方で変更が必要です。

4. バックエンド言語を選択します

ドロップダウンを使ってバックエンドの言語を選択します(例:Node)。

ヒント: このステップではサーバー側でトークンを生成する人が必要です。もしあなたでなければ、Invite a developerをクリックしてチームメンバーを招待してください。

5. 各顧客のトークンを生成します

サーバーで、ログインしている各ユーザーの署名付きJSON Web Token(JWT)を生成します:

const jwt = require('jsonwebtoken');

const token = jwt.sign(
  { user_id: user.id, email: user.email },
  process.env.INTERCOM_SECRET_KEY,
  { algorithm: 'HS256', expiresIn: '1h' },
);

このためにワークスペースのシークレットキーが必要です。このステップで(マスクされた状態で)表示されます。このキーはサーバーに保管し、ブラウザやアプリのコードに含めないでください。

注意: キーはプラットフォームごとにスコープされており、ワークスペースは複数持つことができます。Messengerのセキュリティ設定からキーの作成、ローテーション、デコードが可能です。

6. JWTをモバイルアプリに設定します

サーバーで生成したトークンを、既存のIntercom初期化呼び出しにapp_idと一緒に渡します:

Intercom({
  app_id: 'your_app_id',
  intercom_user_jwt: user.jwt,
});

7. ユーザーを識別します

JWTが組み込まれたら、ログインユーザーを次のように識別します:

Intercom.loginUser(
  ICPRegistrationOptions.create(userJwt: user.jwt)
) { result in }

重要: 古いアプリバージョンは署名付きトークンを送信しません。アプリがすでに公開されている場合、ユーザーデータはユーザーがアプリを更新するまで接続されません。JWTを送信するバージョンへの強制アップデートを推奨します。


インストールをテストします

上記の手順を完了したら、Test your installation.をクリックしてください。これによりMessengerと(該当する場合は)JWT設定が正しく動作していることが出荷前に確認できます。

何か問題がある場合は、次を確認してください:

  • init呼び出しのapp_idがワークスペースと一致していること。

  • 最後にトークンを生成してからシークレットキーがローテーションまたは取り消されていないこと。

  • SDKに渡しているuser_idがJWTペイロードにエンコードされているものと一致していること。

すべて確認できたら、ライブです。設定 > チャンネル > Messenger Live Chat > 概要のインストール場所でいつでもインストール状況を確認できます。

注意: セッションの長さは設定 > チャンネル > Messenger Live Chat > セキュリティのセッション期間から設定可能です。期間が切れると顧客は再認証を求められます。

💡 ヒント: さらにサポートが必要ですか?コミュニティフォーラムでサポートを受けましょう。Intercomサポートとコミュニティの専門家から回答や支援が得られます。


関連記事

こちらの回答で解決しましたか?