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

はじめに

社内プロジェクトで 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 アプリ情報のメモ

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

リダイレクトURLの追加

・OAuth & Permissions に移動します。

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

権限の編集

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

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認証を使ってユーザ情報を取得してみた