웹 응용 프로그램에 개념 로그인 사용 추가 방법

안녕하세요!이것은 this tutorial의 연속이다. 우리는 간단한 React/Express를 만들었다.js 응용 프로그램, 폼 응답을 개념 데이터베이스에 직접 저장합니다.이 부분에 대해 우리는 이전의 내용을 계속할 것이다.우리는 어떻게 사용자가 그들의 개념 계정을 연결해서 우리가 프로그래밍 방식으로 그들의 데이터를 얻거나 그들의 작업 구역에 개념 페이지에 대한 응답을 저장할 수 있도록 허용합니까?사실 간단해!
1. 당신의 통합을 공공 통합으로
우선 https://notion.so/my-integrations로 넘어가서 이전 강좌'기본 폼'에서 만든 통합을 선택하거나 새로운 통합만 만듭니다.

아래로 스크롤하여 통합을 "공용 통합"으로 변경이것은 이러한 통합을 통해 다른 사용자들이 자신의 계정뿐만 아니라 자신의 계정에 계정을 연결할 수 있다는 것을 의미한다.

공공 통합을 만들기 위해서는 당신 회사에 대한 정보를 작성해야 합니다.만약 당신이 아직 자신의 사이트를 구축하지 않았다면, 당신은 당신의 개념적인 페이지 URL을 사용할 수 있습니다. 예를 들어 당신의 홈페이지나 프라이버시 정책 사이트 등입니다.개념 페이지를 신속하게 만들고 텍스트를 써서 여기에 삽입하기만 하면 된다.또한 "http://localhost:3000”를 추가하여 URI를 리디렉션해야 합니다. 이것은 매우 필요합니다.

모든 내용을 제출한 후 아래로 스크롤해서 저장 단추를 누르십시오.이렇게 하면, 맨 위로 스크롤하면, 'OAuth 클라이언트 ID' 와 'OAuth 클라이언트 기밀' 을 받을 수 있으며, 프로젝트에서 사용해야 합니다.

2. React 애플리케이션에 로그인 링크 추가
자, 이제 우리는 이것들이 있으니 건설을 시작합시다.이전 강좌에서 만든 '폼 도구' 프로그램으로 돌아가서 (npx create react app form tool로 새로운react 프로그램을 만들 수도 있습니다) 이 프로그램으로 이동합니다.js 파일을 만들고 다음 코드를 붙여넣으십시오.나는 잠시 후에 그것이 어떻게 일을 하는지 설명할 것이다.

// form-tool/src/App.js

import { useEffect, useState } from "react";

// The OAuth client ID from the integration page!
const oauth_client_id = "02e1f9d8-...";

function App() {
  const [dbs, setdbs] = useState([]);

  // When you open the app, this doesn't do anything, but after you sign into Notion, you'll be redirected back with a code at which point we call our backend.
  useEffect(() => {
    const params = new URL(window.document.location).searchParams;
    const code = params.get("code");
    if (!code) return;
    fetch(`http://localhost:3002/login/${code}`).then(async (resp) => {
      setdbs(await resp.json());
    });
  }, []);

  return (
    <div>
      <a
        style={{ display: "block" }}
        href={`https://api.notion.com/v1/oauth/authorize?client_id=${oauth_client_id}&response_type=code&owner=user`}
      >
        Connect to Notion
      </a>
      {dbs.map((db) => (
        <div
          style={{
            display: "inline-flex",
            whiteSpace: "pre",
            border: "1px solid black",
            marginBottom: 10,
          }}
        >
          {JSON.stringify(db, null, 2)}
        </div>
      ))}
    </div>
  );
}

export default App;

npm run start를 실행할 때 다음과 같은 간단한 사이트를 볼 수 있습니다.

'개념에 연결' 을 눌렀을 때, 이 로그인 페이지로 가져가야 합니다.

