GitHub サインインを統合する方法: 4 つのステップ ガイド

問題

ユーザーがアプリごとに一意のユーザー名とパスワードを必要としていた時代を覚えていますか?次に進む時が来ました。

開発者や技術に精通したユーザーにとって最適な GitHub サインインを統合して、アプリへのログインを簡単にしましょう。

解決

GitHub OAuth を使用すると、ユーザーをシームレスに認証し、GitHub の API 経由でパブリック プロファイルや追加データにアクセスできます。

これをフロントエンドとバックエンドの管理可能な手順に分割してみましょう。

---

ステップ 1: GitHub にアプリを登録する

1. GitHub 設定に移動: GitHub 開発者設定に移動します。

2. OAuth アプリ: サイドバーの OAuth アプリ をクリックします。

1. 新しい OAuth アプリを登録します:
   • ホームページ URL: http://localhost:3000 (またはアプリのローカル URL) を使用します。
   • 認可コールバック URL: http://localhost:3000 (または GitHub サインインを統合する予定のデプロイメント URL) を使用します。これらは後で更新できます。

1. クライアント ID をコピーします: 作成されると、GitHub は クライアント ID を提供します。

2. クライアント シークレットの作成: ユーザー データのトークンの交換などのバックエンド操作に必要な クライアント シークレットを生成します。

---

ステップ 2: フロントエンドの実装

GitHub サインイン ボタンを追加する

次の HTML と CSS を使用して、GitHub ログイン ボタンを表示します:

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

ログインボタンのクリックを処理する

JavaScript を使用してユーザーを GitHub の認証ページにリダイレクトします:

const handleGithubLogin = () => {
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=read:user`;
  window.location.href = githubAuthUrl;
};

GITHUB_CLIENT_ID と REDIRECT_URI を実際の値に置き換えます。

---

ステップ 3: GitHub のリダイレクトの処理

GitHub は ?code= を使用してアプリにリダイレクトします。 URLにあります。このコードを使用してアクセス トークンを交換します。

useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const code = params.get("code");

  if (!code) return;

  const target = `https://backend.com/external-signup?app=${appName}&accessToken=${code}&provider=github`;
  callBackendAPI("GET", target);
}, []);

これにより、コードがバックエンドに送信され、アクセス トークンと安全に交換されます。

---

ステップ 4: バックエンドの実装

アクセストークンの認証コードを交換する

GitHub の OAuth トークン エンドポイントを使用します:

const GITHUB_ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token';

const url = `${GITHUB_ACCESS_TOKEN_URL}?client_id=${GITHUB_CLIENT_ID}&client_secret=${GITHUB_SECRET_ID}&code=${request.body.code}`;

const response = await fetch(url, {
  method: "GET",
  headers: {
    Accept: "application/json",
    "Accept-Encoding": "application/json",
  },
});

const githubUserData = await response.json();
const accessToken = githubUserData.access_token;

GITHUB_CLIENT_ID と GITHUB_SECRET_ID をステップ 1 の値に置き換えます。

ユーザーデータの取得

アクセス トークンを使用して、GitHub のユーザー API を呼び出してユーザー情報を取得します。

<div>





<pre class="brush:php;toolbar:false">.github-signin-container {
  background-color: #000;
  transition: background-color 0.3s ease;
  border-radius: 6px;
  border: none;
}

.github-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
  width: 100%;
}

.github-signin-btn:hover {
  background-color: #333;
}

.github-signin-btn .github-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.github-signin-btn span {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

このデータを使用して、データベース内のユーザーを作成または更新します。

---

TL;DR

1. GitHub にアプリを登録して、クライアント ID と クライアント シークレット を取得します。
2. フロントエンドに GitHub サインイン ボタンを追加します。
3. ユーザーを GitHub の OAuth ページにリダイレクトしてログインします。
4. 認証コードを使用してリダイレクトを処理します。
5. バックエンドでコードをアクセス トークンに交換します。
6. トークンを使用して、GitHub の API からユーザー データを取得します。

---

ボーナス: LiveAPI で生活が楽になります

私はコードベースから安全で美しい API ドキュメントを直接生成する LiveAPI というツールに取り組んでいます。ボーナス: API を実行し、任意の言語でリクエスト スニペットを生成できます!

試してみて、アプリに集中しながらドキュメントの時間を節約してください。コーディングを楽しんでください!