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

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

最も速く始める方法は、既存の公式コネクターのコードをコピーし、ニーズに合わせて修正することです。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: サードパーティのソーシャルプラットフォームの認可 (Authorization) URI を生成します。GitHub の場合は次のようになります：https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}。ターゲットのソーシャルプラットフォームの開発者ドキュメントを参照して、正しい URI を取得してください。
  • authorizationCallbackHandler: 認可 (Authorization) コールバック URI で返されたパラメーター値を保護し、認可 (Authorization) code を抽出し、潜在的なエラーを処理します。
  • getAccessToken: 認可 (Authorization) 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 管理コンソールに移動すると、ソーシャルコネクターのリストに表示されるはずです。
  • Console > Sign-in experience > Sign-up and sign-in > ソーシャルサインインでコネクターを設定します。そして、「ライブプレビュー」機能を使用してデモアプリで試してみてください。