После нескольких попыток проб и ошибок я наконец смог добавить еще один вариант входа в свое веб-приложение с помощью 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