SquareのOAuth2認証を利用する

多くのWebサービスではWeb APIを使ってデータアクセス/操作する際にOAuth2を利用します。SquareのWeb APIでも多分に洩れず、OAuth2を利用しています。

今回はその基本的な使い方です。プログラミング言語はRubyで紹介しますが、他にもJava、PHP、Pythonのサンプルコードもあります。

### サンプルコードについて

Sinatraを使ったサンプルコードは[GitHub](https://github.com/square/connect-api-examples/tree/master/connect-examples/oauth/ruby)にアップロードされています。こちらを参考にしてください。

まずコードをcloneします。

```
$ git clone git@github.com:square/connect-api-examples.git
```

そしてサンプルコードまで辿ります。

```
cd connect-api-examples/connect-examples/oauth/ruby
```

Gemfileはなくとも利用できますがあった方が動かしやすいでしょう。

```
$ cat Gemfile
source 'https://rubygems.org'

gem 'sinatra'
gem 'unirest'
```

そしてライブラリをインストールします。

```
$ bundle
```

### アプリケーションキーを変更する

`oauth-flow.rb` にある `APP_ID` と `APP_SECRET` を自分のものと置き換えます。この文字列は[Square Developer Portal](https://connect.squareup.com/) にて取得できます。

```
APP_ID     = 'sq0...xqA'
APP_SECRET = 'sq0...8QM'
```

<img width="1024" alt="Screenshot_ 2017-09-14 21.07.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/197026/a294446e-75b7-d1a6-c65c-279587399fa5.png">

APP_SECRETはOAuthの中にあります。

<img width="1024" alt="Screenshot_ 2017-09-14 21.09.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/197026/f89e5173-f3d4-13ea-fece-80261da5f9dc.png">

これでコードの修正は完了です。

### コールバックURLを指定する

[Square Developer Portal](https://connect.squareup.com/)のOAuth設定にあるRedirect URLを指定します。今回はローカルで動かすので、 `http://localhost:4567/callback` とします。

<img width="1024" alt="Screenshot_ 2017-09-14 21.23.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/197026/88524987-b554-3054-825d-527b93f2b06b.png">

### 試す

まず http://localhost:4567/ を開きます。

そして「Click here to authorize the application.」と書かれているのでクリックします。

![Screenshot_ 2017-09-14 17.34.28.png](https://qiita-image-store.s3.amazonaws.com/0/197026/b6bc9611-cd67-fc07-c094-619055edc4cb.png)

そうすると認可を求める画面が表示されます。

![Screenshot_ 2017-09-14 17.34.54.png](https://qiita-image-store.s3.amazonaws.com/0/197026/f9bb585c-c33b-da62-efb4-3f576d1d922b.png)

許可をクリックすれば処理成功としてコールバックされます。この時のURLは以下のようになります。

```
http://localhost:4567/callback?code=sq0...heg&response_type=code#_=_
```

この code パラメータを使って、トークンを取得します。

```

response = Unirest.post 'https://connect.squareup.com/oauth2/token',
                        headers: {
                          'Authorization' => "Client #{APP_SECRET}",
                          'Accept' => 'application/json',
                          'Content-Type' => 'application/json'
                        },
                        parameters: {
                          'client_id' => APP_ID,
                          'client_secret' => APP_SECRET,
                          'code' => authorization_code
                        }
```

この時のレスポンスは次のようになります。

```
{
  "access_token" => "sq0...PQg",
  "token_type" => "bearer",
  "expires_at" => "2017-10-14T08:53:50Z",
  "merchant_id"=>"M1D...KAK"
}
```

このaccess_tokenをデータベースなりに保存しておくことで、そのユーザとしてSquare APIが使えるようになります。

### エラーの場合

エラーの場合は次のようなレスポンスが返ってきます。例えば以下は許可を得られなかった場合です。

```
http://localhost:4567/callback?error=access_denied&error_description=user_denied
```

### アプリの管理

なお、接続したアプリについてはSquareデータのアプリメニューの中にあるマイアプリにて確認できます。もう使っていないものであったり、誤って接続したアプリなどはこちらで削除しましょう。

![Screenshot_ 2017-09-14 17.51.12.png](https://qiita-image-store.s3.amazonaws.com/0/197026/0a61f987-6423-eabd-cfb0-e4762fd194cd.png)

----

このような形でSquareのOAuth2は簡単に実装できます。ぜひSquareの決済システムを使ったプラグインや連携システムを構築してみてください！

[Square Connect API Documentation](https://docs.connect.squareup.com/api/oauth/#navsection-oauth)