PaizaCloud+Laravel5.7.9でtwitter連携ログインをしよう

# PaizaCloudを使ってtwitter連携をしたい

PaizaCloudでどこでも開発できる。そしてどこでも続きの作業に入れる。
そして環境構築は一瞬で終わる。~~俺みたいな~~初心者にとくにおすすめ。

## 本記事の対象者
Laravelを触ったこともロクに無い素人。
でもtwitter連携ログインを実装したい。

以下の内容を全て終わらせた人。
**Laravel入門 - はじめてのLaravelチュートリアル**
https://proxy-paiza-hatenablog-com.paiza.cloud/entry/2018/02/16/paizacloud_laravel#main

## 目標
- twitter連携でログイン出来るWebサービスの公開
- 他のSNSにも対応できるが、この記事ではtwitter以外には言及しない。

## 準備
- PaizaCloudのアカウント
 - https://paiza.cloud/ja/
- Application Managementでアプリの登録をする
 - https://developer.twitter.com/en/apps
- twitter側で必要な設定
 - WebsiteURL https://サーバ名.paiza-user.cloud/
 - CallbackURL https://サーバ名.paiza-user.cloud/login/twitter/callback

## 新規サーバの作成
PaizaCloudのメニューから新規サーバ作成を選択すると以下の画面が表示される。
![スクリーンショット 2018-10-23 5.31.52.png](https://qiita-image-store.s3.amazonaws.com/0/132034/9b621025-c693-9b16-4880-a7be50f44a69.png)

Laravel、phpMyAdmin、Apacheを選択して新規サーバ作成。


## Laravelアプリケーションの作成

ターミナルを開き以下のように入力する。

```
~$ laravel new myapp
```

## データベースの作成

myappフォルダ下でmysqlを開いてデータベースの作成をする。

```
~$ cd myapp
~/myapp$ mysql -u root
>mysql create database mydb;
```

## データベースの接続の設定

下記のように変更する。

```/.env
DB_DATABASE=mydb
DB_USERNAME=root
# DB_PASSWORD=secret
```

## httpとhttpsの混在を解消する
以下の内容を追記する。（一番下でよい）
PaizaCloudはhttpsで公開するので必要。

```routes/web.php
URL::forceScheme('https');

```

## authの準備

### Laravel標準のauthを用意する
```
~/myapp$ php artisan make:auth
```

### Socialiteのインストール

```
~/myapp$ composer require laravel/socialite
```
これめっちゃ時間かかる。

## ログイン処理の実装
### ログイン画面にtwitterログインを追加する
12行目の@csrfの下に以下を追記する。

```resources/views/auth/login.blade.php
<a href="{{ url('login/twitter')}}">twitterでログイン</a>
```
なお、通常ログイン部分は不要なので削除してもよい。

### usersテーブルを改修する
make:auth時にusersが自動作成されるので、これをtwitter用に改修する。
既存のpublic function up()を以下の内容に変更する。

```database/migrations/xxxx_create_users_table.php
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('twitterid')->unique;
            $table->string('nickname');
            $table->string('name');
            $table->rememberToken();
            $table->timestamps();
        });
    }


```

コンソールから以下の内容を実行する。

```
~/myapp$ php artisan migrate:refresh
```

### ルーティングの設定
一番下に追記する。

```routes/web.php
//ログインボタンからのリンク
Route::get('/login/{social}', 'Auth\LoginController@socialLogin')->where('social', 'facebook|twitter');
//コールバック用
Route::get('/login/{social}/callback', 'Auth\LoginController@handleProviderCallback')->where('social', 'facebook|twitter');
```


### LoginControllerの実装
下記の内容を該当ファイルに上書きコピペする。

```app/Http/Controllers/Auth/LoginController.php
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

use Socialite;
use App\User;
use Auth;

class LoginController extends Controller
{
    use AuthenticatesUsers;

    protected $redirectTo = '/home';

    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    //ログインクリックからのリンク
    public function socialLogin($social)
    {
        return Socialite::driver($social)->redirect();
    }

    //Callback処理
    public function handleProviderCallback($social)
    {
        //ユーザのソーシャル情報を取得
        $userSocial = Socialite::driver($social)->user();
        //twitteridで検索
        $user = User::where(['twitterid' => $userSocial->getId()])->first();
        
        if($user){
            //2回目以降のログイン
            Auth::login($user);
            return redirect('/home');
        }else{
            //初回ログイン
            $newuser = new User;
            $newuser->name = $userSocial->getName();
            $newuser->twitterid = $userSocial->getId();
            $newuser->nickname = $userSocial->getNickName();
            $newuser->save();
            Auth::login($newuser);
            return redirect('/home');
        }
    }
}


```



## twitterのクライアントIDを設定する
以下の内容を追記する。

```config/service.php

   'twitter' => [
      'client_id' => env('TWITTER_CLIENT_ID'),
      'client_secret' => env('TWITTER_CLIENT_SECRET'),
      'redirect' => env('TWITTER_CALLBACK_URL'),
    ],
```

```/.env

TWITTER_CLIENT_ID=twitterクライアントID
TWITTER_CLIENT_SECRET=twitterクライアントシークレット
TWITTER_CALLBACK_URL=https://サーバ名.paiza-user.cloud/login/twitter/callback

```

## サーバの起動
apacheがデフォルトで起動している為、停止させる。

```
~/myapp$ sudo service apache2 stop; sudo systemctl disable apache2
```


外部からアクセス出来るようにして起動する。

```
~/myapp$ sudo php artisan serve --host=0.0.0.0 --port=80
```

## 動作確認
https://自分のサーバ名.paiza-user.cloud/login
にアクセスすれば動作している。

<img width="1140" alt="スクリーンショット 2018-10-23 23.10.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/132034/86bf2d4d-94cf-b804-7c60-ebe74ed33c04.png">

- twitterでログインをクリック。

<img width="936" alt="スクリーンショット 2018-10-23 23.11.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/132034/9d0f30b4-b94b-0886-8786-0cf787db4992.png">

- twitterにログインする。（していれば自動的に画面遷移）

<img width="1148" alt="スクリーンショット 2018-10-23 23.08.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/132034/9738f816-1ed5-dbb5-24a4-b5fc46a9cf39.png">
以上で終了です。お疲れ様でした。
全工程を書いたつもりですが、不備がありましたら教えてください。

## 参考

**Laravel入門 - はじめてのLaravelチュートリアル**　前提
https://paiza.hatenablog.com/entry/2018/02/16/paizacloud_laravel
（PaizaCloudでLaravel開発を始める人は必見、穴が開くまで読む）

**Laravel 5.7 Laravel Socialite**　必読
https://readouble.com/laravel/5.7/ja/socialite.html

**Laravel5.7でソーシャルログイン（Socialite利用）**　多数参照。ありがとうございます
https://qiita.com/zaburo/items/26e94bce0068f479a8e8

**Laravel SocialiteのgetEmailでTwitterのメールアドレスが取得できなかったので調べてみた**
https://tech.innovator.jp.net/entry/2017/08/08/120555

**新しくなった Twitter Developer ポータルに登録してみる**
https://qiita.com/tdkn/items/521686c240b0c5bc6207