Skip to main content
アプリがClerk Authを使用している場合、訪問者はソーシャルプロバイダーでサインインできます。Replitはすぐに使える共有の認証情報を提供していますが、このページでは各プロバイダーに独自のOAuth認証情報を持ち込む方法を説明します。これにより、サインイン画面にアプリ独自の名前とブランディングを表示できます。 すべてのプロバイダーで手順は同じです。プロバイダーのコンソールでOAuthアプリを作成し、Replitが表示するURLをコピーして、生成された認証情報をプロバイダーの編集パネルに貼り付けます。
カスタムOAuth認証情報はProduction環境でのみ使用できるため、事前にアプリを公開する必要があります。各プロバイダーの編集パネルは、Users & AuthツールのConfigureタブ、SSO providersセクションから開きます。Production環境を選択し、プロバイダーの横にあるEditを選択してください。全体の流れについては、SSOプロバイダー用のOAuth認証情報を設定するを参照してください。

Google

このガイドでは、Google Cloud ConsoleでGoogle OAuthアプリを作成する手順を説明します。Client IDClient Secretを取得し、Clerkが必要とするJavaScriptオリジンとリダイレクトURIも設定します。 必要なもの: Google Cloud Consoleへのアクセス権限。

ステップ1: Google OAuthアプリを作成する

Google Cloud Consoleに移動します。

プロジェクトを作成または選択する

  1. プロジェクトのドロップダウンから既存のプロジェクトを選択するか、新しいプロジェクトを作成します
  2. プロジェクトのダッシュボードにリダイレクトされます

OAuth同意画面を設定する

  1. 左側のサイドバーでメニューアイコン(≡)を選択し、APIs & Servicesを選択します
  2. OAuth consent screenを選択します
  3. 必要な情報でアプリの同意画面を設定します
  4. 変更を保存します

OAuth認証情報を作成する

  1. APIs & ServicesからCredentialsを選択します
  2. 上部のCreate Credentialsを選択し、次にOAuth client IDを選択します
  3. アプリケーションの種類としてWeb applicationを選択します
  4. Auth paneProvider setupに表示されている正確な値をAuthorized JavaScript originsAuthorized redirect URIsに設定します。公開ドメインとカスタムドメインの両方を含む、リストされているすべての値を追加してください。値の見つけ方については、SSOプロバイダー用のOAuth認証情報を設定するを参照してください。
  5. Createを選択します
  6. Client IDClient Secretを保存します
Client Secretは安全に管理し、バージョン管理システムにコミットしないようにしてください。
Googleサインインは、埋め込みブラウザやアプリ内Webビューでは動作しません。ユーザーは標準のWebブラウザを使用する必要があります。

トラブルシューティング

リダイレクトURIの不一致

  • Google Cloud Consoleのリダイレクト URIが、Auth paneProvider setupに表示されている値と正確に一致していることを確認してください
  • 末尾のスラッシュやタイプミスがないか確認してください
  • Googleの設定が反映されるまで数分待ってください

無効なクライアント

  • Client IDとClient Secretが正しくコピーされているか再確認してください
  • 余分なスペースが入っていないか確認してください
  • OAuth同意画面が設定されているか確認してください

カスタムドメインで動作しない

  • Auth paneProvider setupに表示されているカスタムドメインのエントリを、Authorized JavaScript originsとAuthorized redirect URIsの両方に追加してください

GitHub

このガイドでは、GitHub Developer SettingsでGitHub OAuthアプリを作成する手順を説明します。Client IDClient Secretを取得し、Auth paneに入力します。 必要なもの: GitHubアカウント

ステップ1: GitHub OAuthアプリを作成する

  1. GitHub Developer Settingsに移動します
  2. サイドバーでOAuth Appsを選択します
  3. New OAuth Appを選択します
  4. アプリケーションの詳細を入力します。
Application name: アプリケーションの名前を入力します。 Homepage URLAuthorization callback URL: 両方を、Auth paneProvider setupに表示されている正確な値に設定します。値の見つけ方については、SSOプロバイダー用のOAuth認証情報を設定するを参照してください。
  1. Register applicationを選択します

