> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ale.run/llms.txt
> Use this file to discover all available pages before exploring further.

# GitHub

> GitHub OAuthをエールに追加するガイドです。

> **GitHub OAuth**を追加すると、GitHubログインが有効になり、ダッシュボードユーザーは連携したGitHubアカウントのリポジトリを選択してサービスをデプロイできるようになります。

***

## GitHub Appsの作成

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_01.png" />
</Frame>

> GitHubにログインした後、**Settings > Developer Settings > GitHub Apps**ページで[New GitHub App](https://github.com/settings/apps/new)をクリックすると、GitHub App作成プロセスが開始されます。

### 基本情報の入力

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_02.png" />
</Frame>

> GitHub Appを作成するための情報を以下のように入力してください。

* **GitHub App name** : GitHub Appの名前
* **Homepage URL**
  * GitHub OAuthを適用するホームページURL
  * IngressでデプロイされたURLである`https://app.[ドメイン]`
* **Callback URL(`Add Callbak URL`で項目追加)**
  * `https://app.[ドメイン]/api/oauth/github/callback`
  * `https://app.[ドメイン]/api/oauth/github/connect/callback`

<Info>
  この画面で入力した**GitHub App name**はエールにGitHub OAuth登録時に使用されます。
</Info>

<Tip>
  `https://app.[ドメイン]/api/`はエールのAPIエンドポイントアドレスです。
</Tip>

### Webhookの無効化

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_03.png" />
</Frame>

> Webhook項目のActiveチェックを解除して無効化してください。

### 権限の付与とAPPの作成

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_04.png" />
</Frame>

> Permission項目で以下の権限を付与し、`Create GitHub App`でAPPを作成します。

<AccordionGroup>
  <Accordion title="Repository permissions (9)">
    * **Read and Write**
      * Actions
      * Administration
      * Commit statuses
      * Contents
      * Deployments
      * Issues
      * Pull requests
      * Workflows
    * **Read-only**
      * Metadata
  </Accordion>

  <Accordion title="Organization permissions (2)">
    * **Read and Write**
      * Administration
    * **Read-only**
      * Members
  </Accordion>

  <Accordion title="Account permissions (1)">
    * **Read-only**
      * Email addresses
  </Accordion>
</AccordionGroup>

## GitHub App情報の確認

> エールにGitHub OAuthを追加するにはGitHub App Nameと**4つのID・Key**が必要です。

* **App ID**
* **Client ID**
* **Cleint Secret**
* **Private Key**

### App ID、Client IDの確認

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_05.png" />
</Frame>

> 権限付与後にAppが作成されると、**App IDとClient ID**を確認できます。

### Client Secretの確認

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_06.png" />
</Frame>

> 同じ画面で`Generate a new client secret`をクリックして**Client Secret**を確認します。

### Private Keyの確認

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_08.png" />
</Frame>

> 画面下部の`Generate a private key`をクリックしてpemファイルをダウンロードします。

## GitHub Appの公開設定

> 作成されたGitHub Appの公開設定のデフォルト値は**非公開**であり、Appを作成したアカウントが所属する組織のユーザーのみがGitHub Appを使用できるようになります。GitHub組織に関係なくGitHub Appを使用できるようにするには、以下をご参照ください。

<AccordionGroup>
  <Accordion title="GitHub Appを公開状態に設定する" defaultOpen={true}>
    <Frame>
      <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/01_16.png" />
    </Frame>

    > **Advanced**メニューから**Danger Zone**セクションの`Make public`をクリックします。
  </Accordion>
</AccordionGroup>

## エール運用システムへの登録

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/ja/01_10.png" />
</Frame>

> 運用システムにアクセスし、**設定 > 認証手段 > GitHub**ドロップダウンをクリックした後、前段階で確認した値を各フィールドに入力して`適用`をクリックしてください。

* **ログイン使用** : OAuthログインの使用可否
* **APP\_NAME** : GitHub App名
* **APP\_ID** : App ID
* **CLIENT\_ID** : Client ID
* **CLIENT\_SECRET** : Client secret
* **APP\_PRIVATE\_KEY**: Private key pemファイルの値

<Info>
  適用完了後、ダッシュボードにアクセスすると**GitHubアカウントでログイン**ボタンが表示されます。

  <Frame>
    <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/ja/01_11.png" />
  </Frame>
</Info>

## GitHubアカウントでログイン

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/authentication/images/en/01_12.png" />
</Frame>

> ユーザーの最初のGitHubログイン時、`Authorize [GitHub App名]`をクリックすると登録申請が進められ、管理者承認に関するメッセージが表示されます。

<Info>
  登録申請したユーザーの承認（有効化）については、[ユーザー管理ページ](/ja/operations/user-management#%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96)をご参照ください。
</Info>

<Warning>
  ブラウザにログインされているGitHubアカウントがGitHub Appを作成したアカウントと同じ場合、上記のようなウィンドウは表示されません。
  新しいブラウザセッションで、GitHub Appを作成したアカウントとは異なるGitHubアカウントで認証を進めてください。
</Warning>

<Tip>
  [GitHub Appを非公開に設定](/ja/authentication/github#github-app)した場合、ログインしようとする他のアカウントがGitHub Appを作成したアカウントの組織に所属している必要があります。
</Tip>

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/setup/ec2/images/ja/04_25.png" />
</Frame>

> 管理者承認後にGitHubログインを試みると、**登録完了**ページが表示されます。
> スペースと名前を適切に作成し、`完了`をクリックしてください。

<Info>
  ダッシュボードアクセスと共に指定した名前のスペースが作成され、[運用システムで予め定めたデフォルト値のリソース](/ja/operations/settings#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E7%AE%A1%E7%90%86)が付与されます。
</Info>

<Tip>
  ユーザー登録および管理に関する内容は[ユーザー管理ページ](/ja/operations/user-management)をご参照ください。
</Tip>