일단 네가 모든 내용을 기입하면, 우리는 우리의 사이트로 다시 지정되어 아무 일도 일어나지 않을 것이다.우리도 백엔드를 업데이트해야 하기 때문이다.그 전에 무슨 일이 일어났는지 설명해 봅시다.
본질적으로 OAuth 클라이언트 ID로 개념 사이트에 대한 링크를 만들어 개념 계정에 로그인할 수 있도록 합니다.작업 영역과 방문하고자 하는 페이지를 선택하면 URL http://localhost:3000 으로 리셋됩니다. 통합 페이지의 리셋 URI 필드에 놓아야 합니다.현재 주의해야 할 것은 조회 매개 변수에 비밀번호가 있기 때문에 전체 URL은http://localhost:3000?code=SECRET_CODE…이다.이 암호를 사용하면 사용자의 작업 영역에 접근할 수 있습니다.
절차는 다음과 같다. 당신은 http://localhost:3000를 열고 클릭하고 https://www.notion.so/install-integration?…로 이동하면 모든 내용을 기입하면 http://localhost:3000?code=CODE_VALUE…로 보내지고 코드는 손에 있다.이 코드가 있으면, 우리는 백엔드를 호출해서 진정한 마법을 시작할 것이다.
3. 액세스 토큰을 생성하고 API를 사용하여 사용자 정보 얻기
자, 이제 우리는 이미 로그인하여 코드를 얻었습니다. 이제 우리는 그것을 어떻게 처리해야 합니까?우리는 백엔드에 새로운 단점을 만들어야 한다.방금 앞에서 얻은 코드를 '접근 영패' 로 바꾸면 실제적으로 사용할 수 있습니다.이 영패가 있으면 우리는 사용자의 데이터베이스로 돌아갈 것이지만, 이론적으로 우리는 이 API로 우리가 좋아하는 모든 일을 할 수 있다."폼 도구 백엔드"급행열차로 가세요.js 프로젝트 (새 Express.js 프로젝트를 만들 수도 있습니다) 를 만들고 파일 프로그램으로 이동합니다.js를 다음 코드에 붙여 넣으십시오.이전에 검색한 통합 페이지의 값 업데이트 변수를 사용해야 합니다.

// form-tool-backend/app.js

const express = require("express");
const axios = require("axios");
const cors = require("cors");
const app = express();
const port = 3002;

// The OAuth client ID from the integration page!
const notionClientId = "02e1f9d8-...";

// The OAuth client secret from the integration page!
const notionClientSecret = "secret_...";

app.use(cors());
app.use(express.json());
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

app.get("/login/:code", async (req, res) => {
  const { code } = req.params;

  // Generate an access token with the code we got earlier and the client_id and client_secret we retrived earlier
  const resp = await axios({
    method: "POST",
    url: "https://api.notion.com/v1/oauth/token",
    auth: { username: notionClientId, password: notionClientSecret },
    headers: { "Content-Type": "application/json" },
    data: { code, grant_type: "authorization_code" },
  });

  // You want to save resp.data.workspace_id and resp.data.access_token if you want to make requests later with this Notion account (otherwise they'll need to reauthenticate)

  // Use the access token we just got to search the user's workspace for databases
  const { data } = await axios({
    method: "POST",
    url: "https://api.notion.com/v1/search",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${resp.data.access_token}`,
      "Notion-Version": "2021-08-16",
    },
    data: { filter: { property: "object", value: "database" } },
  });

  res.json(data?.results);
});

무슨 일이 있었죠?우리가 방금 전단에서 얻은 코드를 후단으로 보낼 것입니다. 코드와 우리의 OAuth 클라이언트 ID와 OAuth 클라이언트 기밀을 통해 우리는 진정으로 중요한 '접근 영패' 를 생성할 수 있습니다.따라서 우리는 단지 하나의 코드를 사용한 후에 예쁜 '접근 영패' 를 만들었을 뿐, 개념적인 API와 사용자의 작업 영역을 상호작용할 수 있다."access token"기능은 매우 강하기 때문에 백엔드에만 숨겨야 하며 절대로 누설해서는 안 된다."접근 영패"와 "작업 영역 id"를 저장합니다. 이것은 첫 번째 API 호출에서 방금 로그인한 사용자 id에 대한 응답입니다.언제든지 개념 API를 호출하려면 "access token"을 검색하면 개념에 다시 로그인할 필요가 없습니다.
"access token"을 사용하면 개념 작업 영역에서 사용자의 데이터베이스를 검색하여 전단으로 되돌려줍니다.API 문서에 설명된 "액세스 토큰"을 사용하여 원하는 작업을 수행할 수 있습니다.
이 단점을 백엔드에 추가하면, Google 사이트로 돌아가서Concept에 연결하면 데이터베이스 정보를 가져와 웹 사이트에 표시합니다.

너무 신기해!우리 방금 뭐 했지?사용자는 그들의 개념 계정을 연결할 수 있고, 우리는 그들의 데이터를 얻을 수 있으며, 그들의 개념 작업 구역을 변경할 수 있다.그렇다면 Commotion과 유사한 폼 프로그램을 만드는 데 어떻게 사용합니까?사용자는 그들의 개념 계정을 연결할 수 있으며, 우리는 그들의 개념 데이터베이스를 얻을 것이다.데이터베이스를 사용하면 응답을 제출하는 사람이 있을 때 데이터를 가져와 사용자의 개념 데이터베이스에 추가하는 폼을 만들 것입니다. 이 모든 것은 API를 사용합니다.우리가 하는 일은 이곳에서 데이터베이스를 얻는 것이지만,access 영패가 있으면 우리는 더 많은 일을 할 수 있다.
우리는 이것이 유용한 강좌가 되기를 바란다.만약 당신의 개념 작업 구역의 표를 원하지만 시간이 없다면 반드시 우리에게 연락하세요Commotion.page!