API의 즐거움: 느슨한 슬라이드 응용 프로그램 구축!

참고: 본고의 2019년 일부 내용은 Bear를 사용하여 Slack API를 연결하는 것을 언급합니다.반대로, 우리는 지금 우리의 개원 프로젝트 Pizzly을 보는 것을 건의합니다.본문에서 언급한 oAuth 부분을 처리할 수 있습니다.
여러분과 마찬가지로 우리는 Slack, Bearer을 자주 사용합니다.우리는 채널이 많고, 어떤 것은 전체 팀에 주고, 어떤 것은 길드에게만 준다.우리는 심지어 원격으로 휴대할 수 있는 커피도 있다.
다른 팀과 마찬가지로 정보는 느슨해질 때 많이 잃어버린다.따라서 우리가 열심히 하는 일은 모든 통로에서 중요한 정보를 포지셔닝하는 것이다.
그것은 프로젝트를 신속하게 시작하고 실행하는 명령일 수도 있고, 우리가 가장 좋아하는 식당 메뉴를 가리키는 링크일 수도 있다.이제 고정 메시지는 우리의 게으른 일상적인 업무의 중요한 부분이 되었다. 우리는 심지어 메시지를 DM에 고정시켰다.
#공정 채널의 고정 메시지
Slack에서 작은📌 채널 맨 위에 있습니다.메시지를 포함하는 차단 버전이 있는 사이드바를 열려면 누르십시오.그런 다음 각 메시지를 클릭하여 컨텍스트를 확인해야 합니다.
문제는 Slack의 무료 버전에서는 이전 메시지에 액세스할 수 없습니다.사실 증명, API가 해냈다!따라서 we built an app for that.
어떻게 하는지 한번 볼까요?

이완 API 이해

먼저 on Slack's API documentation을 살펴보겠습니다. pins.list endpoint은 다음과 같은 요약을 가지고 있습니다.

이 요청은 다음과 같은 매개변수를 사용합니다.

Slack 문서의 토큰은 사용자 토큰으로 일반적으로 access token이라고 합니다.채널 매개 변수는 채널 식별자입니다. 이것은 우리가 먼저 다른 단점 channels.list 을 조회해야 한다는 것을 의미합니다.
API 호출 흐름이 무엇인지 추정할 수 있습니다.

우선 채널 목록 조회하기;

그리고 채널 식별자를 사용하여 고정 메시지를 나열합니다.

이제 놀아야겠다🤓!

느슨한 API 구성 및 토큰 생성

Slack API를 사용할 수 있도록 아래의 Bearer를 사용합니다.우선, 우리는 add the Slack API을 Bear's dashboard로 전환하고 제공된 설명에 따라 조작할 것이다.

새 Slack 응용 프로그램을 만들어야 합니다.

그런 다음 OAuth 콜백 URL을 구성합니다.

필요한 범위:

마지막으로 느슨한 자격 증명을 얻고 Bear에 추가합니다.

응, 느슨함이 잘 배치된 것 같아!API 요청을 시작합니다.그러나 우선, 우리는 모든 OAuthAPI에 필요한 접근 영패를 만들어야 한다.이 영패는 사용자의 신분을 표시한다.
일반적으로 OAuth를 처리하는 것은 매우 복잡하지만, 여기서 우리는 Bearer를 사용하여 이 영패를 생성할 것이다.Go back to your Slack API, Bearer의 Connect to Slack 버튼을 클릭합니다.
느슨한 OAuth 댄스, 사람을 싣는 연결 단추
적재자는 이 영패를 검색하고 저장하며 보답으로 신분 검증 표지부(authId)를 제공한다.호출 API를 호출할 때 우리는 영패가 아닌 authId을 사용할 것이다.
이렇게 되면 적재자는 시종 영패를 전달하고 필요할 때 자동으로 영패를 갱신하는 것을 관리할 것이다✨!

이완 API 호출

우리는 이미 API를 호출할 준비가 되어 있다.다음은 channels.list 노드에 대한 요청입니다.

