Twitter OAuth認証連携 概要

Twitterの認証機能を用いて、Webアプリにログインする際のシーケンスや開発に必要な事前作業のメモ。

## 概シーケンス

![Login_with_Twitter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/8d117dae-4c69-c4e5-a820-cc88fb3dc8b9.png)

### ②RequestToken取得 例

```http
POST /oauth/request_token HTTP/1.1
User-Agent: themattharris' HTTP Client
Host: api.twitter.com
Accept: */*
Authorization:
        OAuth oauth_callback="http%3A%2F%2Flocalhost%2Fsign-in-with-twitter%2F",
              oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
              oauth_nonce="ea9ec8429b68d6b77cd5600adbbb0456",
              oauth_signature="F1Li3tvehgcraF8DMJ7OyxO4w9Y%3D",
              oauth_signature_method="HMAC-SHA1",
              oauth_timestamp="1318467427",
              oauth_version="1.0"
```

### ③RequestToken返却 例

```http
HTTP/1.1 200 OK
Date: Thu, 13 Oct 2011 00:57:06 GMT
Status: 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 146
Pragma: no-cache
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
Vary: Accept-Encoding
Server: tfe

oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
oauth_token_secret=veNRnAWe6inFuo8o2u8SLLZLjolYDmDP7SzL0YfYI&
oauth_callback_confirmed=true
```

### ④Twitter認証画面へリダイレクト 例

```http
https://api.twitter.com/oauth/authenticate?oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0
```

### ⑥oauth_verifierを発行し、アプリへリダイレクト 例

```http
GET /sign-in-with-twitter/?
        oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
        oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.5 (KHTML, like Gecko) Chrome/16.0.891.1 Safari/535.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://localhost/sign-in-with-twitter/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
```

### ⑦アクセストークンリクエスト 例

**リクエスト例**

```http
POST /oauth/access_token HTTP/1.1
User-Agent: themattharris' HTTP Client
Host: api.twitter.com
Accept: */*
Authorization: OAuth oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
                     oauth_nonce="a9900fe68e2573b27a37f10fbad6a755",
                     oauth_signature="39cipBtIOHEEnybAR4sATQTpl2I%3D",
                     oauth_signature_method="HMAC-SHA1",
                     oauth_timestamp="1318467427",
                     oauth_token="NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0",
                     oauth_version="1.0"
Content-Length: 57
Content-Type: application/x-www-form-urlencoded

oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY
```

**レスポンス例**

```http
HTTP/1.1 200 OK
Date: Thu, 13 Oct 2011 00:57:08 GMT
Status: 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 157
Pragma: no-cache
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
Vary: Accept-Encoding
Server: tfe

oauth_token=7588892-kagSNqWge8gB1WwE3plnFsJHAZVfxWD7Vb57p0b4&
oauth_token_secret=PbKfYqSryyeKDWz4ebtY3o5ogNLG11WJuZBc9fQrQo
```

### 大まかな画面遷移(ユーザー視点)

1. ユーザーが、連携Webアプリのログイン画面にアクセス(アプリは、「Twitterでサインイン」リンクまたはボタンをレンダリング)する。
2. ユーザーが、「Twitterでサインイン」ボタンをクリックする。
3. WebブラウザーがTwitter認証画面にリダイレクトされる。
4. ユーザーが、必要に応じてTwitterでログインと認証を行う。
5. Webブラウザーは、(連携Webアプリの)登録済みリダイレクトURLにリダイレクトし、連携Webアプリはアクセストークンを受け取る。
6. 連携Webアプリはログイン後画面を表示する。

## 開発に必要な事前作業
### 開発者登録
1. Twitterアカウントを作成する。
2. [申請サイト](https://developer.twitter.com/en/apps)から開発者登録申請を行う。※必要事項については、別サイトを参照ください。
3. 
### アプリ登録(APIキー取得)
1. [開発者向けサイト](https://apps.twitter.com/)からアプリを登録し、ConsumerKeyとConsumerSecretを取得する。※リダイレクトURIの登録必要。

## 参考情報

* [Twitter Developerの開発者申請（例文あり）とAPIキー取得方法まとめ【2019年版】](https://digitalnavi.net/internet/3072/)
* [Log in with Twitter](https://developer.twitter.com/en/docs/authentication/guides/log-in-with-twitter)