メインコンテンツまでスキップ
新しい友達のために:

Logto は、モダンなアプリや SaaS 製品向けに設計された Auth0 の代替です。 Cloud と オープンソース の両方のサービスを提供し、アイデンティティと管理 (IAM) システムを迅速に立ち上げるのに役立ちます。認証 (Authentication)、認可 (Authorization)、マルチテナント管理を すべて一つに まとめて楽しんでください。

Logto Cloud で無料の開発テナントから始めることをお勧めします。これにより、すべての機能を簡単に探索できます。

この記事では、Vue と Logto を使用して、WeChat (Native) サインイン体験（ユーザー認証 (Authentication)）を迅速に構築する手順を説明します。

前提条件

  • 稼働中の Logto インスタンス。紹介ページ をチェックして始めてください。
  • Vue の基本的な知識。
  • 使用可能な WeChat (Native) アカウント。

Logto でアプリケーションを作成する​

Logto は OpenID Connect (OIDC) 認証 (Authentication) と OAuth 2.0 認可 (Authorization) に基づいています。これは、複数のアプリケーション間でのフェデレーテッドアイデンティティ管理をサポートし、一般的にシングルサインオン (SSO) と呼ばれます。

あなたの Single page app アプリケーションを作成するには、次の手順に従ってください：

  1. Logto コンソール を開きます。「Get started」セクションで、「View all」リンクをクリックしてアプリケーションフレームワークのリストを開きます。あるいは、Logto Console > Applications に移動し、「Create application」ボタンをクリックします。 Get started
  2. 開いたモーダルで、左側のクイックフィルターチェックボックスを使用して、利用可能なすべての "Single page app" フレームワークをフィルタリングするか、"Single page app" セクションをクリックします。"Vue" フレームワークカードをクリックして、アプリケーションの作成を開始します。 Frameworks
  3. アプリケーション名を入力します。例：「Bookstore」と入力し、「Create application」をクリックします。

🎉 タダーン！Logto で最初のアプリケーションを作成しました。詳細な統合ガイドを含むお祝いページが表示されます。ガイドに従って、アプリケーションでの体験を確認してください。

Vue SDK を統合する​

ヒント:
  • Logto Vue SDK は、composition API を使用して構築されており、composables を活用しているため、Vue 3 としか互換性がありません。
  • チュートリアルビデオは、私たちの YouTube チャンネル でご覧いただけます。
  • 完全なサンプルプロジェクトは、私たちの SDK リポジトリ で入手可能です。

インストール​

npm i @logto/vue

LogtoClient の初期化​

Logto プラグインをインストールするために createLogto をインポートして使用します：

main.ts
import { createLogto, LogtoConfig } from '@logto/vue';
import { createApp } from 'vue';
import App from './App.vue';

const config: LogtoConfig = {
  endpoint: '<your-logto-endpoint>',
  appId: '<your-application-id>',
};

const app = createApp(App);

app.use(createLogto, config);
app.mount('#app');

リダイレクト URI の設定​

詳細に入る前に、エンドユーザーの体験について簡単に説明します。サインインプロセスは次のように簡略化できます：

  1. あなたのアプリがサインインメソッドを呼び出します。
  2. ユーザーは Logto のサインインページにリダイレクトされます。ネイティブアプリの場合、システムブラウザが開かれます。
  3. ユーザーがサインインし、あなたのアプリにリダイレクトされます（リダイレクト URI として設定されています）。

リダイレクトベースのサインインについて​

  1. この認証 (Authentication) プロセスは OpenID Connect (OIDC) プロトコルに従い、Logto はユーザーのサインインを保護するために厳格なセキュリティ対策を講じています。
  2. 複数のアプリがある場合、同じアイデンティティプロバイダー (Logto) を使用できます。ユーザーがあるアプリにサインインすると、Logto は別のアプリにアクセスした際に自動的にサインインプロセスを完了します。

リダイレクトベースのサインインの理論と利点について詳しく知るには、Logto サインイン体験の説明を参照してください。

