Как настроить экспресс с Github Auth0

выражать

Первое, что я рекомендую, это создать папку с названием вашего проекта. Моя папка называется express-example.

Затем мы открываем терминал в этой папке и набираем npm init, чтобы настроить наш package.json. Если вы не знаете, как использовать npm init, я оставляю вам ссылку на документацию здесь.

Обычно npm init задает много вопросов, небольшая хитрость заключается в том, что npm init -y генерирует его прямо без вопросов.

Наконец у вас будет что-то вроде этого,

Затем мы собираемся установить express, используяnpm install express — сохранить.

После его выполнения мы можем увидеть package.json с помощью команды cat package.json, чтобы убедиться, что мы иметь зависимость.

Мы открываем этот проект в нашем любимом редакторе кода, я лично использую VSCode, а затем создаем на нем файл index.js.

Теперь давайте импортируем express и запустим его, например, на localhost:3000.

Я очень рекомендую установить nodemonсnpm install nodemon — сохраните, потому что я всегда забывал перезапускать свой экспресс-сервер, nodemon просто делайте это каждый раз, когда сохраняете.

Если мы запустим приложение с помощью nodemon index.js, вы увидите в консоли «Пример приложения, прослушивающего порт 3000!”.

Теперь пришло время настроить auth0 в github.

Настройка Auth0 в Github

Чтобы добавить новое приложение, авторизуйтесь на GitHub и перейдите в приложения OAuth в настройках разработчика. Далее нажмите Зарегистрировать новое приложение.

Оказавшись здесь, он просит нас ввести имя приложения, URL-адрес домашней страницы и один URL-адрес обратного вызова авторизации.

Я заполнил так:

Название нашего приложения, я поставил название нашего проекта «экспресс-пример».

В URL-адресе домашней страницы я указал маршрут нашей домашней страницы «http://localhost:3000».

А в URL-адресе обратного вызова авторизации я указал http://localhost:3000/user/signin/callback.

Таким образом, когда мы делаем запрос GET к этому обратному вызову (http://localhost:3000/user/signin/callback) и наше приложение успешно проходит аутентификацию, GitHub возвращает временный код, который будет использоваться для запроса POST, необходимого для получения access_token.

Здесь у вас есть ссылка на то, что объясняет это лучше.

Затем нажмите на регистрацию приложения. У нас получится вот такой экран.
Где наиболее важными будут идентификатор клиента и секрет клиента.

Теперь нам нужно создать запрос к нашему обратному вызову (http://localhost:3000/user/signin/callback), чтобы получить код.

Вернуться к нашему приложению

Теперь нам нужно дать пользователю авторизацию на Github, для этого нам нужно создать файл index.html в нашем приложении.

Затем нам нужна ссылка на Github с вашим идентификатором клиента https://github.com/login/oauth/authorize?&client_id=‹your_client_id›

Нам нужно отображать страницу index.html, когда мы переходим на нашу домашнюю страницу («localhost:3000»), поэтому нам нужно добавить в index.js это:

Если мы перейдем к («localhost:3000»), мы увидим что-то вроде этого

Если мы нажмем Authorize, мы увидим:

Нам просто нужно нажать Авторизовать ‹your_github_username› и Github перенаправит на наш обратный вызов (http://localhost:3000/user/signin/callback) с временным кодом на URL.

Но прежде чем мы продолжим, если мы посмотрим на настройки экспресс-примера нашего Github Auth Application, мы увидим:

Аутентификация работает.

POST-запрос для получения ACCESS_TOKEN

Теперь мы собираемся получить код из URL-адреса обратного вызова и использовать его для получения access_token. Добавьте это в наш файл index.js. Мы берем код из URL.

Если вы повторите процесс и перейдете к «localhost: 3000» и нажмете на авторизацию, теперь вы увидите что-то вроде этого:

Этот код является временным и меняется через определенное время, поэтому мы будем использовать его, чтобы сделать наш POST-запрос для получения access_token.

Я буду использовать axios для выполнения POST-запроса, вы можете установить его с помощью npm install axios — сохранитеи не забывайте импортироватьна index.js.

Теперь просто отправьте запрос с помощью axios с кодом, секретным клиентом и идентификатором клиента на «https://github.com/login/oauth/access_token».

И вы получите access_token, этот access_token можно использовать для любого вызова API Github, который требует авторизации, например, пометить репозиторий.

Я загружаю весь проект, если кто-то потерялся, в это репозиторий в моем Github.

Я часто делюсь советами по программированию в моем Instagram, вы можете поздороваться со мной в моем Twitterили посмотреть, как я программирую в моем Гитхаб.

Большое спасибо и продолжайте кодировать!!!

Йоэль