ステップ2: クライアント認証情報を生成する

  1. アプリの設定ページにClient IDが表示されるので、コピーします
  2. Generate a new client secretを選択します
  3. すぐにClient Secretをコピーします
Client Secretは安全に保存してください。このページを離れると再度表示できません。失くした場合は、新しいものを生成する必要があります。

トラブルシューティング

リダイレクトURIの不一致

  • Authorization callback URLが、Auth paneProvider setupに表示されている値と正確に一致していることを確認してください
  • タイプミスやプロトコルの誤りがないか確認してください
  • 末尾にスラッシュを付けないでください

無効なクライアント

  • Client IDとClient Secretが正しくコピーされているか再確認してください
  • 貼り付け時に余分なスペースが入っていないか確認してください

カスタムドメインで動作しない

  • Homepage URLとAuthorization callback URLを、Auth paneProvider setupに表示されているカスタムドメインの値に更新してください

Apple

このガイドでは、Sign in with Appleに必要なApple App ID、Services ID、Private Keyを作成する手順を説明します。Team IDServices IDKey IDPrivate Keyを取得し、Auth paneに入力します。 必要なもの: Apple Developerアカウント(Apple Developer Programへの登録が必要です)。

ステップ1: Apple App IDを作成する

  1. Apple Developerポータルに移動します
  2. Certificates, IDs & ProfilesからIdentifiersに移動します
  3. ドロップダウンからApp IDsを選択します
  4. **+**アイコンを選択して新しい識別子を登録します
  5. App IDsを選択し、次にContinueを選択します
  6. Appを選択し、次にContinueを選択します
  7. 以下を入力します。
    • Description: App IDの名前
    • Bundle ID: 一意の識別子
  8. CapabilitiesでSign In with Appleを有効にします
  9. Continueを選択し、次にRegisterを選択します
  10. App ID Prefix(上部に表示されます)を保存します。これがTeam IDです

ステップ2: Apple Services IDを作成する

  1. Identifiersページで、ドロップダウンからServices IDsを選択します
  2. **+**を選択して新しい識別子を登録します
  3. Services IDsを選択し、次にContinueを選択します
  4. 以下を入力します。
    • Description: Services IDの名前
    • Identifier: 一意の識別子(これを保存してください。これがServices IDです)
  5. Continueを選択し、次にRegisterを選択します