注記:

以下のコードスニペットでは、あなたのアプリが http://localhost:3000/ で実行されていると仮定しています。

リダイレクト URI を設定する​

Logto Console のアプリケーション詳細ページに移動します。リダイレクト URI http://localhost:3000/callback を追加します。

Logto Console のリダイレクト URI

サインインと同様に、ユーザーは共有セッションからサインアウトするために Logto にリダイレクトされるべきです。完了したら、ユーザーをあなたのウェブサイトに戻すと良いでしょう。例えば、http://localhost:3000/ をサインアウト後のリダイレクト URI セクションとして追加します。

その後、「保存」をクリックして変更を保存します。

リダイレクトの処理​

ユーザーが Logto からあなたのアプリケーションにリダイレクトされた後に行うべきことがまだあります。適切に処理しましょう。

まず、コールバックページを作成しましょう：

views/CallbackView.vue
import { useHandleSignInCallback } from '@logto/vue';
import router from '@/router';

const { isLoading } = useHandleSignInCallback(() => {
  // 完了したときに何かを行う、例えばホームページにリダイレクトする
});
<template>
  <!-- 処理中の場合 -->
  <p v-if="isLoading">リダイレクト中...</p>
</template>

認証を必要としない /callback ルートに以下のコードを挿入します：

router/index.ts
// vue-router を仮定
const router = createRouter({
  routes: [
    {
      path: '/callback',
      name: 'callback',
      component: CallbackView,
    },
  ],
});

サインインとサインアウトの実装​

認証 (Authentication) フローを簡単に管理できるように、2 つのコンポーザブル useHandleSignInCallback() と useLogto() を提供しています。

注記:

.signIn() を呼び出す前に、Admin Console でリダイレクト URI が正しく設定されていることを確認してください。 :::

views/HomeView.vue
import { useLogto } from '@logto/vue';

const { signIn, signOut, isAuthenticated } = useLogto();

const onClickSignIn = () => signIn('http://localhost:3000/callback');
const onClickSignOut = () => signOut('http://localhost:3000');
<template>
  <button v-if="!isAuthenticated" @click="onClickSignIn">Sign In</button>
  <button v-else @click="onClickSignOut">Sign Out</button>
</template>

.signOut() を呼び出すと、存在する場合、メモリと localStorage 内のすべての Logto データがクリアされます。

チェックポイント: アプリケーションをテストする​

これで、アプリケーションをテストできます：

  1. アプリケーションを実行すると、サインインボタンが表示されます。
  2. サインインボタンをクリックすると、SDK がサインインプロセスを初期化し、Logto のサインインページにリダイレクトされます。
  3. サインインすると、アプリケーションに戻り、サインアウトボタンが表示されます。
  4. サインアウトボタンをクリックして、トークンストレージをクリアし、サインアウトします。

WeChat (Native) コネクターを追加する​

迅速なサインインを有効にし、ユーザーコンバージョンを向上させるために、アイデンティティプロバイダー (IdP) として Vue を接続します。Logto ソーシャルコネクターは、いくつかのパラメーター入力を許可することで、この接続を数分で確立するのに役立ちます。

ソーシャルコネクターを追加するには、次の手順に従ってください：

  1. Console > Connectors > Social Connectors に移動します。
  2. 「Add social connector」をクリックし、「WeChat (Native)」を選択します。
  3. README ガイドに従い、必要なフィールドを完了し、設定をカスタマイズします。
Connector tab
注記:

インプレースコネクターガイドに従っている場合は、次のセクションをスキップできます。

WeChat モバイルアプリ を設定する​

WeChat オープンプラットフォームでモバイルアプリを作成する​

ヒント:

すでに完了しているセクションはスキップできます。

アカウントを作成する​

https://open.weixin.qq.com/ を開き、右上の「Sign Up」ボタンをクリックして、サインアッププロセスを完了します。

モバイルアプリを作成する​

作成したアカウントでサインインします。「Mobile Application」（移动应用）タブで、大きな緑色の「Create a mobile app」（创建移动应用）ボタンをクリックします。