$ curl "https://proxy.bearer.sh/slack/channels.list" \
-H "Authorization: _REPLACE-WITH-YOUR-BEARER-SECRET-KEY_" \
-H "Bearer-Auth-Id: _REPLACE-WITH-YOUR-AUTH-ID_"

위의 매개 변수를 매개 변수로 대체하면 Slack이 API 호출에 성공적으로 응답합니다.🎉!! 모든 채널의 목록을 되돌려줍니다.
이제 이전에 검색한 채널 ID 중 하나(예: C4FE4TW9K)를 사용하여 pins.list 노드에 요청을 보낼 수 있습니다.

$ curl "https://proxy.bearer.sh/slack/pins.list?channel=C4FE4TW9K" \
-H "Authorization: _REPLACE-WITH-YOUR-BEARER-SECRET-KEY_" \
-H "Bearer-Auth-Id: _REPLACE-WITH-YOUR-AUTH-ID_"

나는 너희들 중 몇 사람이 말하는 것을 들을 수 있다. 우리도 token을 통과해야 하지 않겠니?앞에서 말한 바와 같이,connect 단추를 사용하면 베어가 영패 파라미터를 처리합니다.그것은 어디에서 그것을 전달하는지, 그 가치가 무엇인지 안다!
전체 논리 및 API 흐름이 작동합니다.이 느슨한 API를 적당한 응용 프로그램에 통합할 때가 되었다.

고정 메시지 검색을 위한 응용 프로그램

Vue를 사용합니다.js, 이것은 아주 좋은 프레임워크입니다. 이런 간단한 응용 프로그램을 구축할 수 있습니다.백엔드가 없고 순수 HTML, CSS 및 일부 JS만 있습니다.
위에 Bearer의 Javascript API 클라이언트를 추가해서 API 호출을 실행하면 신기해 보입니다.
예를 들어, 다음 방법은 유휴 채널을 애플리케이션에서 가져오는 방법입니다.

slack
  .auth("AN-AUTH-ID-GENERATED")
  .get('/channels.list')
  .then(({ data }) => {
    if (data.ok && data.channels) {
      this.channels = channels
    }
  })

그리고 이전에 선택한 채널에서 고정 메시지를 가져오는 기능:

slack
  .auth("AN-AUTH-ID-GENERATED")
  .get(`/pins.list?channel=${this.selectedChannelId}`)
  .then(({ data }) => {
    if (data.ok && data.items) {
      this.messages = data.items
    }
  })

A note on front-side API call: When calling an API from a client-side context, you need to be extra careful about security. Bearer gives you an option to enable client-side calls, using a publishable key.

우리는 거의 완성했지만, 우리의 응용 프로그램은 여전히 약간의 것이 부족하다.지금까지 우리는 우리 자신의 느슨한 표지를 사용해 왔지만, 우리는 누구나 느슨한 표지를 사용하여 연결하고 그들의 고정된 정보를 검색할 수 있기를 바란다.따라서 모든 Slack 작업 영역에 적용할 수 있습니다.

느슨한 인증 추가

사용자가 자신의 느슨한 채널과 고정된 메시지를 검색하기 위해서, 우리는 그/그녀가 느슨한 표지를 사용하여 연결할 수 있도록 해야 한다.
Bearer는 이러한 논리를 처리하는 JavaScript client(및 React 구성 요소)을 제공합니다.

이 구성 요소가 추가되면 사용자는 Slack 계정으로 로그인할 수 있습니다.그들의 신분을 사용함으로써 우리 응용 프로그램은 그들의 신분을 대표하여 API 호출을 실행할 것이다.이것이 바로 우리가 원하는 것이다.
정리를 해볼게요!Slack API를 사용하여 정적 애플리케이션을 구축했습니다.전체 OAuth 스트림 및 API 호출은 Bearer에서 처리됩니다.Netlify를 사용하여 프로덕션에 배포🚀
전체 개요를 얻기 위해 here을 직접 시험적으로 사용하고 원본 코드를 엽니다.