OpenJS Architect를 사용한 서버리스 GitHub OAuth 및 시작 - 2부

이전 게시물에서 전체 로그인 예제를 배포했으며 이제 앱이 시작될 때 Lambda의 실행을 따릅니다.

프로젝트 구조 및 헬로인프라

app.arc 파일이 있습니다. 이것이 클라우드 리소스 매니페스트입니다. Architect는 이 파일을 구문 분석하여 배포해야 하는 CloudFormation을 생성합니다. 이 하나의 파일에서 프로젝트의 구조와 코드가 구성된 위치를 볼 수 있습니다.

@app
github-oauth

@static

@http
get /login
get /auth
post /logout

@tables
data
  scopeID *String
  dataID **String
  ttl TTL

@http pragma는 전체 애플리케이션에 대한 HTTP 끝점에 대한 경로와 방법을 알려줍니다. @static는 /public 폴더에 S3 버킷에서 제공되는 정적 자산이 있음을 알려줍니다.

신청 흐름

앱을 처음 로드할 때 프론트엔드는 인증을 위한 로그인 링크를 검색하기 위해 /auth에 GET 요청을 합니다. 사용 가능한 경우 계정 데이터도 반환합니다. get-auth Lambda 함수를 살펴보겠습니다.

const arc = require('@architect/functions')

async function auth(req) {
  let account = req.session &&
    req.session.account
  let clientID = process.env.GITHUB_CLIENT_ID
  let redirectURL = process.env.GITHUB_REDIRECT
  let href = `https://github.com/login/oauth/authorize?client_id=${clientID}&redirect_url=${redirectURL}`
  let payload = {
    account,
    href
  }

  return {
    body: JSON.stringify(payload)
  }
}

exports.handler = arc.http.async(auth)

먼저 세션에서 계정을 읽으려고 시도합니다.

그런 다음 비밀 클라이언트 ID로 GitHub 로그인 URL을 구성하고 이전에 설정한 GitHub OAuth 앱에서 URL을 리디렉션합니다.

마지막으로 가능한 경우 로그인 URL과 계정 데이터를 반환합니다.

프론트엔드 버튼에 전체 인증 링크가 있으면 사용자는 로그인하고 애플리케이션이 계정 세부 정보를 로드할 수 있도록 승인하도록 안내됩니다.

로그인 람다 함수

이 get-login 기능은 성공적으로 인증한 후 GitHub 앱이 리디렉션되는 위치입니다.

성공적으로 인증되면 반환된 코드를 사용하여 GitHub의 API에서 계정 데이터를 검색할 수 있습니다.

const arc = require('@architect/functions')
const github = require('./github')

async function login(req) {
  let account
  if (req.query.code) {
    try {
      account = await github(req)
    } catch (err) {
      return {
        statusCode: err.code,
        body: err.message
      }
    }
    return {
      session: {account},
      location: '/'
    }
  } else {
    return {
      location: '/'
    }
  }
}

exports.handler = arc.http.async(login)

req.query.code를 확인합니다.

그런 다음 코드를 사용하여 GitHub API에서 사용자 계정을 검색합니다.

마지막으로 계정이 있는 경우 반환합니다.

로그인/github.js 가져오기

이 github.js 파일은 GitHub에서 계정 데이터를 검색하는 데 사용됩니다.

먼저 인증 코드를 사용하여 GitHub OAuth 서비스에 POST하여 액세스 토큰을 검색합니다.

그런 다음 액세스 토큰이 권한 부여 헤더로 설정된 계정 데이터를 검색합니다.

마지막으로 계정 데이터나 수신한 모든 오류를 반환합니다.

const tiny = require('tiny-json-http')

module.exports = async function github(req) {
  try {
    let result = await tiny.post({
      url: 'https://github.com/login/oauth/access_token',
      headers: {Accept: 'application/json'},
      data: {
        code: req.query.code,
        client_id: process.env.GITHUB_CLIENT_ID,
        client_secret: process.env.GITHUB_CLIENT_SECRET,
        redirect_url: process.env.GITHUB_REDIRECT
      }
    })
    let token = result.body.access_token
    let user = await tiny.get({
      url: `https://api.github.com/user`,
      headers: {
        Authorization: `token ${token}`,
        Accept: 'application/json'
      }
    })
    return {
      token,
      name: user.body.name,
      login: user.body.login,
      id: user.body.id,
      url: user.body.url,
      avatar: user.body.avatar_url
    }
  } catch (err) {
    return {
      error: err.message
    }
  }
}

요약

GitHub OAuth에는 다음 단계가 있습니다.

GitHub 클라이언트 ID 및 리디렉션 URL로 인증 URL 생성

사용자가 해당 링크로 로그인하도록 합니다

.

계정 정보 교환에 사용되는 인증 토큰을 받습니다.