アプリタブ

申請フォームに必要な情報を入力しましょう。

モバイルアプリ作成

基本情報​

ほとんどは直感的に入力できますが、いくつかのヒントを紹介します：

  • WeChat サインインをテストしたいだけで、アプリが App Store にない場合は、「App is available」セクションで「No」を選択して「App download link」をスキップできます。
  • 「App operation flow chart」は少し難しそうに見えます。経験上、シンプルなフローチャートといくつかのアプリのスクリーンショットを用意すると審査通過の可能性が高まります。

「Next step」をクリックして進みます。

プラットフォーム情報​

iOS と Android のいずれか、または両方のプラットフォームを設定して、Logto と WeChat ネイティブサインインを統合できます。

iOS アプリ

「iOS app」（iOS 应用）にチェックを入れ、アプリの対象デバイスタイプも選択します。

アプリプラットフォーム

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 アプリプラットフォーム

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」機能を追加し、事前に設定したユニバーサルリンクを追加します。

ユニバーサルリンク

次に「Info」タブに移動し、WeChat App ID を使って カスタム URL スキーム を追加します。

カスタム URL スキーム

最後に Info.plist を開き、LSApplicationQueriesSchemes の下に weixinULAPI と weixin を追加します。

Plist
注記:

これらの手順はあまり合理的ではありませんが、私たちが見つけた最小限の動作構成です。詳細は 公式ガイド（魔法のような） を参照してください。

2. LogtoSocialPluginWechat を Xcode プロジェクトに追加する

フレームワークを追加します：

フレームワーク追加

そして Build Settings > Linking > Other Linker Flags に -ObjC を追加します：

リンカーフラグ
注記:

このプラグインには 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: /*...*/) -> Bool {
  LogtoClient.handle(url: url)
}

Android​

アプリに Logto Android SDK を統合済みであることを前提とします。この場合、非常にシンプルで、WeChat SDK のドキュメントを読む必要すらありません：

1. プロジェクトに Wechat Open SDK を追加する

mavenCentral() リポジトリが Gradle プロジェクトのリポジトリに含まれていることを確認します：

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>

設定を保存する​

Logto コネクター設定エリアで必要な値をすべて記入したことを確認してください。「保存して完了」または「変更を保存」をクリックすると、WeChat (Native) コネクターが利用可能になります。

サインイン体験で WeChat (Native) コネクターを有効にする​

ソーシャルコネクターを正常に作成したら、サインイン体験で「WeChat (Native) で続行」ボタンとして有効にすることができます。

  1. Console > サインイン体験 > サインアップとサインイン に移動します。
  2. （オプション）ソーシャルログインのみが必要な場合は、サインアップ識別子に「該当なし」を選択します。
  3. 設定済みの WeChat (Native) コネクターを「ソーシャルサインイン」セクションに追加します。
サインイン体験タブ

テストと検証​

Vue アプリに戻ります。これで WeChat (Native) を使用してサインインできるはずです。お楽しみください！

さらなる読み物​

エンドユーザーフロー：Logto は、MFA やエンタープライズシングルサインオン (SSO) を含む即時使用可能な認証 (Authentication) フローを提供し、アカウント設定、セキュリティ検証、マルチテナント体験の柔軟な実装のための強力な API を備えています。

認可 (Authorization)：認可 (Authorization) は、ユーザーが認証 (Authentication) された後に行えるアクションやアクセスできるリソースを定義します。ネイティブおよびシングルページアプリケーションの API を保護し、ロールベースのアクセス制御 (RBAC) を実装する方法を探ります。

組織 (Organizations)：特にマルチテナント SaaS や B2B アプリで効果的な組織機能は、テナントの作成、メンバー管理、組織レベルの RBAC、およびジャストインタイムプロビジョニングを可能にします。

顧客 IAM シリーズ：顧客（または消費者）アイデンティティとアクセス管理に関する連続ブログ投稿で、101 から高度なトピックまでを網羅しています。