После нескольких попыток проб и ошибок я наконец смог добавить еще один вариант входа в свое веб-приложение с помощью GitHub OAuth, и в этом руководстве мы узнаем, как это сделать. Честно говоря, я действительно не знаю, как реализовать это в обычном JavaScript или другом сервисе, потому что я использую Supabase, чтобы это происходило в реакции. А теперь приступим!

1. Создать проект

Хорошо, первым делом зайдите в supabase.io, начните свой проект в правом верхнем углу и сразу войдите в систему. Когда это будет сделано, нажмите Новый проект, Новая организация.

Введите любое название организации, которое вам нравится.

После этого вам будет предложено открыть другую подобную страницу. Укажите имя проекта и пароль для базы данных и выберите ближайший к вам регион для повышения производительности.

После создания нового проекта он некоторое время будет загружаться, затем откроется эта страница.

2. Включите аутентификацию GitHub.

На левой панели выберите аутентификацию и настройку. В разделе «Внешние поставщики OAuth» включите GitHub в положение on, как это, и он попросит вас ввести идентификатор клиента и секрет GitHub.

Теперь перейдите к своей учетной записи GitHub, настройте и выберите Настройки разработчика.

Затем выберите приложения OAuth.

Нажмите «Новое приложение OAuth» справа, и появится форма.

Заполните все необходимые данные и для URL-адреса обратного вызова авторизации на панели инструментов Supabase перейдите к настройке, API, скопируйте URL-адрес в раздел Config, вставьте его в форму GitHub и добавьте /auth/v1/callback после URL-адреса. Так будет как https://<project-ref>.supabase.co/auth/v1/callback.

После успешного выполнения вы увидите идентификатор клиента и вставите его в Supabase. Чтобы получить секреты GitHub, нажмите «Создать новый секрет клиента».

Как только вы получите секретный токен, сразу же вставьте его в Supabase и нажмите «Сохранить».

3. Добавьте код Supabase в свое приложение.

Теперь давайте инициализируем Supabase, установив ее в наше приложение React. Введите npm i @supabase/supabase-js в свой терминал. Как только это будет сделано, создайте config.js файл и введите его в него.

import { createClient } from '@supabase/supabase-js'
// Create a single supabase client for interacting with your database 
const supabase = createClient("PROJECT_URL", "PROJECT_ANON_KEY")
export default supabase;

PROJECT_URL - это тот же URL-адрес из настроек, API, URL-адрес в разделе конфигурации на панели инструментов Supabase, а PROJECT_ANON_KEY по-прежнему тот же, из настроек, API, ключей Project API и выбора анонимного ключа.

Внутри события onclick введите этот код, чтобы аутентификация GitHub работала.

import supabase from "./config";
const LoginWithGithub = async () => {
   const { user, session, error } = await supabase.auth.signIn({
      provider: 'github'
   })
}

И вот оно! В вашем приложении теперь есть новый вариант входа в систему с помощью GitHub. Надеюсь, эта статья оказалась для вас полезной. Спасибо за чтение!

Больше контента на plainenglish.io