GitHub — авторизация через oauth

задняя часть GitHub

Будучи студентом, изучающим фронтенд-разработку, вам все равно нужно знать некоторые необходимые внутренние знания, наиболее прямым и базовым из которых является реализация входа в систему. Если взять GitHub в качестве примера, первый шаг — перейти на официальный сайт GitHub, чтобы установить необходимую информацию.Процесс выглядит следующим образом: Откройте официальный сайт и войдите в свою учетную запись: Откройте «Настройки» -> «Настройки разработчика».


-> Приложения OAuth -> Нажмите «Зарегистрировать новое приложение» -> Задайте имя приложения, URL-адрес домашней страницы, описание приложения, URL-адрес обратного вызова авторизации. Более подробный процесс см.официальная документация. Предыдущая картинка более наглядна. следующее:

   


Среди них некоторые персональные данные клиента, принадлежащие мне, были стерты, и друзья, которые хотят это реализовать, могут использовать свои собственные;

Потом это будет реализовываться медленно.В настоящее время многие крупные веб-сайты поддерживают сторонний вход.Как программист, частота использования GitHub довольно высока.В качестве примера возьмем GitHub. Когда дело доходит до стороннего входа в систему, мы должны говорить об Oauth.OAuth (открытая авторизация) — это открытый стандарт, который позволяет пользователям разрешать сторонним приложениям получать доступ к личным ресурсам (таким как фотографии, видео и т. д.), хранящимся на пользователя на веб-сайте, список контактов) без предоставления имени пользователя и пароля стороннему приложению. Этот протокол требует, чтобы данные, отправленные клиентом, соответствовали данным поставщика услуг (GitHub), и они могут быть переданы, если они верны и авторизованы.Процесс входа и авторизации протокола OAuth выглядит следующим образом: A. Клиент направляет пользователя на сервер аутентификации; B. Пользователь решает, авторизовать ли клиента; C. Если пользователь авторизован, сервер аутентификации направляет пользователя на URI перенаправления, указанный клиентом, и дает код в хэше часть URI; D. Браузер отправляет запрос на сервер ресурсов для подачи заявки на токен; E. Получите токен и возьмите токен для выполнения операции.

Предыдущий кусок кода:

const router = require('koa-router')()
const config = require('../config')
const fetch = require('node-fetch')
const routes = router    
    .get('/login', async (ctx) => {
        // 去到github授权页
        const dataStr = (new Date()).valueOf();
        var path = 'https://github.com/login/oauth/authorize';
        path += '?client_id=' + config.client_id;
        path += '&scope=' + config.scope;
        path += '&state=' + dataStr;
        console.log(path)
        // authorize 授权 (注册/申请)一下我们的应用
        ctx.redirect(path)  // 送到授权的中间页
    })
    .get('/oauth/callback', async (ctx) => {
        const code = ctx.query.code
        let path = 'https://github.com/login/oauth/access_token';
        const params = {
            client_id: config.client_id,
            client_secret: config.client_secret,
            code: code
        }
        await fetch(path, {
            // 没有fetch,需要装node-fetch
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(params)
        })
        .then(res => {
            // console.log(res)
            return res.text()    // 获得到的是一个二进制流，转换成文本
        })
        .then(body => {
            const args = body.split('&');
            let arg = args[0].split('=');
            const access_token = arg[1];
            console.log(access_token);
            return access_token;
        })
        .then(async(token) => {
            const url = 
            'https://api.github.com/user?access_token=' + token // token就是oauth令牌环
            console.log(url)
            await fetch(url)
                .then(res => {
                    return res.json()
                })
                .then(res => {
                    console.log(res)
                    ctx.body = res
                })
        })
    })

module.exports = routes;

Код страницы конфигурации выглядит следующим образом:

module.exports = {    
'client_id': '1fc534c9a4*************',    
'client_secret': 'f5380d4*****************aeb2027ac87b6dc6',    
'scope': ['user']  // 授权范围
}

Наконец, последняя волна рендеров:

 



См. полный кодGitHub

Процесс клиентский: отправить данные на GitHub для проверки, продолжить авторизацию после проверки, подать заявку на получение токена, а затем уже после получения токена можно совершать другие операции. .

Я надеюсь, что эта статья будет вам полезна.Если у вас есть какие-либо комментарии и идеи, вы можете оставить сообщение внизу этой статьи.


Категории