간단한 3단계로 모든 소셜 로그인으로 React 앱 만들기

"액세스"는 무언가를 얻거나 사용할 수 있는 능력을 의미합니다. 정보 기술의 맥락에서 "액세스"는 컴퓨터 또는 컴퓨터 네트워크에 연결하거나 이를 사용할 수 있는 능력을 의미합니다. "액세스"는 컴퓨터 시스템이나 네트워크 내에서 데이터를 입력, 보기 또는 편집하는 기능을 의미할 수도 있습니다.

액세스 제어에는 물리적, 논리적 및 관리의 세 가지 유형이 있습니다. 물리적 액세스 제어는 건물, 방 또는 서버실과 같은 물리적 공간에 대한 액세스를 제한합니다. 논리적 액세스 제어는 컴퓨터 시스템 또는 네트워크에 대한 액세스를 제한합니다. 관리 액세스 제어는 컴퓨터 시스템 또는 네트워크 관리에 대한 액세스를 제한합니다.

액세스 제어는 무단 액세스로부터 데이터와 리소스를 보호하기 때문에 중요합니다. 무단 액세스는 데이터 위반, 데이터 손실 또는 도난으로 이어질 수 있습니다. 또한 서비스 중단, 리소스 오용 또는 권한 있는 정보의 무단 사용으로 이어질 수 있습니다.

https://www.npmjs.com/package/@eartho/one-client-react

이 앱의 경우 Eartho One을 사용하여 높은 전환 경험을 제공하고 Firebase Auth를 사용하여 사용자 로그인 및 인증을 관리할 것입니다. 이 시나리오에서 내 앱은 인증 토큰을 얻기 위해 Firebase 인증과 직접 통신해야 하며 그 후에 내 백엔드로 보내는 모든 요청에 ​​이 토큰을 추가합니다.

재료
먼저 React 앱을 만들어야 합니다. 나는 당신이 이것을하는 방법을 이미 알고 있다고 가정하지만 뭔가 명확하지 않은 경우 여기에 가이드가 있습니다.
https://reactjs.org/docs/getting-started.html

Firebase도 설정해야 합니다. 공식 Firebase 문서에서 이에 대한 지침을 찾을 수 있습니다.

단계별 지침

Eartho Creators에서 액세스 포인트 생성
1A. Eartho Creators

에 연결하여 시작

2B. 크리에이터 홈 화면에서 "프로젝트 만들기"를 클릭하여 첫 번째 엔터티를 만듭니다. 엔터티는 웹 사이트, 앱, 이벤트 또는 액세스를 관리하려는 모든 것이 될 수 있습니다.

3C. 엔터티를 만든 후 엔터티 페이지에 "액세스 만들기"가 표시됩니다. 관리할 액세스 포인트를 생성하여 시작하십시오. "로그인"또는 "프리미엄 패키지"또는 사용자/클라이언트에게 무언가에 대한 액세스를 제공하는 모든 것이 될 수 있습니다.

앱에 Eartho 통합
앱에 Eartho 추가

npm i @eartho/one-client-react

구성

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { EarthoOneProvider } from '@eartho/one-client-react';
import App from './App';ReactDOM.render(
  <EarthoOneProvider
    clientId="YOUR_EARTHO_CLIENT_ID"
  >
    <App />
  </EarthoOneProvider>,
  document.getElementById('app')
);

사용 시작

// src/App.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';function App() {
  const {
    isLoading,
    isConnected,
    error,
    user,
    connectWithPopup,
    logout,
  } = useEarthoOne();if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }if (isConnected) {
    return (
      <div>
        Hello {user.displayName}{' '}
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
        </button>
      </div>
    );
  } else {
    return <button onClick={connectWithPopup}>Log in</button>;
  }
}export default App;

(선택 사항) Eartho를 서버/Firebase 인증/Aws에 통합
https://eartho.world/

https://eartho-g.gitbook.io/eartho-docs/quick-start/step-3-optional-integrating-eartho-into-your-server

그게 다야!
완료

https://www.npmjs.com/package/@eartho/one-client-react