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

ソーシャルコネクター開発のステップバイステップガイド

最も素早く始める方法は、既存の公式コネクターのコードをコピーし、ニーズに合わせて修正することです。ここでは GitHub コネクターを例に説明します。

ステップ 1: 既存のコネクターパッケージをクローンする​

コネクターのソースフォルダーには、次のファイルが含まれています：

  • index.ts: コネクターのメインエントリーファイル。
  • constant.ts: コネクターで使用される定数。
  • types.ts: コネクターで使用される TypeScript 型。
  • index.test.ts: コネクターのテストケース。
  • mock.ts: コネクターのテストケースで使用されるモックデータ。

これらのファイルに加えて、コネクターの説明用 README.md ファイル、logo.svg（ダークモードでのユーザー体験向上のために logo-dark.svg も任意で）、npm パッケージ情報を定義する package.json ファイルも用意する必要があります。

ステップ 2: メインエントリーファイル（index.ts）を修正する​

index.ts ファイルには、コネクターのロジックの大部分が含まれています。通常、実装が必要な関数は 4 つです：

  • getAuthorizationUri: サードパーティのソーシャルプラットフォーム用の認可リクエスト URI を生成します。GitHub の場合は https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state} となります。対象ソーシャルプラットフォームの開発者ドキュメントを参照し、正しい URI を取得してください。
  • authorizationCallbackHandler: 認可コールバック URI で返されるパラメーター値を安全に処理し、認可 code を抽出し、発生しうるエラーを処理します。
  • getAccessToken: 認可 code をアクセストークン (アクセス トークン) に交換します。
  • getUserInfo: アクセストークン (アクセス トークン) を使ってサードパーティのソーシャルプラットフォームからユーザー情報を取得します。

その他の共通ロジックの多くは Logto コネクターキットで処理されているため、作業が簡単になります。

最後に、ファイルの末尾で、GitHub コネクターと同じコード構造でコネクターオブジェクトをエクスポートするだけです。

const createGithubConnector: CreateConnector<SocialConnector> = async ({ getConfig }) => {
  return {
    metadata: defaultMetadata,
    type: ConnectorType.Social,
    configGuard: githubConfigGuard,
    getAuthorizationUri: getAuthorizationUri(getConfig),
    getUserInfo: getUserInfo(getConfig),
  };
};

ステップ 3: コネクターをテストする​

ユニットテスト​

まず、いくつかのユニットテストケースを書き、基本的な機能が期待通りに動作することを確認します。

ローカルテスト​

  • ローカル環境で Logto をセットアップする：Logto はローカルで実行するためのいくつかの方法を提供しています。CLI、docker、またはソースコードからビルドすることも可能です。詳細は こちら のドキュメントを参照してください。
  • カスタムコネクターを Logto インスタンスにリンクする：CLI を使ってコネクターのシンボリックリンクを Logto インスタンスに作成します。詳細はこちら。 
    cd logto
    npx @logto/cli connector link -p .
  • コネクターをリンクした後、 <logto-root-path>/packages/core/connectors フォルダーに表示されるはずです。
  • Logto インスタンスを再起動し、Logto 管理コンソールにアクセスすると、ソーシャルコネクター一覧に表示されていることを確認できます。

  • コンソール > サインイン & アカウント > サインアップとサインイン
    ソーシャルサインインでコネクターを設定します。そして、「ライブプレビュー」機能を使ってデモアプリで試してみてください。