Services IDを設定する

  1. 作成したServices IDを選択します
  2. Sign In with Appleを有効にします
  3. Configureを選択します
  4. 以下を設定します。
    • Primary App ID: ステップ1で作成したApp IDを選択します
    • Domains and Subdomains: Auth paneProvider setupに表示されている値をコピーします(https://プロトコルの接頭辞は除きます)
    • Return URLs: Auth paneProvider setupに表示されている値をコピーします
    これらの値の見つけ方については、SSOプロバイダー用のOAuth認証情報を設定するを参照してください。
  5. NextDoneContinueSaveの順に選択します

ステップ3: Apple Private Keyを作成する

  1. Apple DeveloperポータルのサイドバーでKeysを選択します
  2. **+**を選択して新しいキーを登録します
  3. Key Nameを入力します
  4. Sign In with Appleを有効にします
  5. Configureを選択し、ステップ1で作成したApp IDを選択します
  6. SaveContinueRegisterの順に選択します
  7. Key IDを保存します
  8. プライベートキーファイル(.p8)をDownloadします
プライベートキーは一度しかダウンロードできません。安全に保管してください。再度ダウンロードすることはできません。

ステップ4: Apple Private Email Relayを設定する

AppleのHide My Email機能により、ユーザーは実際のメールアドレスを公開せずにサインインできます。これらのユーザーにメールを送信するには、メール送信元を登録する必要があります。
  1. Apple DeveloperポータルのサイドバーでServicesを選択します
  2. Sign in with Apple for Email Communicationの下でConfigureを選択します
  3. **+**を選択してEmail Sourceを追加します
  4. Auth paneProvider setupに表示されているEmail Sourceの値を入力します
  5. NextRegisterDoneの順に選択します
  6. DNS検証(緑のチェックアイコン)を待ちます
一部の地域(中国、インドなど)では、Apple IDがメールアドレスではなく電話番号に紐付けられている場合があります。アプリが全ユーザーにメールアドレスを必須としている場合、これらの地域のユーザーではSign in with Appleが失敗する可能性があります。

トラブルシューティング

無効なクライアント

  • すべての認証情報が正しく入力されているか確認してください
  • Private KeyにBEGINとENDの行が含まれているか確認してください
  • Services IDが正しく設定されているか確認してください

無効なリダイレクトURI

  • Apple Services ID設定内のReturn URLが、Auth paneProvider setupに表示されている値と正確に一致していることを確認してください
  • Domains and Subdomains内のドメインが、公開ドメインと一致しているか確認してください(https://は除きます)

メールリレーが動作しない

  • Apple Developerポータルで、Email Sourceに緑のチェックが表示されているか確認してください
  • 最近追加した場合は、DNSの反映を待ってください

カスタムドメインで動作しない

  • Auth paneProvider setupに表示されているカスタムドメインのエントリを、Domains and Subdomains(https://は除く)とReturn URLsに追加してください

その他のリソース

X (Twitter)

このガイドでは、X Developer PortalでX OAuthアプリを作成する手順を説明します。Client IDClient Secretを取得し、Auth paneに入力します。 必要なもの: X Developerアカウント(無料プランあり)。

ステップ1: X Developerアプリを設定する

開発者アカウントを作成する(必要な場合)

  1. X Developer Portalに移動します
  2. アカウントをまだ持っていない場合は、開発者アカウントを申請します
  3. 利用目的を記載した申請フォームを完成させます

アプリを作成または選択する

  1. X Developer PortalでProjects & Appsに移動します
  2. 既存のアプリを使用するか、Add Appを選択します
  3. アプリ名を入力し、Nextを選択します
  4. App settingsを選択します

ステップ2: 認証を設定する

  1. User authentication settingsまでスクロールします
  2. Set upを選択します
App permissions: 最小限の権限レベルを選択します。
  • Read - ユーザープロフィールに必要(最小限)
  • Write - ユーザーに代わって投稿する場合(任意)
  • Direct Messages - DMへのアクセスが必要な場合(任意)
権限は要求するスコープと一致させる必要があります。アプリがtweet.writeを要求しているのにReadしか有効にしていない場合、認証は失敗します。
Type of app: Web App, Automated App or Botを選択します App info:
  • Callback URI / Redirect URL: Auth paneProvider setupに表示されている値をコピーします
  • Website URL: Auth paneProvider setupに表示されている値をコピーします
これらの値の見つけ方については、SSOプロバイダー用のOAuth認証情報を設定するを参照してください。
  1. Saveを選択します
  2. Client IDとClient Secretを保存します
Client Secretは安全に保管してください。失くした場合、再生成すると古いものは無効になります。

トラブルシューティング

リダイレクトURIの不一致

  • Callback URIが、Auth paneProvider setupに表示されている値と正確に一致していることを確認してください
  • タイプミスやプロトコルの誤りがないか確認してください
  • 末尾にスラッシュを付けないでください

無効なクライアント

  • Client IDとClient Secretを再確認してください
  • 余分なスペースが入っていないか確認してください
  • OAuth 2.0の認証情報(OAuth 1.0aではなく)を使用しているか確認してください

スコープ/権限エラー

  • スコープがX Developer Portalで有効にした権限と一致しているか確認してください
  • 最低限Read権限が有効になっているか確認してください

アプリが開発モードになっている

  • Xアプリはユーザー数が限られた開発モードで開始します
  • 本番利用のために、拡張アクセスを申請する必要がある場合があります

カスタムドメインで動作しない

  • Website URLとCallback URIを、Auth paneProvider setupに表示されているカスタムドメインの値に更新してください

その他のリソース