ISSUEではfreeeと連携する機能があります。
連携するためにはユーザーによる認証が必要です。
SPAでどのように認証を行うのかを書いていきます。


# 1. 認証ページに飛ばす
next/linkを使ってqueryを設定し、認証ページに飛ばします。
リダイレクトさせたいページも指定しておきましょう。

![img](/mosaic-code.jpg)

![image](https://user-images.githubusercontent.com/19757050/163670959-f602cd93-c153-4343-b180-8d3ea3ebdca8.png)

![image](https://user-images.githubusercontent.com/19757050/163671190-906c3d4e-a784-4d3e-888b-cf101a418e00.png)

# 2. 認証後にURLのクエリにあるcodeをbackendに送ってアクセストークンを保存する
認証後にリダイレクトURL先に飛ばされるとcodeクエリがついています。
このcodeの値を取得し、バックエンドに送ります。SPAではアクセストークンを扱う処理は行わないようにしましょう。

http://localhost:3000/reports/activity?code=owh7ryt4r7248rfqoefhowefhweoufhewoufhweuof

useEffectでrouterのcodeの変更を検知します。
oauthFreeeUserはbackendにリクエストを投げる関数です。
![img](/mosaic-code.jpg)

# 3. backendでの処理
backendではcodeを受け取って、トークン取得のためのPOSTリクエストを送るだけです。

![img](/mosaic-code.jpg)

以上がNext.js・React.js・SPAで認証して、アクセストークンを取得する方法です。

ISSUEではfreeeと連携する機能があります。
連携するためにはユーザーによる認証が必要です。
SPAでどのように認証を行うのかを書いていきます。


# 1. 認証ページに飛ばす
next/linkを使ってqueryを設定し、認証ページに飛ばします。
リダイレクトさせたいページも指定しておきましょう。

```js
import Link from 'next/link'

<Link
  href={{
    pathname:
      'https://accounts.secure.freee.co.jp/public_api/authorize',
    query: {
      client_id: process.env.NEXT_PUBLIC_FREEE_APP_CLIENT_ID,
      redirect_uri: `${process.env.NEXT_PUBLIC_APP_URL}/reports/activity`,
      response_type: 'code',
    },
  }}
>
  <Button
    type="button"
    variant="contained"
    size="large"
    color="primary"
  >
    <Typography variant="body2">freeeと連携する</Typography>
  </Button>
</Link>

```

![image](https://user-images.githubusercontent.com/19757050/163670959-f602cd93-c153-4343-b180-8d3ea3ebdca8.png)

![image](https://user-images.githubusercontent.com/19757050/163671190-906c3d4e-a784-4d3e-888b-cf101a418e00.png)

# 2. 認証後にURLのクエリにあるcodeをbackendに送ってアクセストークンを保存する
認証後にリダイレクトURL先に飛ばされるとcodeクエリがついています。
このcodeの値を取得し、バックエンドに送ります。SPAではアクセストークンを扱う処理は行わないようにしましょう。

http://localhost:3000/reports/activity?code=owh7ryt4r7248rfqoefhowefhweoufhewoufhweuof

useEffectでrouterのcodeの変更を検知します。
oauthFreeeUserはbackendにリクエストを投げる関数です。
```js
useEffect(() => {
  const oauth = async () => {
    const { query } = router
    if (query.code && user && !user.freee) {
      const status = await oauthFreeeUser(query.code as string, user.id)
      if (status === 'ok') {
        成功した時の処理
      } else {
        失敗した時の処理
      }
    }
  }
  oauth()
}, [router, user])
```

# 3. backendでの処理
backendではcodeを受け取って、トークン取得のためのPOSTリクエストを送るだけです。

```js
async getOauthAccessToken(code: string): Promise<FreeeAccessTokenResponse> {
  const headers = {
    "User-Agent": "ISSUE",
  };

  return await axios
      .post(
          `${BASE_ACCOUNT_URL}/token`,
          {
            client_id: freeeClientId(),
            client_secret: freeeClientSecret(),
            grant_type: "authorization_code",
            redirect_uri: `${frontUrl()}/reports/activity`,
            code,
          },
          {headers}
      )
      .then((response) => {
        functions.logger.log("getOauthAccessToken", response.data);
        return response.data;
      });
}
```

以上がNext.js・React.js・SPAで認証して、アクセストークンを取得する方法です。

1. 認証ページに飛ばす

続きを読むには単価診断を受けてください（30秒）