GitHub サインインを統合する方法: 4 つのステップガイド-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

Jan 03, 2025 pm 04:40 PM

問題

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

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

解決

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

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

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

GitHub 設定に移動: GitHub 開発者設定に移動します。
OAuth アプリ: サイドバーの OAuth アプリ をクリックします。

How To Integrate GitHub Sign-In: A Four Step Guide

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

How To Integrate GitHub Sign-In: A Four Step Guide

クライアント ID をコピーします: 作成されると、GitHub は クライアント ID を提供します。
クライアントシークレットの作成: ユーザーデータのトークンの交換などのバックエンド操作に必要な クライアントシークレットを生成します。

How To Integrate GitHub Sign-In: A Four Step Guide

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

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

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

&lt;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 = () =&gt; {
  const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&amp;redirect_uri=${REDIRECT_URI}&amp;scope=read:user`;
  window.location.href = githubAuthUrl;
};

ログイン後にコピー

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

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

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

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

  if (!code) return;

  const target = `https://backend.com/external-signup?app=${appName}&amp;accessToken=${code}&amp;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}&amp;client_secret=${GITHUB_SECRET_ID}&amp;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 を呼び出してユーザー情報を取得します。

&lt;div&gt;





<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;
}

ログイン後にコピー

How To Integrate GitHub Sign-In: A Four Step Guide