지난 게시물의 수수께끼를 파악한 후 사용자 계정을 안전하게 확인하고 게임 데이터에 연결하는 방법은 다음과 같습니다.

GitHub 사용자 이름/ID에서만 게임 소유자를 식별할 수 있습니다

.

사용자가 변경하지 않았음을 보장할 수 없기 때문에 프런트엔드에서 제공한 GitHub 사용자 이름/ID를 신뢰할 수 없습니다

.

변조에 더 강한 Firebase UID/이메일 주소는 사용할 수 없습니다. 둘 다 게임용으로 가지고 있는 것과 일치하지 않기 때문입니다

.

결국 우리는 상대적으로 신뢰할 수 있는 GitHub 액세스 토큰을 사용하여 사용자를 조회하기로 결정했습니다.

하지만 그 전에 Firebase GitHub OAuth에서 반환한 자격 증명의 형식을 조사해야 하므로 실제로 웹사이트를 구축해야 합니다. OAuth 데이터가 어떻게 생겼는지 확인하여 올바른 데이터베이스 구조를 얻습니다.

뷰 2

늘 그렇듯이 저는 백엔드 개발자이기 때문에 작업을 줄이기 위해 최대한 많은 프런트엔드 프레임워크를 사용하고 있습니다. 저는 CurateBot을 설정한 것과 동일한 프레임워크를 사용할 것이며 해당 프로세스는 해당 시리즈에서 다룹니다.

다시 말하면 Vue 2를 사용하는 이유는 바로 사용할 수 있는 구성 요소를 제공하기 위해 구성 요소 라이브러리 Vuetify에 크게 의존하여 프런트엔드 작업을 최소화하기 때문입니다. 그리고 2021년 3분기까지 Vuetify는 Vue 2만 지원하므로 Vue 2만 사용할 것입니다!

이 게시물과 일치하는 코드는 commit 7362d57에서 볼 수 있으며 Firebase 호스팅에서 호스팅되는 간단한 Vue.js 사이트입니다.

Vuetify

지난번 CurateBot용으로 만든 프로젝트를 직접 복사하여 붙여넣고 색상을 전환하겠습니다! 상상력이 부족하지만 효율적입니다.



나는 로고 색상의 하이라이트가 있는 흰색 인터페이스를 선택했지만, 이것을 만들면서 이 색상 체계가 얼마나 어울리지 않는지 깨달았습니다. 나중에 바꿔야 겠습니다. 하지만 지금은 이것으로 실행하겠습니다.

Firebase OAuth

Firebase OAuth 설정은 예전처럼 간단합니다. 프로세스에는 다음이 포함됩니다.

Firebase에서 이 설정을 켜면:


GitHub에 새 OAuth 앱 등록


(그리고 깔끔한 로고와 물건을 제공)


그리고 두 앱 간에 API 키와 콜백 URL을 교환합니다!

이전부터 이미 Vuex 사용자 처리 및 로그인 코드가 있었기 때문에 즉시 작동했고 로그인 및 자동 로그인이 진행되었을 뿐만 아니라 오른쪽 상단의 프로필 사진과 사용자 이름 표시가 Twitter에서와 동일하게 작동했습니다!

로고, 미리보기 및 파비콘

이미 로고 디자인이 있었기 때문에 Favicon Generator을 쉽게 로드하고 프로젝트의 모든 이미지를 업데이트할 수 있었습니다.

CI

마지막으로 약간의 CI를 사용하면 Master와 병합할 때 웹 사이트를 구축하고 배포할 수 있습니다. 실제로 GitHub Actions 마켓플레이스에 있는 Firebase Hosting Action에는 사이트를 임시 미리 보기 위치에 배포할 수 있는 몇 가지 추가 옵션이 있으므로 끌어오기 요청의 일부로 사이트를 살펴보고 병합할지 결정하기 전에 할 수 있습니다. live 프로덕션 배포를 수행합니다. 지금은 이 기능을 설정하지 않았으므로 로컬에서 적절하게 테스트할 수 있어야 한다는 기준으로 병합 시 live에 배포하고 있습니다.

GitHub 작업 스크립트는 다음과 같습니다.

name: Build Website

on:
  push:
    branches:
      - main
    paths:
      - 'web/**'
      - '.github/workflows/build_web.yml'

jobs:
  deploy:
    name: Deploy
    if: github.event_name == 'push'
    environment: Prod
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Build site
        working-directory: ./web
        run: |
          npm install
          npm run build

      - name: Deploy Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          firebaseServiceAccount: "${{ secrets.GCP_CREDENTIALS }}"
          projectId: meseta-lgtm
          channelId: live

Firebase:CI 키를 사용해야 하는 것에 대해 이전에 제가 틀렸다는 것을 발견했습니다. 서비스 계정에 Firebase 호스팅에 대한 추가 권한을 부여하기만 하면 클라우드 기능에 대해 설정된 기존 GCP 자격 증명을 사용하여 배포할 수 있었습니다. 좋은 소식입니다!


웹 사이트가 배포되고 OAuth가 연결되면 OAuth 페이로드를 보고 사용자가 로그인할 때 반환되는 데이터의 형식을 확인할 수 있었고 사용자 인증 유효성 검사기 엔드포인트를 설계할 수 있습니다. 그들이 말하는 사람입니다.