Facebook, Google, GitHub 및 수천 가지 이상의 API의 공통점이 무엇인지 아십니까? OAuth를 사용하여 요청을 인증합니다.

OAuth, 특히 OAuth 2.0은 이제 어디에나 있습니다. 이는 개발자가 필요한 데이터를 세분화할 수 있도록 지원하는 매우 강력한 인증 프레임워크입니다.

반응 + OAuth = 🤔

OAuth 기반 API와 관련하여 React 앱은 요청을 보내는 데 적합하지 않습니다. API 키를 코드베이스 깊숙이 숨길 수는 없습니다. 누군가는 쉽게 찾을 것입니다.

해야 할 일은 타사 API에 대한 요청을 프록시하는 일부 백엔드 서비스를 설정하는 것입니다. 재미있을 수 있지만 빠른 API 호출을 위한 긴 프로세스입니다.

For example, you will need a backend to protect your API keys. Declare routes, understand packages (like Passport.js), proxying requests, and dozens of more actions. It doesn't have to be so hard.

오늘 저는 제가 적극적으로 기여하고 있는 오픈 소스 프로젝트를 선보일 것입니다. Pizzly이라고 하며 단일 페이지 응용 프로그램에서 API를 사용하는 데 많은 도움이 됩니다.

간단한 데모를 통해 어떻게 보이는지 살펴보겠습니다.


응용 프로그램에서 어떻게 할 수 있는지 궁금하십니까? 다음은 전체 가이드입니다.

리액트 스켈레톤 🦴

API에 대한 API 호출 방법을 배우려면 먼저 React 스켈레톤이 필요합니다. 최소한 필요한 것은 OAuth2를 사용하여 API 끝점을 사용하는 앱입니다.

GitHub 계정이 있을 수 있으므로 해당 API를 사용하지만 OAuth2(Slack, Salesforce, ...) 또는 OAuth1(Twitter, Trello, ...)을 사용하는 다른 API로 쉽게 전환할 수 있습니다.

응용 프로그램은 다음과 같습니다.

import React, { useState } from 'react'
import Pizzly from 'pizzly-js'
import Profile from './Profile'

const App = () => {
  const [profile, setProfile] = useState()

  return (
    <div className="App">
      <h1>Hello!</h1>
      <p>
        Click the button bellow to retrieve your GitHub profile using{' '}
        <a target="_blank" rel="noopener noreferrer" href="https://github.com/Bearer/Pizzly">
          Pizzly
        </a>
        .
      </p>
      <button onClick={connect}>Retrieve your GitHub profile</button>
      {profile && <Profile profile={profile} />}
    </div>
  )
};

export default App;

사용자 프로필을 가져올 때 일반 JSON으로 렌더링하는 매우 기본적인 React 애플리케이션입니다. 그렇지 않으면 사용자에게 GitHub에 연결하도록 요청합니다.

인증🔐

여기서는 위에서 몇 줄에 대해 말씀드린 오픈 소스 프로젝트인 Pizzly 을 사용할 것입니다.

콜백으로 처리할 수 있는 프런트엔드에서 인증 흐름을 트리거하는 .connect() 메서드를 제공합니다. 리디렉션 URL을 생성하거나 백엔드를 처리할 필요가 없습니다.

Pizzly와 함께 사용하기 위해 위의 스켈레톤을 업데이트하는 방법을 살펴보겠습니다.

먼저 Pizzly를 초기화해야 합니다.

// Initialize Pizzly
const pizzly = new Pizzly({
  host: PIZZLY_HOSTNAME,
  publishableKey: PIZZLY_PUBLISHABLE_KEY
})

const github = pizzly.integration('github', {
  setupId: PIZZLY_SETUP_ID_GITHUB_DEMO_APP
})

그런 다음 인증 흐름을 트리거하는 새connect() 메서드를 추가합니다.

const App = () => {

  // ...

  /**
   * The connect method lets us authenticate a user
   * to our GitHub application (i.e. the OAuth dance)
   */

  const connect = () => {
    github
      .connect()
      .then(({ authId }) => {
        console.log('Sucessfully connected!', authId)
        fetchProfile(authId)
      })
      .catch(console.error)
  }

  // ...
};

export default App;

그게 다야. 애플리케이션에 몇 줄의 코드만 있으면 모든 OAuth 기반 API 💪를 처리할 준비가 된 것입니다.

구성 🤖

Pizzly는 자체 호스팅 OAuth 관리자입니다. 이것은 예를 들어 Heroku와 같은 어딘가에 호스트해야 함을 의미합니다(30초 소요). 일단 호스팅되면 GitHub 통합을 구성하는 Pizzly의 대시보드에 액세스할 수 있습니다.



지금 자신의 Pizzly 인스턴스를 배포하려면 다음 버튼 중 하나를 클릭하십시오.


헤로쿠
플랫폼.sh






그런 다음 GitHub API를 선택합니다. 그리고 애플리케이션의 클라이언트 ID, 클라이언트 자격 증명 및 범위를 저장하여 구성합니다. this guide을 따라 GitHub에서 가져올 수 있습니다.

Pizzly 인스턴스가 생성되고 GitHub 애플리케이션을 구성했으면 다음 값을 사용하여 React 애플리케이션을 편집합니다.

// Pizzly environment variables, make sure to replace
// these with those of your own Pizzly instance
const PIZZLY_HOSTNAME = "";
const PIZZLY_PUBLISHABLE_KEY = "";
const PIZZLY_SETUP_ID_GITHUB_DEMO_APP = "";

최소한 필요한 것은 PIZZLY_HOSTNAME 입니다. 다른 두 개는 선택 사항입니다.

인증된 API 요청 🎉

자, 우리는 이미 구성에 몇 분을 할애했습니다. 재미있는 이야기로 돌아가 봅시다.

GitHub API provides a handy endpoint ( /user ) 인증된 사용자의 프로필을 검색합니다. 이 끝점은 OAuth 인증을 사용하므로 좋은 사용 사례처럼 보입니다.

이를 위해 애플리케이션에 새 메서드를 추가해 보겠습니다.

const App = () => {
  // ...

  /**
   * The fetchProfile method retrieves the authenticated
   * user profile on GitHub (the request is proxied through Pizzly)
   */

  const fetchProfile = async (authId) => {
    await github
      .auth(authId)
      .get("/user")
      .then((response) => response.json())
      .then((json) => setProfile(json));
  };

  // ...
};

export default App;

그리고 짜잔!

NB: To authenticate the request, we have provided an authId. It's like a user identity for that particular API. It was generated (and saved) with the connect() method.

무엇 향후 계획? 💡

이제 React를 사용하여 OAuth 기반 API에 대해 사용자를 인증하는 방법을 알게 되었습니다. Vue.js를 선호한다면 .

all the most famous APIs에 쉽게 적응할 수 있습니다. 백엔드 경로를 만들거나 OAuth의 모든 단일 개념을 이해할 필요가 없습니다. Pizzly가 이를 처리합니다(전문가의 경우 Pizzly가 access_token 를 자동으로 새로 고칩니다).

다시 한 번 have a look at the CodeSandbox 코드를 완전히 이해하고 아래 주석에서 생각/질문을 공유하십시오.

이 튜토리얼이 마음에 드셨다면 GitHub의 Pizzly에 별표를 추가해 주세요. 링크는 다음과 같습니다. https://github.com/Bearer/Pizzly .