Cara Mengintegrasikan Log Masuk GitHub: Panduan Empat Langkah

Masalah

Ingat hari apabila pengguna memerlukan nama pengguna dan kata laluan unik untuk setiap apl? Sudah tiba masanya untuk meneruskan.

Mari jadikan log masuk ke apl anda lebih mudah dengan menyepadukan Log Masuk GitHub, pilihan yang bagus untuk pembangun dan pengguna yang mahir teknologi.

Penyelesaian

GitHub OAuth membolehkan anda mengesahkan pengguna dengan lancar dan mengakses profil awam mereka atau data tambahan melalui API GitHub.

Mari pecahkan ini kepada langkah yang boleh diurus untuk bahagian hadapan dan belakang anda.

---

Langkah 1: Mendaftarkan Apl Anda di GitHub

1. Pergi ke Tetapan GitHub: Navigasi ke Tetapan Pembangun GitHub.

2. Apl OAuth: Klik pada Apl OAuth dalam bar sisi.

1. Daftar Apl OAuth Baharu:
   • URL Halaman Utama: Gunakan http://localhost:3000 (atau URL setempat apl anda).
   • URL Panggilan Balik Kebenaran: Gunakan http://localhost:3000 (atau URL penempatan tempat anda bercadang untuk menyepadukan Log Masuk GitHub). Anda boleh mengemas kini ini kemudian.

1. Salin ID Pelanggan: Setelah dibuat, GitHub akan memberikan ID Pelanggan.

2. Buat Rahsia Pelanggan: Hasilkan Rahsia Pelanggan yang diperlukan untuk operasi bahagian belakang, seperti menukar token untuk data pengguna.

---

Langkah 2: Pelaksanaan Frontend

Tambah Butang Log Masuk GitHub

Gunakan HTML dan CSS berikut untuk memaparkan butang log masuk 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;
}

Kendalikan Klik Butang Log Masuk

Gunakan JavaScript untuk mengubah hala pengguna ke halaman kebenaran 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;
};

Ganti GITHUB_CLIENT_ID dan REDIRECT_URI dengan nilai anda.

---

Langkah 3: Mengendalikan Ubah Hala GitHub

GitHub akan mengubah hala semula ke apl anda dengan ?code= dalam URL. Gunakan kod ini untuk menukar token akses.

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);
}, []);

Ini menghantar kod ke bahagian belakang anda untuk menukarnya dengan selamat dengan token akses.

---

Langkah 4: Pelaksanaan Bahagian Belakang

Kod Kebenaran Pertukaran untuk Token Akses

Gunakan titik akhir token OAuth GitHub:

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;

Ganti GITHUB_CLIENT_ID dan GITHUB_SECRET_ID dengan nilai dari Langkah 1.

Ambil Data Pengguna

Dengan token akses, hubungi API Pengguna GitHub untuk mendapatkan maklumat pengguna:

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

Gunakan data ini untuk mencipta atau mengemas kini pengguna dalam pangkalan data anda.

---

TL;DR

1. Daftarkan apl anda di GitHub untuk mendapatkan ID Pelanggan dan Rahsia Pelanggan.
2. Tambahkan butang Log Masuk GitHub pada bahagian hadapan anda.
3. Ubah hala pengguna ke halaman OAuth GitHub untuk log masuk.
4. Kendalikan ubah hala dengan kod kebenaran.
5. Tukar kod untuk token akses pada bahagian belakang anda.
6. Gunakan token untuk mengambil data pengguna daripada API GitHub.

---

Bonus: LiveAPI Menjadikan Kehidupan Anda Lebih Mudah

Saya sedang mengusahakan alat yang dipanggil LiveAPI yang menjana dokumentasi API yang selamat dan cantik terus daripada pangkalan kod anda. Bonus: Ia membolehkan anda melaksanakan API dan menjana coretan permintaan dalam mana-mana bahasa!

Cubalah dan jimatkan masa pada dokumentasi sambil memfokus pada apl anda. Selamat mengekod!