2021年4月9日

プログラミング

Slack OAuth x React で Slack ユーザー認証を作ってみた!

目次

  1. はじめに
  2. 1 : Slack アプリの準備
  3. 2 : React アプリの準備
  4. おわりに
  5. 参考

はじめに

社内プロジェクトで Slack OAuth に触れる機会があったので、
今回はこちらを使ったユーザー認証について紹介していきます!

この機能を使うことで Slack のユーザー情報を使用したユーザー認証を実装することができます!

対象読者

・Slack のユーザー情報を使用してユーザー認証を実装したい方

この記事で主に説明するもの

・Slack OAuth を使用するための Slack アプリの準備

・ユーザー認証を実装するための React の準備

この記事で説明しないもの

・OAuth について
参考 にて分かりやすい記事をまとめております。

1 : Slack アプリの準備

新規 Slack アプリの追加

・https://api.Slack.com/apps にアクセスします。

・Create New App で App Name と Development Slack Workspace を設定します。

slack-auth_01.png (128.0 kB)

slack-auth_02.png (98.0 kB)

Slack アプリ情報のメモ

・App Credentials の Client ID と Client Secret をメモします。 (取扱注意)

slack-auth_03.png (95.0 kB)

リダイレクトURLの追加

・OAuth & Permissions に移動します。

・OAuth Tokens & Redirect URLs に開発環境のローカルURLと本番環境のURLを設定します。

slack-auth_04.png (159.8 kB)

権限の編集

・Scopes に users:read を設定します。

slack-auth_05.png (82.3 kB)

2 : React アプリの準備

新規 React アプリの追加

// terminal
yarn create react-app {{ 任意のフォルダ名 }} --template typescript

axios の追加

// terminal
yarn add axios

環境変数の追加

yarn start では .env.development の値が、

yarn build では .env.production の値が適用されます。

// .env
REACT_APP_SLACK_CLIENT_ID={{ Slackアプリの Client ID }}
REACT_APP_SLACK_CLIENT_SECRET={{ Slackアプリの Client Secret }}
// .env.development
REACT_APP_SLACK_REDIRECT_URI={{ 開発環境のローカルURL }}
// .env.production
REACT_APP_SLACK_REDIRECT_URI={{ 本番環境のURL }}

ユーザー認証処理の追加

Content-Type が application/x-www-form-urlencoded の場合は、

new URLSearchParams() でパラメータを管理します。

// api/slack.ts

import axios from 'axios'

export const getUser = (code: string) => {
    const params = new URLSearchParams()
    params.append('code', code)
    params.append('client_id', process.env.REACT_APP_SLACK_CLIENT_ID!)
    params.append('client_secret', process.env.REACT_APP_SLACK_CLIENT_SECRET!)
    params.append('redirect_uri', process.env.REACT_APP_SLACK_REDIRECT_URI!)
    return axios.post('https://slack.com/api/oauth.access', params)
}

export const slackRedirectURI = process.env.REACT_APP_SLACK_REDIRECT_URI!
export const slackLoginURI = `https://slack.com/oauth/authorize?client_id=${process.env.REACT_APP_SLACK_CLIENT_ID!}&scope=identify&redirect_uri=${process.env.REACT_APP_SLACK_REDIRECT_URI!}`

アクセストークン保存処理の追加

他の Slack API でもアクセストークンを流用できるように

sessionStorage に保存します。

// api/session.ts

const sessionStorage = window.sessionStorage

export const setSessionUser = (access_token: string, user_id: string) => {
    const sessionUser = JSON.stringify({ access_token, user_id })
    sessionStorage.setItem('oauth-test', sessionUser)
}

export const getSessionUser = () => {
    const sessionUser = JSON.parse(sessionStorage.getItem('oauth-test')!)
    return sessionUser!
}

ログイン状態判定処理の追加

URL に code というパラメータが含まれていたら…

ユーザー認証を実施して、sessionStorage にアクセストークンを保存します。

URL に code というパラメータが含まれていなかったら…

sessionStorage にアクセストークンが保存されているかを確認します。

// hooks/useAuth.tsx

import { useEffect, useState } from 'react'
import { getUser, slackRedirectURI } from '../api/slack'
import { getSessionUser, setSessionUser } from '../api/session'

export const useAuth = () => {
    const [isAuthenticated, setIsAuthenticated] = useState(false)
    const [hasError, setHasError] = useState(false)

    useEffect(() => {
        (async () => {
            const params = new URLSearchParams(window.location.search)
            const code = params.get('code')
            if (code) {
                try {
                    const response = await getUser(code)
                    setSessionUser(response.data.access_token, response.data.user_id)
                    window.location.href = slackRedirectURI
                } catch (err) {
                    console.log(err)
                    setHasError(true)
                }
            } else {
                if (getSessionUser()) {
                    setIsAuthenticated(true)
                } else {
                    setHasError(true)
                }
            }
        })()
    }, [])

    return { isAuthenticated, hasError }
}

ログイン状態から表示するコンテンツを決定


// App.tsx

import { slackLoginURI } from './api/slack'
import { useAuth } from './hooks/useAuth'

function App() {
  const { isAuthenticated, hasError } = useAuth()

  if (!isAuthenticated || hasError) {
    return (
      <div>
        ログイン前のコンテンツ
        <a href={slackLoginURI} ></a>
      </div>
    )
  }

  return (
    <div>ログイン後のコンテンツ</div>
  )
}

export default App;


これで Slack OAuth を使ったユーザー認証の完成です!

おわりに

いかがでしたか?

Slack OAuth を使用すると思っているよりも簡単にユーザー認証を実装できます。

また、アクセストークンを sessionStorage に保存しているので、
他の Slack API を使用する際にパラメータとして設定すれば Slack の情報を使ったアプリを作ることができます!

ぜひお試しください!

参考

Using OAuth 2.0

一番分かりやすい OAuth の説明

SlackのOAuth認証を使ってユーザ情報を取得してみた

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP