ホームページ ウェブフロントエンド jsチュートリアル GitHub サインインを統合する方法: 4 つのステップ ガイド

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

Jan 03, 2025 pm 04:40 PM

問題

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

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

解決

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

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


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

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

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

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

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

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

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

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

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


ステップ 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 = () =&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

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


TL;DR

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

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

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

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

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

以上がGitHub サインインを統合する方法: 4 つのステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

See all articles