Swift1.2でDribbbleのOAuthを試してみた


DribbbleのAPIをいろいろ調べてる過程で **Dribbble** のAPIがOAuth2.0認証をする必要があったので調べるついでに実装してみました。

ライブラリもたくさんあったのですが、とりあえずやってみようの精神で実装してみました。

## GitHub

先にソースコードの置き場を...。

[ryokosuge/Oauth2Dribbble](https://github.com/ryokosuge/Oauth2Dribbble)

## OAuth2を突破するまでの過程

段取り的なのをまずは紹介します。

1. DribbbleでApplication登録をする
2. URLSchemeでcallbackURLを設定する
3. 実際に認証画面を開く
4. callbackから値を受け取ってpost
5. `access_token`を取得する

という流れになります。

今回使うAPIが **Dribbble** なので **Dribbble** を例に話を進めていきますが、他のAPIでも大差がないと思います。

アクセス先が違うくらいかと。

なので（多分）QiitaのAPI(ver 2.0)でも通用するかと思います。

では、一つずつ説明していきます。

### 1. DribbbleでApplication登録をする

![スクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/47302/7b2d978d-c6e6-3315-3616-de17c7dc5721.png "スクリーンショット")

[Dribbble Developer](http://developer.dribbble.com)よりApplication登録をしてください。

`Register an Application`ボタンを押せば登録画面へ進めると思います。

入力項目についてですが

- Name : アプリケーションの名前です。
- Description : アプリケーションの説明です。
- Website URL : アプリケーションのWebサイトのURLです。ない場合は自分のブログのURLとかで大丈夫かと。
- Callback URL : アプリに戻るためのURLです。iOSのURLSchemeに則って入力してください。

これを入力したら`register application`を押して完了です。

`Client ID`と`Client Secret`をメモしておいてください。

### 2. URLSchemeでcallbackURLを設定する

これをしないとwebでの認証後、アプリに戻ってこれず終了します。

これはスクリーンショットで説明したいと思います。

**Dribbble**での設定事項

![スクリーンショット2](https://qiita-image-store.s3.amazonaws.com/0/47302/76b98930-e252-73f9-b90e-378c2dfdb842.png "スクリーンショット2")

ここのCallback URLをXcodeでURLSchemeとして設定します。

**XCode**での設定

![スクリーンショット3](https://qiita-image-store.s3.amazonaws.com/0/47302/1294b680-0a81-dc2c-d797-7f8f31b48400.png "スクリーンショット3")

これでWebでの認証後、値が返ってくるようになります。

### 3. 実際に認証画面を開く

では実際にソースコードを交えて説明していきます。

画面はこんな感じです。

![iOS Simulator Screen Shot 2015.05.14 12.47.39.png](https://qiita-image-store.s3.amazonaws.com/0/47302/1d01a48e-69fa-a001-a487-50a4b7fb43e5.png "iOS Simulator Screen Shot 2015.05.14 12.47.39.png")

ボタンを押したらsafariを使って認証画面を表示します。

以下のようなURLを作成して`UIApplication.sharedApplication().openURL(_:)`を叩きます。

```swift
let authorizeURL = "https://dribbble.com/oauth/authorize?client_id=\({Client ID})&redirect_uri=\({Callback URL})&scope=public&state=DRIBBBLE"
if let authURL = NSURL(string: authorizeURL) {
	UIApplication.shreadApplication().openURL(authURL)
}
```

APIの仕様は以下を参照してください。

[http://developer.dribbble.com/v1/oauth/#web-application-flow](http://developer.dribbble.com/v1/oauth/#web-application-flow)

safariでログイン画面 or 認証画面が出てきたら、認証してください。

うまくいけばアプリに戻ってこれると思います。

#### もし戻ってこれなかった場合

redirect_uriの指定がまちがっていると思いますので、 **Dribbble**のApplication情報とURLSchemeを見比べてみてください。

### 4. callbackから値を受け取ってpost

[http://developer.dribbble.com/v1/oauth/#web-application-flow](http://developer.dribbble.com/v1/oauth/#web-application-flow)

のページの **2. Dribbble redirects back to your site.**を確認すると`code`と`state`の値がついているcallbackURLを叩いてくれるとのことなので、それを受けとって`access_token`を取得したいと思います。

#### 受け取り方

`AppDelegate.swift`に以下のメソッドを追加してください。

```swift:AppDelegate.swift
func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject?) -> Bool {
    return true
}
```

このメソッドの`openURL`の値がcallbackで返ってきた値となります。

以下のように返ってくるかと思います。

`oauth-dribbble://oauth/callback?code=xxxxxxxx&state=DRIBBBLE`

以上のURLのqueryから`code`を引き抜いて、`client_id`と`client_secret`、`redirect_uri`をpostで`https://dribbble.com/oauth/token`にrequestします。

### 5. `access_token`を取得する

requestが成功すると

```json
{
  "access_token" : "29ed478ab86c07f1c069b1af76088f7431396b7c4a2523d06911345da82224a0",
  "token_type" : "bearer",
  "scope" : "public write"
}
```

（上記のレスポンスはサンプルなので仕様しても全く意味ないかと思います）

というようなresponseが返ってくるので、それを取得して保存しておく形になります。

## 作ったクラス

上記の処理をラッピングしたクラスを作成しました。

結構適当ではありますが、参考になればと。

[OauthDribbble.swift](https://github.com/ryokosuge/Oauth2Dribbble/blob/master/Oauth2Dribbble/OauthDribbble.swift)

ソースコードが長いので、リンクで勘弁してください...。

## 終わりに

僕自身OAuth2.0に詳しいわけでもないですが、他のAPIを仕様するときに触っておいたほうがいいかなと思ってやってみました。

なにか不具合ありましたら、ご連絡ください。