OAuthサービスに接続する

Google、GitHub、Spotifyなど一部のサービスは、本人がサインインして同意しないとデータを共有しません。連携は、このサインインをOAuth 2.0で処理します。ウィジェットを追加する人が一度アカウントを接続すれば、ウィジェットはアクセストークンを受け取り、その人に代わってサービスを呼び出せます。

サービスの開発者向け設定で、OAuthアプリを作成します。リダイレクトURI（コールバックURLと呼ばれることもあります）を求められたら、次のとおり正確に入力します。

https://console.blotch.app/oauth/callback

するとサービスからクライアントIDとクライアントシークレットが発行されます。また、サービスのドキュメントに認可エンドポイント、トークンエンドポイント、スコープが記載されています。

2. 連携を追加する

ウィジェットスタジオでファイル > 入力項目を選び、連携タブを開きます。

新しい連携で、次の項目を入力します。

項目	入力する内容
連携名	連携の名前です（例：`github`）。コードの中で使います。
クライアントID	サービスから発行されたもの。
クライアントシークレット	サービスから発行されたもの。安全に保存され、二度と表示されません。
認可エンドポイント	サービスのサインイン用のアドレス。多くは`/authorize`で終わります。
トークンエンドポイント	トークンを発行するアドレス。多くは`/token`で終わります。
スコープ	ウィジェットに必要な権限。サービスが求める区切り方（スペース、カンマ、`+`）で区切ります。

新しい連携を作成を選びます。

「入力項目」ダイアログの「連携」タブ。新しい連携のフォームに、名前、クライアントIDとシークレット、エンドポイント、スコープの欄がある

フォームには登録するリダイレクトURIも表示され、ボタンでコピーできます。サービスがOAuthのパラメーターに一般的でない名前を使っている場合は、詳細で変更してください。

自分で連携を試すには、接続を選んでサインインします。状態が接続済みに変わります。

3. コードで使う

ウィジェットのうち、アカウントが必要な部分をRequireIntegrationで囲みます。その中では、useIntegrationでアクセストークンを取得できます。

import { RequireIntegration, useIntegration } from "~lib/integrations";
import { Paragraph } from "~lib/typography";
import { useFetch } from "~lib/use-fetch";

type GitHubUser = {
  readonly login: string;
};

const Profile = () => {
  const { accessToken } = useIntegration();

  const { data } = useFetch<GitHubUser>("https://api.github.com/user", {
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  return <Paragraph>Signed in as {data.login}</Paragraph>;
};

export const Widget = () => (
  <RequireIntegration name="github">
    <Profile />
  </RequireIntegration>
);

アカウントが接続されるまで、RequireIntegrationは中身の代わりに接続を促す表示を出します。トークンの有効期限が切れたときは、Blotchが更新します。

useIntegrationが返す値はすべて、リファレンスの連携で確認できます。

あとから連携を追加する

新しい連携は、利用者がアップグレードするときに接続を求められます。そのため、公開済みのウィジェットに連携を追加すると、次のリリースはメジャーバージョンになります。バージョン番号を参照してください。

既存の連携の設定を変更した場合は、公開しなくてもすぐに反映されます。

1. サービスにウィジェットを登録する​

2. 連携を追加する​

3. コードで使う​

あとから連携を追加する​

1. サービスにウィジェットを登録する

2. 連携を追加する

3. コードで使う

あとから連携を追加する